TutorialsArena

HTML `` Element: Creating Table Headers for Improved Readability

Learn how to use the HTML `` (table header) element to structure and style table headers effectively. This tutorial explains its purpose, key attributes (`scope`, `abbr`, etc.), and demonstrates styling table headers using CSS for enhanced readability and a more professional presentation of your tabular data.

Understanding the HTML <th> Element

What is the <th> Element?

The HTML <th> tag (table header cell) defines a header cell in an HTML table. Header cells usually contain the column headings or other descriptive information that organizes the table's data. They're visually distinct from data cells (<td>), typically appearing in bold and centered text by default.

Example:

HTML

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<th> Attributes

The <th> element has several useful attributes:

Attribute Value Description
abbr text Provides an abbreviated version of the header cell's content.
colspan number Specifies the number of columns the header cell should span.
headers header_id Links the cell to other header cells (using their IDs).
rowspan number Specifies the number of rows the header cell should span.
scope col, colgroup, row, rowgroup Defines the scope of the header cell (column, row, or group).

In addition, <th> supports standard global and event attributes.

Styling <th> with CSS

You can use CSS to customize the appearance of your table headers. This includes controlling text alignment, background colors, fonts, padding, and more, allowing for a visually appealing and organized table.

Example:

CSS

th {
  background-color: lightgray;
  text-align: left; /* Left-align the text */
  padding: 8px;
}