views:

218

answers:

5

Can we have multiple <tbody> in same <table>? If yes then in what scenarios we should use multiple <tbody>

A: 

According to this example it can be done: http://www.w3.org/TR/html401/struct/tables.html#h-11.2.3.

Grz, Kris.

XIII
A: 

yes you can, according to this article from a quick google search http://it.toolbox.com/blogs/paytonbyrd/tbody-to-the-rescue-4097

jordanstephens
+1  A: 

Yes. From the DTD

<!ELEMENT table
     (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>

So it expects one or more. It then goes on to say

Use multiple tbody sections when rules are needed between groups of table rows.

Martin Smith
A: 

Technically, the W3C's HTML spec allows multiple TBODY elements in a table, but I don't see a case when this would be necessary.

See http://www.w3.org/TR/html401/struct/tables.html#h-11.2.1

Jen
+4  A: 

Yes you can use them, for example I use them to more easily style groups of data, like this:

<table>
    <thead>
        <tr><th>Customer</th><th>Order</th><th>Month</th></tr>
    </thead>
    <tbody>
        <tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
    </tbody>
</table>

Then you can style them easily, like this:

tbody:nth-child(odd) { background: #f5f5f5; }
tbody:nth-child(even) { background: #e5e5e5; }

You can view an example here, it'll only work in newer browsers...but that's what I'm supporting in my current application, you can use the grouping for JavaScript etc. The main thing is it's a convenient way to visually group the rows to make the data much more readable. There are other uses of course, but as far as applicable examples, this one is the most common one for me.

Nick Craver
ok thanks for great answer. Does is matter to screen reader , one `tbody` or multiple?
metal-gear-solid
@metal-gear-solid - In my experience they handle them fine, e.g.: as if they were one `<tbody>`. When you start to *nest* tables, that's what usually gives real navigation problems for a screen reader.
Nick Craver
@Nick Craver - So use of `<tbody>` is just for visual. there is no semantic difference between one `<tbody>` and multiple `<tbody>`
metal-gear-solid
@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; }`
DisgruntledGoat