How to Have Multiple ≪Tbody≫ in Same ≪Table≫

Can we have multiple tbody in same table?

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

thead th { width: 100px; border-bottom: solid 1px #ddd; font-weight: bold; }tbody:nth-child(odd) { background: #f5f5f5;  border: solid 1px #ddd; }tbody:nth-child(even) { background: #e5e5e5;  border: solid 1px #ddd; }
<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>

Wrapper for multiple tbody?

As mentioned in the comments by FelipeAls and others that a <tbody> tag can be wrapped only by a <table> tag, I tried wrapping <thead> and <tbody>s in separate tables to create the desired effect in the following way:

<table>
<thead>
...
</thead>
</table>

<table>
<tbody>
...
</tbody>
<tbody>
...
</tbody>
<tbody>
...
</tbody>
</table>

This solved the issue.

Here's a Working Demo.

Accessibility with multiple tbody tags in a table

Through the comments, I found this issue is related to Chrome w/ NVDA. Firefox w/ NVDA works as expected.

To work cross browser w/ NVDA, I built multiple tables, one for each th, and removed the headers and id attributes because it makes more semantic sense to do so. Here's an example of it working cross browser (Chrome, Firefox) with NVDA

<table>
<caption class="offScreen">Balance Sheet Table</caption>
<tbody>
<tr class="hierarchy0 bold">
<th class="left" scope="col">Assets (Millions)</th>
<th class="right greyBL" scope="col">9/30/2012</th>
<th class="right greyBL" scope="col">9/30/2013</th>
<th class="right greyBL" scope="col">9/30/2014</th>
<th class="right greyBL" scope="col">9/30/2015</th>
</tr>
<tr class="hierarchy5">
<td class="left">Cash</td>
<td class="right">--</td>
<td class="right">--</td>
<td class="right">10,232.00</td>
<td class="right">--</td>
</tr>
<tr class="hierarchy4">
<td class="left">Cash Equivalents</td>
<td class="right">10,746.00</td>
<td class="right">14,259.00</td>
<td class="right">13,844.00</td>
<td class="right">21,120.00</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr class="hierarchy0 bold">
<th class="left" scope="col">Liability And Shareholder Equity (Millions)</th>
<th class="right greyBL" scope="col">9/30/2012</th>
<th class="right greyBL" scope="col">9/30/2013</th>
<th class="right greyBL" scope="col">9/30/2014</th>
<th class="right greyBL" scope="col">9/30/2015</th>
</tr>
<tr class="hierarchy5">
<td class="left">Accounts Payable</td>
<td class="right">21,175.00</td>
<td class="right">22,367.00</td>
<td class="right">30,196.00</td>
<td class="right">35,490.00</td>
</tr>
<tr class="hierarchy4">
<td class="left">Income Tax Payable</td>
<td class="right">--</td>
<td class="right">--</td>
<td class="right">--</td>
<td class="right">--</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr class="hierarchy0 bold">
<th class="left" scope="col">Supplemental (Millions)</th>
<th class="right greyBL" scope="col">9/30/2012</th>
<th class="right greyBL" scope="col">9/30/2013</th>
<th class="right greyBL" scope="col">9/30/2014</th>
<th class="right greyBL" scope="col">9/30/2015</th>
</tr>
<tr class="hierarchy1">
<td class="right">Total Capitalization</td>
<td class="right">111,210.00</td>
<td class="right">140,509.00</td>
<td class="right">140,534.00</td>
<td class="right">172,818.00</td>
</tr>
<tr class="hierarchy1">
<td class="left">Capital Lease Obligations</td>
<td class="right">--</td>
<td class="right">--</td>
<td class="right">--</td>
<td class="right">--</td>
</tr>
<tr class="hierarchy1">
<td class="left">Preferred Stock Equity</td>
<td class="right">--</td>
<td class="right">--</td>
<td class="right">--</td>
<td class="right">--</td>
</tr>
</tbody>

Using readHTMLTable with multiple tbody

If you look at the source for readHTMLTable getMethod(readHTMLTable, "XMLInternalElementNode") it contains the line

    if (length(tbody)) 
node = tbody[[1]]

so it is purposefully designed to select only the content of the first tbody. Also ?readHTMLTable describes the function as providing

somewhat robust methods for extracting data from HTML tables in an HTML document

It is designed to be a utility function. Its great when it works but you may need to hack around it.



Related Topics



Leave a reply



Submit