CSS HTML

[Solved -5 Answers] CSS – HTML Can we have multiple <tbody> in same <table>

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

  • Yes you can use them, for example I use them to more easily style groups of data, like this:
html code
<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:
css code
tbody:nth-child(odd) 
{
 background: #f5f5f5; 
}
tbody:nth-child(even) 
{
 background: #e5e5e5; 
}

  • Yes. From the DTD
html code
<!ELEMENT table
     (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>
  • Use multiple tbody sections when rules are needed between groups of table rows.

  • We use them for dynamically hiding/revealing the relevant part of a table.
html code
<table>
  <tbody id="day1" style="display:none">
    <tr><td>session1</td><tr>
    <tr><td>session2</td><tr>
  </tbody>
  <tbody id="day2">
    <tr><td>session3</td><tr>
    <tr><td>session4</td><tr>
  </tbody>
  <tbody id="day3" style="display:none">
    <tr><td>session5</td><tr>
    <tr><td>session6</td><tr>
  </tbody>
</table>
  • A button can be provided to toggle between everything or just the current day by manipulating tbodies without processing many rows individually.

  • The <caption> tag defines a table caption.
  • The <caption> tag must be the first child of the <table> tag.
  • You can specify only one caption per table.
  • Also, note that the scope attribute should be placed on a <th> element and not on a <tr> element.
  • The proper way to write a multi-header multi-tbody table would be something like this :
html code
<table id="dinner_table">
    <caption>This is the only correct place to put a caption.</caption>
    <tbody><tr class="header">
            <th colspan="2" scope="col">First Half of Table (British Dinner)</th> </tr>
        <tr><th scope="row">1</th>
            <td>Fish</td> </tr>
        <tr> <th scope="row">2</th>
            <td>Chips</td> </tr>
        <tr><th scope="row">3</th>
            <td>Peas</td></tr>
        <tr><th scope="row">4</th>
            <td>Gravy</td> </tr></tbody>
    <tbody><tr class="header">
            <th colspan="2" scope="col">Second Half of Table (Italian Dinner)</th> </tr>
        <tr><th scope="row">5</th>
            <td>Pizza</td></tr>
        <tr><th scope="row">6</th>
            <td>Salad</td> </tr>
        <tr><th scope="row">7</th>
            <td>Oil</td>

  • The caption tag belongs to table and thus should only exist once. Do not associate a caption with each tbody element.
html code
<table>
    <caption>First Half of Table (British Dinner)</caption>
    <tbody>
        <tr><th>1</th><td>Fish</td></tr>
        <tr><th>2</th><td>Chips</td></tr>
        <tr><th>3</th><td>Pease</td></tr>
        <tr><th>4</th><td>Gravy</td></tr>
    </tbody>
    <caption>Second Half of Table (Italian Dinner)</caption>
    <tbody>
        <tr><th>5</th><td>Pizza</td></tr>
        <tr><th>6</th><td>Salad</td></tr>
        <tr><th>7</th><td>Oil</td></tr>
        <tr><th>8</th><td>Bread</td></tr>
    </tbody>
</table>
See also  [Solved - 10 Answers] CSS - HTML - Convert an image to grayscale in HTML/CSS

About the author

Wikitechy Editor

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

Add Comment

Click here to post a comment