Adding table headers (th)

Hello, students! In this lesson, we will learn how to add table headers (th) in HTML.

Table headers are used to identify the columns of a table.

They are identified by the <th> tag.

Topics

• What are table headers (th)?
• How to add table headers (th)?
• Code examples

What are table headers (th)?

Table headers are HTML elements used to identify the columns of a table.

They are identified by the <th> tag.

Table headers are displayed in bold and in a style different from the normal text of the table.

How to add table headers (th)?

To add table headers, use the <th> tag inside the <tr> tag.

The <tr> tag represents a row of the table.

For example, the following code will create a table with one row containing two headers:

<table style="border: 1px solid black;" cellspacing="10">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
</table>

This code will create a table with one row and two columns.

The first column will be a table header with the text “Name.”

The second column will be a table header with the text “Age.”

You can also use other attributes to control the behavior of the table headers.

For example, the style attribute can be used to specify the style of the table headers.

Here is an example of how to use this attribute:

<table style="border: 1px solid black;" cellspacing="10">
  <tr>
    <th style="text-align: center;">Name</th>
    <th style="text-align: right;">Age</th>
  </tr>
</table>

This code will create a table with one row and two columns.

The table header of the first column will be centered, and the table header of the second column will be right-aligned.

Code examples

Here are some code examples to add table headers:

<table style="border: 1px solid black;" cellspacing="10">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Maria</td>
    <td>30</td>
  </tr>
</table>

This code will create a table with three rows and two columns.

The first two rows of the table will have table headers.

The third row of the table will have normal text.

Exercises

• Create an HTML document with a table with three rows and three columns.
• Add table headers to the first two columns.
• Save the document and open it in a browser.

Observe how the browser displays the table.

Good luck!

Conclusion

Table headers are an important tool for organizing information in tables.

Understanding how to add table headers is essential for creating effective tables.

Ready to learn more?

In the next topic, we will learn about organizing data in table cells (td).