HTML Tables

Learn to organize and display data clearly using semantic table elements and accessibility attributes.

`Table Foundation`

The basic structure of an HTML table consists of a container and nested row and cell elements.

<table> : The main container element that defines the start and end of the table.
<caption> : Acts as a title for the table, helping users understand the data's context immediately.
<tr> : Represents a Table Row, which acts as a container for header or data cells.
<th> : Defines a Table Header cell, which is typically bold and centered by default.
<td> : Defines a standard Table Data cell that holds the actual information content.

Semantic Table Example

A full table structure using caption, head, body, and footer tags.

<table>
  <caption>2025 Revenue Report</caption>
  <thead>
    <tr>
      <th scope="col">Quarter</th>
      <th scope="col">Earnings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>$25,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$25,000</td>
    </tr>
  </tfoot>
</table>

`Semantic Grouping`

Using semantic tags allows developers to group related rows, providing better structure for CSS styling and accessibility.

<thead> : Groups the header content, usually containing the primary category labels.
<tbody> : Groups the main body of data, separating the core content from headers and footers.
<tfoot> : Groups footer content, often used for totals, summaries, or concluding data.

`Table Accessibility`

Ensuring your tables are accessible is vital for users who rely on screen readers to navigate data grids.

Table accessibility : The practice of using correct tags so assistive technology can interpret data relationships.
scope attribute : A property used on <th> to explicitly state if the header relates to a 'col' (column) or 'row' (row).

`Merging Cells`

Attributes used on <td> or <th> to allow a single cell to occupy multiple column or row spaces.

colspan : An attribute that defines the number of columns a cell should span horizontally.
rowspan : An attribute that defines the number of rows a cell should span vertically.

Spanning Columns and Rows

Demonstrating how to use colspan and rowspan for complex layouts.

<table>
  <tr>
    <th colspan="2">Merged Header</th>
  </tr>
  <tr>
    <td rowspan="2">Merged Row</td>
    <td>Data A</td>
  </tr>
  <tr>
    <td>Data B</td>
  </tr>
</table>

Knowledge Check

1. Which element provides a title or summary for the table?

2. What is the purpose of the 'scope' attribute in a <th> tag?

3. Which attribute allows a single cell to span across three columns?

4. Which tag is used specifically for the body content of a table?

Previous Next