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
Computer Programming
HTML forms
Here's a simple HTML form structure that includes a text input field, a submit button, and a...
Por HTML PROGRAMMING LANGUAGE 2024-10-01 09:29:09 0 11KB
Computer Programming
HTML Table Borders: A Closer Look
HTML table borders are used to outline the individual cells and rows within a table, making it...
Por HTML PROGRAMMING LANGUAGE 2024-09-06 01:25:50 0 11KB
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 10KB
Computer Programming
Dictionaries
Dictionaries are another fundamental data structure in Python used for storing collections of...
Technology
Web Development Best Practices
Web Development Best Practices: A Comprehensive Guide Web development is an ever-evolving field,...
Por ALAGAI AUGUSTEN 2024-07-26 17:54:12 0 13KB
Tebtalks https://tebtalks.com