The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Table question
Lee Batchelor
post Apr 13 2023, 01:09 PM
Post #1


Member
***

Group: Members
Posts: 82
Joined: 10-May 20
Member No.: 27,332
Hi all,

I'm working on a genealogical website. I often use tables to list military veterans. I would like to create a table like the one attached to this topic. I have achieved the banding but notice how the entry for Austin, George has four rows of details. I placed George's details in one row <tr> and used <br> tags to list the various notes. This keeps all his details in the dark grey band. I'd like to put the lighter grey borders below each of the Notes lines. I can't find any method to achieve this. The table in the picture was created in MS Word. Many thanks!

Attached File  Testtable.pdf ( 116.21k ) Number of downloads: 84


Edit
Here is the HTML code I used.

<tr>
<td><b>Austin</b></td><td>George<br></td>
<td style="text-align: right; padding-right: 13px">
29 Dec 1914<br>
13 Jan 1915<br>
08 Feb 1915<br>
02 Mar 1915<br>
</td>

<td style="text-align: center">
1/4<br>
1/3<br>
1/3<br>
1/5<br>
</td>

<td style="text-align: center">
Yes
</td>

<td>
Very brief Christmas greeting to his wife & children.<br>
To his wife from Salisbury Plains.<br>
Cable from Salisbury Plains informing his wife that he has spinal meningitis.<br>
Report to his wife re his recovery.<br>

This post has been edited by Lee Batchelor: Apr 13 2023, 01:12 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Apr 13 2023, 03:15 PM
Post #2


Advanced Member
****

Group: Members
Posts: 206
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
Hi there Lee Batchelor,

I am not really sure what it is that you wish to achieve.IPB Image

This is what I see after adding cell borders for clarification...
IPB Image
So the question is: how do you actually want it to look?

coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 13 2023, 06:39 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
QUOTE(Lee Batchelor @ Apr 13 2023, 08:09 PM) *

I would like to create a table like the one attached to this topic.

You could let the Austin, George and his Book of Remembrance cell span four rows (using the ROWSPAN attribute). If you then use four separate rows for Austin's Issue, Page/Column and Notes columns, you could give the cells in each row light gray top borders with CSS.

QUOTE
I placed George's details in one row <tr> and used <br> tags to list the various notes. This keeps all his details in the dark grey band. I'd like to put the lighter grey borders below each of the Notes lines. I can't find any method to achieve this.

A perhaps simpler idea than my table structure above might be to keep your current table structure, but with UL lists instead of BR (a list would also be more semantically useful than BR). Then you could give each LI element a top border with CSS (but you may also want to set the UL elements padding to zero, to remove the bullet and indent):

CODE
<td style="text-align: right; padding-right: 13px">
<ul style="padding: 0;">
<li style="border-top: 1px solid #ccc;">29 Dec 1914</li>
<li style="border-top: 1px solid #ccc;">13 Jan 1915</li>
<li style="border-top: 1px solid #ccc;">08 Feb 1915</li>
<li style="border-top: 1px solid #ccc;">02 Mar 1915</li>
</ul>
</td>

I would not recommend using inline STYLE attributes like above though, it's both impractical and makes the code bloated. Use a separate stylesheet instead, either embedded (in the page's HEAD section); or as a separate CSS file, if it's used by multiple HTML pages.

But wait, I suppose the lines in each column are related, such as "29 Dec 1914" with "Very brief Christmas greeting to his wife & children"? In that case I think a rowspanned table with neither BR nor UL is more suitable (e.g. for users using screen readers and similar).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Lee Batchelor
post Apr 14 2023, 07:26 AM
Post #4


Member
***

Group: Members
Posts: 82
Joined: 10-May 20
Member No.: 27,332
Coothead
Thanks for chiming in. I want the table entries to look like the picture I posted. I was able to achieve that look in MS Word. I should have posted the original appearance so you could see the difference. I attached it to this reply. The issue is that the Notes area relates poorly to the other columns. For example, if the user wants to see the Notes for the 29 December 1914 date, he or she must horizontally scan. This is not easy without the light colored separators. Thanks.

Christian
Thanks to you too for chiming in. I never thought about adding a CSS definition to the <head> part of the page. I'm in full agreement with you about using CSS as much as possible. I shall give your ideas a try.

There are other tables on the site that use the same banding, which is controlled with the external CSS sheet, but that don't need this special treatment, hence it would be a good idea to add CSS info to the head area because that would over-ride the external CSS sheet, correct? Thanks again for your thoughts, guys. I'll post back.



This post has been edited by Lee Batchelor: Apr 14 2023, 07:28 AM


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 14 2023, 09:03 AM
Post #5


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
QUOTE(Lee Batchelor @ Apr 14 2023, 02:26 PM) *

There are other tables on the site that use the same banding, which is controlled with the external CSS sheet, but that don't need this special treatment, hence it would be a good idea to add CSS info to the head area because that would over-ride the external CSS sheet, correct?

Yes, everything else being equal, CSS will override earlier declarations. See also https://htmlhelp.com/reference/css/structure.html#cascade


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 14 2023, 09:13 AM
Post #6


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
Making tables with spanned rows can be tricky, but here's a method (I think I've learned from pandy) that simplifies things. Basically you use the same number of cells as in an ordinary row, then just comment out the ones that are spanned. It also helps to write which column the latter correspond to.

The first row with TH elements is of course the headers, the second row does not use any spanned rows:

CODE
<table>
<tr>
<th>Surname</th>
<th>Given name</th>
<th>Issue</th>
<th>Page/Column</th>
<th>Book of Rememberance</th>
<th>Notes</th>
</tr>

<tr>
<td>Adamson</td>
<td>Frederick Byron</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>

<tr>
<td rowspan="4">Austin</td>
<td rowspan="4">George</td>
<td>29 Dec 1914</td>
<td>1/4</td>
<td rowspan="4">Yes</td>
<td>Very brief Chrismas greeting to his wife &amp; children.</td>
</tr>

<tr>
<!--<td>Surname</td>-->
<!--<td>Given name</td>-->
<td>13 Jan 1915</td>
<td>1/3</td>
<!--<td>Book of Rememberance</td>-->
<td>To his wife from Salisbury plains.</td>
</tr>

<tr>
<!--<td>Surname</td>-->
<!--<td>Given name</td>-->
<td>8 Feb 2015</td>
<td>1/3</td>
<!--<td>Book of Rememberance</td>-->
<td>Cable from Salisbury plains informing his wife that he has spinal meningitis.</td>
</tr>

<tr>
<!--<td>Surname</td>-->
<!--<td>Given name</td>-->
<td>2 Mar 2015</td>
<td>1/5</td>
<!--<td>Book of Rememberance</td>-->
<td>Report to his wife re his recovery.</td>
</tr>
</table>


As for the zebra-stripe background-colors, I haven't found an elegant way to make it happen in a table with spanned cells yet. Maybe you can use CLASS attributes. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 14 2023, 09:47 AM
Post #7


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
Came up with a zebra-stripe solution with the help of https://stackoverflow.com/questions/4207945...a-rowspan-table and using a TBODY element around the spanned rows, plus a TBODY for every single non-spanned row (which feels a bit like a hack). The first row gets a THEAD instead of TBODY for semantic reasons.

CSS:
CODE
th, td {
vertical-align: top;
}

/* zebra-striped table rows */
table {
color: #000;
background: #ebebeb;
}
thead, tbody:nth-child(odd) {
background: #d9d9d9;
}


HTML:
CODE
<table>

<thead>
<tr>
<th>Surname</th>
<th>Given name</th>
<th>Issue</th>
<th>Page/Column</th>
<th>Book of Rememberance</th>
<th>Notes</th>
</tr>
</thead>

<tbody>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>
</tbody>

<tbody>
<tr class="spanned">
<td rowspan="4">Austin</td>
<td rowspan="4">George</td>
<td>29 Dec 1914</td>
<td>1/4</td>
<td rowspan="4">Yes</td>
<td>Very brief Chrismas greeting to his wife &amp; children.</td>
</tr>

<tr class="spanned">
<!--<td>Surname</td>-->
<!--<td>Given name</td>-->
<td>13 Jan 1915</td>
<td>1/3</td>
<!--<td>Book of Rememberance</td>-->
<td>To his wife from Salisbury plains.</td>
</tr>

<tr class="spanned">
<!--<td>Surname</td>-->
<!--<td>Given name</td>-->
<td>8 Feb 2015</td>
<td>1/3</td>
<!--<td>Book of Rememberance</td>-->
<td>Cable from Salisbury plains informing his wife that he has spinal meningitis.</td>
</tr>

<tr class="spanned">
<!--<td>Surname</td>-->
<!--<td>Given name</td>-->
<td>2 Mar 2015</td>
<td>1/5</td>
<!--<td>Book of Rememberance</td>-->
<td>Report to his wife re his recovery.</td>
</tr>
</tbody>

<tbody>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>
</tbody>

<tbody>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>
</tbody>

</table>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Apr 14 2023, 11:26 AM
Post #8


Advanced Member
****

Group: Members
Posts: 206
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
Hi there Lee Batchelor,

here is my take on your problem...
index.html
CODE

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>World War Two Names</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>

<h1>Page description</h1>

<table>
<caption>World War Two Names</caption>
  <thead>
   <tr>
    <th scope="col">Surname</th>
    <th scope="col">Given<br> name</th>
    <th scope="col">Issue</th>
    <th scope="col">Page/<br>Column</th>
    <th scope="col">Book of<br> Rem</th>
    <th scope="col">Notes</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td><a href="https://example.com">Adamson</a></td>
    <td>Frederick Byron</td>
    <td>
     14 Feb 1918
    </td>
    <td>
     1/2
    </td>
    <td>
     Yes
    </td>
    <td>
     Letter to Fred from Brigadier-General Victor W. Salum awarding the M. M.    
    </td>
   </tr>
   <tr>
    <td><a href="https://example.com">Arkless </a></td>
    <td>Frank</td>
    <td>
     11 Aug 1917
    </td>
    <td>
     1/3
    </td>
    <td>
     Yes
    </td>
    <td>
     KIA circumstances to his mother, Mrs. Henry Arkless, Cavcan Street.
    </td>
   </tr>
   <tr>
    <td><a href="https://example.com">Ashman</a></td>
    <td>John Charles</td>
    <td>
     26 Jul 1915
    </td>
    <td>
     1/3
    </td>
    <td>
     Yes
    </td>
    <td>
     From King George's Hospital, London SE, dated 12 Jul, 1st Canadian Contingent.
    </td>
   </tr>
   <tr>
    <td><a href="https://example.com">Austin</a></td>
    <td>George<br></td>
    <td>
     <ul>
      <li>29 Dec 1914</li>
      <li>13 Jan 1915</li>
      <li>08 Feb 1915</li>
      <li>02 Mar 1915</li>
     </ul>
    </td>
    <td>
     <ul>
      <li>1/4</li>
      <li>1/3</li>
      <li>1/3</li>
      <li>1/5</li>
     </ul>
    </td>
    <td>
     Yes
    </td>
    <td>
     <ul class="multiple-mention">
      <li>Very brief Christmas greeting to his wife & children.</li>
      <li>To his wife from Salisbury Plains.</li>
      <li>Cable from Salisbury Plains informing his wife that he has spinal meningitis.</li>
      <li>Report to his wife re his recovery.</li>
     </ul>
    </td>
   </tr>
  </tbody>
</table>

</body>
</html>

screen.css
CODE


body {
   background-color: #f9f9f9;
   font: normal 1em / 1.5  sans-serif;
}
h1 {
   font-weight: normal;
   color: #444;
   text-align:  center;
}
caption {
   margin: 0.75em 0;
   font-size: 1.5em;
}
table {
   margin: auto;
   border-collapse: collapse;
   border: 1px solid #000;
}
th {
   padding: 0.5em 0.75em;
   background-color: #d9d9d9;  
}
td{
   padding: 0.5em 0.75em;
   background-color: #d9d9d9;
   vertical-align: top;
}
tbody tr:nth-of-type(odd) td {
   background-color: #efefef;
}
td:nth-of-type(4),
td:nth-of-type(5) {
   text-align: center;
}
ul {
   padding: 0;
   margin: 0;
   list-style: none;
}
li {
   padding-bottom: 0.5em;
   margin-bottom: 0.5em;
}
.multiple-mention li {
   border-bottom: 2px solid #efefef;  
}
a {
   font-weight: bold;
   color: #0563c1;
}


Take a quick peep at it here...

https://codepen.io/coothead/full/mdzPJqe



coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Lee Batchelor
post Apr 14 2023, 11:59 AM
Post #9


Member
***

Group: Members
Posts: 82
Joined: 10-May 20
Member No.: 27,332
Wow, thanks everyone! I have a lot to digest here. I'll work with your great suggestions and post back. Thanks again!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 02:47 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC