Menu
Imagine a list of lists similar to this:
var list = [
{ name: 'group1',
items: [ 1, 2, 3, 4, 5 ]
},
{ name: 'group2',
items: [ 1, 2, 3, 4, 5 ]
},
etc...
]
Now forgetting the whole "tables are for data not design" argument, I wanted to display a single table for list and have a seperate <thead> and <tbody> for each entry in list.
Is this technically valid? This works in the browser, but my spider senses are tingling on this one.
715
You can create multiple sections within a table by using multiple <tbody> elements. Each may potentially have its own header row or rows; however, there can be only one <thead> per table! Because of that, you need to use a <tr> filled with <th> elements to create headers within each <tbody> .
Use multiple tbody sections when rules are needed between groups of table rows. As of the HTML5 spec, this changes slightly, but the fundamental "yes, multiple tbody elements are fine) remains. Specifically, you're now allowed to put the one tfoot element after the tbody if you like.
The thead, tbody, and tfoot elements in HTML are used to group table rows into logical sections based on their content.
Those tags are not required. It is considered good form to use them if the table is used to represent data, which is what a table should be used for. If a table is used for laying out content they are typically omitted.
<tfoot> element is used with combination of <thead> and <tbody> which will define every elements of table like header, footer and body. This tag will use one or more <tr> elements within <tfoot> elements, so it will help to display a summary of the table content. It should be placed at the bottom of the table.
Among them <tfoot> is one of the important elements in the table for displaying the summary part of the table columns. <tfoot> tag must be placed after <caption>, <thead>, <colgroup> tag in the table.
@metal: no, there is a semantic difference - multiple <tbody>elements describes separate groups in the table, as was explained in the answer. Also I should add that it's generally better to target cells for backgrounds, so the CSS should be, for example, tbody:nth-child(odd) td { background: #f5f5f5; }
As of the HTML5 spec, this changes slightly, but the fundamental "yes, multiple tbody elements are fine) remains. Specifically, you're now allowed to put the one tfoot element after the tbody if you like.
You can have as many <tbody> elements as you want, but no more than one each of <thead> and <tfoot>. Reference:
Content model:
In this order: optionally a caption element, followed by zero or more colgroup elements, followed optionally by a thead element, followed by either zero or more tbody elements or one or more tr elements, followed optionally by a tfoot element, optionally intermixed with one or more script-supporting elements.
190
There's at most one thead and one tfoot allowed, so you shouldn't create additional headers. After all the th in a thead gives a meaning to your columns, like "time of day", "temperature", "amount of cats currently on fire".
If the entries in your list are related they should all be in the same table and you should provide a fitting header to display that relation.
If the entries are actually unrelated you should provide a single table for every of those. You can still apply the same CSS on every table to get a nice result.
12
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
