Mastering HTML Table Header Cells

Introduction

In HTML, the <th> tag is used to define one cell as a header of a group of cells. There are two types of HTML table cells: header cell and standard cell. The header cell is used as a header for the group of cells and the standard cells contain data for a table.

This step-by-step lab will guide you through how to create a header cell in HTML table using the <th> tag with brief explanations and code snippets.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Creating a Basic HTML Table

Firstly, we need to create a table using HTML.

To create a table, you should use the <table> tag, with each row represented by the <tr> tag and each cell represented by the <td> tag.

For example, the following code will create a simple HTML table with two rows and two columns:

<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

Creating a Header Cell

To create a header cell, we must replace the <td> tag with the <th> tag in the table row where we want to add a header cell.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

Adding Attributes to Tag

The <th> tag supports various attributes to help format and structure the header cell.

Abbr: Used to define the short abbreviation for the content of the cell.
Colspan: Specifies the number of columns to span the cell.
Rowspan:Specifies the number of rows to span.
Scope: Specifies the cells that the header tag relates to.
Header: Used to specify one or more header cells related to a cell.

For example, the following code will create a header cell with the "abbr" and "colspan" attributes:

<table>
  <tr>
    <th abbr="Header 1" colspan="2">Header 1 &amp; Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

Summary

In this step-by-step lab, you have learned how to create a header cell in HTML table using the <th> tag. HTML table headers are significant for organizing data in a structured manner. Using the th tag, you can create a header cell and manage its formatting and attributes.