An HTML table is structured using specific elements that define its content and organization. These elements dictate how data is presented and grouped within a table. Below is an overview of the standard table layout:
1. Table Elements and Hierarchy
A typical HTML table consists of the following elements:
| Element | Description |
|---|---|
<table> |
The root container for the table. |
<caption> |
An optional title or description of the table. |
<colgroup> |
A container for defining the structure of table columns. |
<col> |
Defines column properties such as width or styling. |
<thead> |
The table's header section, usually containing <tr> with <th> elements. |
<tbody> |
The main body section, containing multiple <tr> rows with <td> cells. |
<tfoot> |
An optional footer section, typically used for summary rows. |
<tr> |
Represents a table row. |
<th> |
A header cell, used inside <thead> or <tr>. |
<td> |
A standard data cell, used inside <tr>. |
Learn more about html table from Mozilla Table Element
2. Parent-Child Relationships
Each table element has specific rules for the type and number of child elements it can contain:
<table>
Can contain:
<caption>— 1 per table<colgroup>— 1 per table<thead>— 1 per table<tbody>— 1 or more per table<tfoot>— 1 per table
<thead>, <tbody>, <tfoot>
Can contain:
<tr>— multiple.
<tr>
Can contain:
<th>— multiple (header cells)<td>— multiple (data cells).
3. Example Table Structure
Here’s an example of a simple table structure in HTML:
<table>
<caption>Student Grades</caption>
<colgroup>
<col style="background-color: #f0f0f0;">
<col>
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>A</td>
</tr>
<tr>
<td>Bob</td>
<td>B+</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">End of Records</td>
</tr>
</tfoot>
</table>This example demonstrates:
- A caption for the table.
- A colgroup to define column styles.
- A thead section for headers.
- A tbody section for data.
- A tfoot section for summary information.
