Can we have multiple <tbody> in same <table>?

Question

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

Answer 1

You can use multiple <tbody> tags in the same table, 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>

This will only work in newer browsers, you can use the grouping for JavaScript, etc. It's a convenient way to visually group the rows to make the data much more readable.