HTML Table Headers: A Comprehensive Guide

0
12K

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
Pesquisar
Categorias
Leia Mais
Educação
Business Information Systems Course Outline
Introduction to Business Information Systems Overview of BIS Importance of BIS in modern...
Por Business Information Systems (BIS) Course 2024-07-30 18:16:52 0 14K
Technology
Understanding Trojan Horses
A Trojan Horse, or simply a Trojan, is a type of malicious software that disguises itself as a...
Por ALAGAI AUGUSTEN 2024-07-13 17:36:01 0 11K
Educação
Find scholarships and study in the United States
There are countless scholarships available in the United States, offered by various institutions,...
Por Mpatswe Francis 2024-08-31 18:45:10 5 12K
Technology
SUMIFS Function
The SUMIFS function in Excel is used to sum a range of values based on multiple criteria. It's...
Por Microsoft Excel Tips 2024-10-16 01:05:32 0 17K
Educação
ECONOMICS SOLUTIONS TO THE SEMINAR AT MAKERERE HIGH SCHOOL MIGADDE
ECONOMICS SEMINAR AT MAKERERE COLLEGE MIGADDE
Por Landus Mumbere Expedito 2024-07-26 07:46:42 0 9K
Talksphare https://talksphare.com