Prev Next

Table Headers

Table headers, defined by <th>, help identify the meaning of columns or rows. They give context to the data cells, improving accessibility and clarity. Screen readers often read headers to users before the associated data, making them essential for accessibility.

Key Topics

Basic Table Headers

Example: Using <th> in the first row to label columns.

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
    </tr>
</table>

Table with Headers Example

This example includes a set of headers and some data rows. A code box is provided for a complete HTML example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table with Headers</title>
    <style>
        table, th, td {
            border:1px solid #000;
            border-collapse: collapse;
            padding:5px;
        }
        th {
            background:#f0f0f0;
        }
    </style>
</head>
<body>
    <h1>Employee Data</h1>
    <table>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>John</td>
            <td>Manager</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Emily</td>
            <td>Developer</td>
            <td>28</td>
        </tr>
    </table>
</body>
</html>

Explanation: The headers provide meaningful labels for each column, making it easier for users to interpret the data, and improving accessibility for screen readers.

Key Takeaways

  • Use <th> to define header cells in the top row or left column.
  • Headers add context, improving accessibility and understanding of the data.
  • Screen readers rely on headers to convey relationships between cells.
  • Apply styling to headers (like background color) to distinguish them visually.
  • Meaningful headers make tables more usable and informative.
Prev Next