HTML Table Headers: A Comprehensive Guide

0
11KB

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
S.4 SOLUTIONS TO THE PHYSICS SEMINAR QUESTIONS
S.4 SOLUTIONS TO THE PHYSICS SEMINAR QUESTIONS
Por Landus Mumbere Expedito 2024-07-26 17:07:09 0 10KB
Chemistry
UCE CHEMISTRY PAPER 1 KAMTEC MOCK 2024
UCE CHEMISTRY PAPER 1KAMTEC MOCK 2024
Por Landus Mumbere Expedito 2024-08-11 11:39:15 3 10KB
Physics
MATIGO PHYSICS PAPER 1 2024
MATIGO UACE PHYSICS PAPER 1 2024
Por Question Bank 2024-09-05 17:26:27 0 13KB
Business
How to Start Selling on Amazon FBA: A Step-by-Step Guide
Are you looking to tap into the booming world of e-commerce? Selling on Amazon using Fulfillment...
Por Mpatswe Francis 2024-09-18 20:21:05 0 9KB
Tebtalks https://tebtalks.com