Table question |
Table question |
Lee Batchelor |
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! Testtable.pdf ( 116.21k ) Number of downloads: 87 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 |
coothead |
Apr 13 2023, 03:15 PM
Post
#2
|
Advanced Member Group: Members Posts: 207 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there Lee Batchelor,
coothead |
Christian J |
Apr 13 2023, 06:39 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,673 Joined: 10-August 06 Member No.: 7 |
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). |
Lee Batchelor |
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) |
Christian J |
Apr 14 2023, 09:03 AM
Post
#5
|
. Group: WDG Moderators Posts: 9,673 Joined: 10-August 06 Member No.: 7 |
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 |
Christian J |
Apr 14 2023, 09:13 AM
Post
#6
|
. Group: WDG Moderators Posts: 9,673 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 & 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. |
Christian J |
Apr 14 2023, 09:47 AM
Post
#7
|
. Group: WDG Moderators Posts: 9,673 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 & 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> |
coothead |
Apr 14 2023, 11:26 AM
Post
#8
|
Advanced Member Group: Members Posts: 207 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there Lee Batchelor,
coothead |
Lee Batchelor |
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!
|
Lo-Fi Version | Time is now: 26th May 2024 - 09:21 PM |