HTML Table Headers: A Comprehensive Guide

0
10K

HTML table headers are used to define the columns or rows of a table. They are typically styled differently from data cells to visually distinguish them.

Basic Usage

HTML
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
</table>

In the example above, <th> tags are used to create the table headers.

Styling Headers

You can style table headers using CSS properties like:

  • font-weight: Sets the font weight (e.g., bold).
  • text-align: Sets the text alignment (e.g., center).
  • background-color: Sets the background color.
  • color: Sets the text color.

Example with Styling

HTML
<table>
  <tr>
    <th style="font-weight: bold; text-align: center; background-color: #f2f2f2;">Header 1</th>
    <th style="font-weight: bold; text-align: center; background-color: #f2f2f2;">Header 2</th>
    <th style="font-weight: bold; text-align: center; background-color: #f2f2f2;">Header 3</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
</table>

Header Scope

The scope attribute of the <th> element can be used to specify the scope of a header. This information is helpful for screen readers and assistive technologies.

  • col: Indicates that the header is related to a column.
  • row: Indicates that the header is related to a row.

Example with Scope

HTML
<table>
  <thead>
    <tr>
      <th scope="col">Header 1</th>
      <th scope="col">Header 2</th>
      <th scope="col">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>   
    </tr>
  </tbody>
</table>

The <thead>, <tbody>, and <tfoot> Elements

  • <thead>: Contains the table header rows.
  • <tbody>: Contains the table body rows.
  • <tfoot>: Contains the table footer rows.

By using these elements and styling techniques, you can create visually appealing and informative table headers that enhance the readability and usability of your HTML tables.

Like
1
Search
Categories
Read More
Education
Lunch Atop A Skyscraper
By Modern American History 2024-08-02 16:39:22 0 10K
Computer Programming
Programming basics
Computer programs are used by people every day. Everytime you use your smartphone, tablets, and...
Education
Overview of Business Information Systems (BIS)
Business Information Systems (BIS) are integrated sets of components and resources used to...
By Business Information Systems (BIS) Course 2024-07-30 18:27:26 0 10K
Technology
Understanding the ROUND Function
The ROUND function in Excel is used to round a number to a specified number of decimal places....
By Microsoft Excel 2024-09-03 03:30:30 0 10K
Tebtalks https://tebtalks.com