The structure of a table in HTML consists of several elements that work together to define the table’s layout and content. Here’s an overview of the table structure and its elements:
1. **Table Container (`<table>`):**
– The `<table>` tag is the container element that defines the entire table.
– All other table elements are nested within the `<table>` tag.
2. **Table Row (`<tr>`):**
– The `<tr>` tag defines a row within the table.
– Each `<tr>` element represents a horizontal row of cells in the table.
– Table cells (`<td>` or `<th>`) are placed inside `<tr>` elements to create the table’s rows.
3. **Table Header Cell (`<th>`):**
– The `<th>` tag defines a header cell within a table.
– Header cells are typically used to represent column or row headers.
– They are often displayed with bold text and centered alignment by default.
4. **Table Data Cell (`<td>`):**
– The `<td>` tag defines a data cell within a table.
– Data cells contain the actual content or data of the table.
– They are displayed with normal text and left-aligned by default.
5. **Table Header (`<thead>`), Body (`<tbody>`), and Footer (`<tfoot>`):**
– These tags are used to group different parts of the table: header, body, and footer.
– The `<thead>` element contains header rows (`<tr>`) of the table.
– The `<tbody>` element contains the main content rows (`<tr>`) of the table.
– The `<tfoot>` element contains footer rows (`<tr>`) of the table.
– Although not strictly required, using these tags enhances the structure and semantics of the table.
6. **Table Caption (`<caption>`):**
– The `<caption>` tag defines a caption or title for the table.
– It is placed immediately after the opening `<table>` tag.
– The caption provides a brief description or summary of the table’s contents.
Here’s an example illustrating the structure of a simple table with headers, body, and a caption:
“`html
<table>
<caption>Monthly Sales Report</caption>
<thead>
<tr>
<th>Month</th>
<th>Product A Sales</th>
<th>Product B Sales</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>100</td>
<td>150</td>
</tr>
<tr>
<td>February</td>
<td>120</td>
<td>130</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>220</td>
<td>280</td>
</tr>
</tfoot>
</table>
“`
Understanding the structure and elements of HTML tables allows you to create well-organized and semantically meaningful tables for displaying various types of data on your web pages.