HTML - Headers & Caption

Defining Table Headers

In HTML tables, headers label columns or rows of data. To define a table header, use the <th> tag. The <th> tag is placed within the <tr> (table row) tag, like regular table cells (<td>). The main difference between <th> and <td> tags is that <th> is used for header cells, which usually have a bold font weight and centered text alignment by default.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

The first row contains three <th> tags, defining the headers for each column. The second row contains regular <td> tags with the actual data.

Table Header Attributes

Table headers have a few special attributes that can be used to improve the structure and accessibility of the table:

1. colspan: The colspan attribute allows a header cell to span multiple columns. For example, <th colspan="2">Header</th> would create a header cell that spans two columns.

2. rowspan: The rowspan attribute allows a header cell to span multiple rows. For example, <th rowspan="3">Header</th> would create a header cell that spans three rows.

3. scope: The scope attribute is used to associate a header cell with the data cells it describes. This is important for accessibility, as it helps screen readers understand the relationship between headers and data. The scope attribute can have the following values:

   • row: The header applies to the row.
   • col: The header applies to the column.
   • rowgroup: The header applies to a group of rows.
   • colgroup: The header applies to a group of columns.

<table>
  <tr>
    <th colspan="2">Header 1 & 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <th rowspan="2" scope="row">Header 4</th>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
</table>

The first header cell spans two columns using colspan, the fourth header cell spans two rows using rowspan, and the scope attribute is used to indicate that the fourth header applies to the row.

Using table headers with appropriate attributes helps create well-structured and accessible tables in HTML.

Adding a Caption to a Table

A table caption is a short description of the table's content or purpose. To add a caption to an HTML table, use the <caption> tag. The <caption> tag should be placed right after the opening <table> tag, before any <tr>, <th>, or <td> elements.

<table>
  <caption>Employee Salary Data</caption>
  <tr>
    <th>Name</th>
    <th>Position</th>
    <th>Salary</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>Manager</td>
    <td>$80,000</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>Developer</td>
    <td>$75,000</td>
  </tr>
</table>

Styling Table Captions

By default, table captions are shown above the table and centered. However, you can use CSS to style and position the caption as needed.

To style a table caption, target the <caption> element in your CSS:

table caption {
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

To position the caption below the table instead of above it, use the caption-side CSS property:

table caption {
  caption-side: bottom;
}

The caption-side property accepts two values: top (default) and bottom.

By using the <caption> tag and styling it with CSS, you can provide a clear and appealing description for your HTML tables.