Grouping Rows in Tables

Tweet

When tables in HTML gives features like merging cells, it also helps you to group rows and split a table into three divisions. These section makes Tables to organize into header, footer and body(thead, tfoot and thead). This will be much helpful when CSS is used on it.

Organizing Table

As the table is divided into three sections, the order in which they must be arranged is thead > tfoot > tbody.

<table>
        <thead>
            <tr>
                <td>Name</td>
                <td>Reg. No.</td>
                <td>Maths</td>
                <td>Physics</td>
                <td>Chemistry</td>
                <td>Student's Total</td>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>Total</td>
                <td>-</td>
                <td>223</td>
                <td>266</td>
                <td>251</td>
                <td>740</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Ram</td>
                <td>10000</td>
                <td>78</td>
                <td>97</td>
                <td>86</td>
                <td>261</td>
            </tr>
            <tr>
                <td>Raja</td>
                <td>10001</td>
                <td>67</td>
                <td>85</td>
                <td>76</td>
                <td>228</td>
            </tr>
            <tr>
                <td>Sam</td>
                <td>10002</td>
                <td>78</td>
                <td>84</td>
                <td>89</td>
                <td>251</td>
            </tr>
        </tbody>
    </table>

As you can see the tbody element is placed in between the header and footer. You must only make sure that the order is arranged as preferred.

Organizing effectively using CSS

With CSS, you can bring much more life in grouping rows much more easily than classes and ID's.

body {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1em;
}

table thead {
    background-color: #069;
    text-align: center;
    color: #fff;
}

table tfoot {
    background-color: orange;
    text-align: center;
    color: #fff;
}

table tbody {
    background-color: yellow;
    text-align: center;
}