HTMl Tables

HTML tables allow web developers to arrange data into rows and columns.

Table content Grouping

As we go further in HTML tables, table content can be grouped together according to their specific area. The HTML <thead> defines a set of rows defining the head of the columns of the table.
The HTML <tbody> encapsulates a set of table rows ( elements), indicating that they comprise the body of the table.
The HTML <tfoot> element defines a set of rows summarizing the columns of the table.

         <table>
            <thead>
                <tr>
                    <th>Items</th>
                    <th>Expenditure</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Donuts</th>
                    <td>3,000</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>Totals</th>
                    <td>21,000</td>
                </tr>
            </tfoot>
        </table>

Items Expenditure
Donuts 3,000
Stationery 18,000
Totals 21,000


Grouping - <colgroup> and <col>

The HTML <colgroup> defines a group of columns within a table.
The HTML <col> element defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a <colgroup> element

         <table>
            <thead>
                <tr>
                    <th>Items</th>
                    <th>Expenditure</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Donuts</th>
                    <td>3,000</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>Totals</th>
                    <td>21,000</td>
                </tr>
            </tfoot>
        </table>

Items Expenditure
Donuts 3,000
Stationery 18,000
Totals 21,000