HTML Table Headers: A Comprehensive Guide

0
13KB

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
Rechercher
Catégories
Lire la suite
Technology
Media and Software Piracy
Media and software piracy refer to the unauthorized copying, distribution, and use of digital...
Par ALAGAI AUGUSTEN 2024-07-13 07:52:56 0 11KB
Business
Small Businesses: The Backbone of the Economy and Pillars of Community Growth
In the intricate fabric of our global economy, small businesses are the threads that hold it...
Par ALAGAI AUGUSTEN 2024-08-03 15:15:09 0 11KB
Technology
Management Information Systems (MIS)
Management Information Systems (MIS) are integrated systems designed to support management and...
Par Business Information Systems (BIS) Course 2024-08-01 16:58:59 0 11KB
Technology
HOW TO OVERCOME COMPUTER NETWORK CHALLENGES
Overcoming the challenges faced in managing and using computer networks requires a combination of...
Par ALAGAI AUGUSTEN 2024-07-17 17:38:08 0 10KB
Technology
Web Design Tools and Technologies
Web Design Tools and Technologies Web design has evolved dramatically over the past few decades,...
Par ALAGAI AUGUSTEN 2024-07-26 17:47:49 0 25KB
Talksphare https://talksphare.com