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;
}

    