HTML Table Headers: A Comprehensive Guide

0
8K

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
Computer Programming
Types Summary and Type Conversion
Types summary The following is a summary of the different Python types: string -...
Physics
S.4 PHYSICS RESOURCEFUL QUESTIONS
S.4 PHYSICS RESOURCEFUL QUESTIONS
By Question Bank 2024-08-30 19:56:05 0 10K
Education
10 Online Universities Offering Scholarships to International Students
1. University of the People: Offer: Tuition-free online degrees in various fields, including...
By Mpatswe Francis 2024-08-31 18:54:54 1 7K
Chemistry
UTEB MOCK CHEMISTRY PAPER 1 2024
UTEB MOCK CHEMISTRY PAPER 1 2024
By Landus Mumbere Expedito 2024-08-03 15:32:50 0 7K
Tebtalks https://tebtalks.com