When creating tables in HTML, adding table headings helps give tables more structure. The HTML <th> tag marks columns and rows both semantically and visually, providing users, search engines and screen readers with valuable information.

What is the HTML <th> tag?

The HTML <th> tag (table header) is used to define header cells in HTML tables. These cells act as headings for the columns or rows they apply to and are typically centered and in bold. You can adjust the appearance of headings using CSS. HTML table headings should be placed between<tr> (table row) tags. While their position in a table isn’t fixed, they are usually used in the header row or the first column.

Web Hosting
Hosting that scales with your ambitions
  • Stay online with 99.99% uptime and robust security
  • Add performance with a click as traffic grows
  • Includes free domain, SSL, email, and 24/7 support

Why are HTML table headings important?

HTML table headings help organize data in a table and provide context for the data. Using them is a good idea for several reasons:

  • Data organization: Using the HTML <th> tag for headings helps make the data in your table clear and organized. It gives columns or rows a descriptive label, which explains to readers what kind of data to expect.
  • Improved readability: HTML <th> makes data easier to understand. The visual formatting for headings makes it easier to identify different categories of data, helping users to find information more quickly.
  • Accessibility: Table headers are especially important for accessibility. Screen readers use <th> elements to explain a table’s structure and the context for the data in the table. You can make data in a table even clearer by using additional attributes like scope or headers to indicate which data belongs to which heading.
Tip

Headings are just one way to structure your tables in HTML. In our article on HTML table styling, we go into more detail on how you can visually customize text and fields.

What is the syntax for the <th> tag? (Example table included)

To define a table heading using the HTML <th> tag, all you need is an opening <th> tag and a closing </th> tag. Inside these tags, you add the text for your heading. If you want, you can also include attributes in the opening tag to control how the <th> element should be displayed and should behave. The basic syntax (including placeholder attributes) looks like this:

<th attribute1="" attribute2="" …>Heading</th>
html

Here are some of the most important attributes for HTML table headings:

  • scope: Specifies whether the header cell refers to a column (col) or a row (row)
  • colspan: Defines the number of columns the header cell spans
  • rowspan: Defines the number of rows the header cell spans
  • class: Specifies CSS class names to define the style
  • style: Allows for inline CSS to customize the header cell

To get a better idea of the syntax, let’s take a look at a simple example. In the table below, we have the categories and pricesfor three different products: apples, bread and juice. We’re going to create headings in both the header row and first column. The scope attribute defines whether a header cell refers to a row or a column:

<html>
<table>
    <tr>
        <th scope="col">Product</th>
        <th scope="col">Category</th>
        <th scope="col">Price</th>
    </tr>
    <tr>
        <th scope="row">Apple</th>
        <td>Fruit</td>
        <td>$1.50</td>
    </tr>
    <tr>
        <th scope="row">Bread</th>
        <td>Bakery</td>
        <td>$2.00</td>
    </tr>
    <tr>
        <th scope="row">Juice</th>
        <td>Drinks</td>
        <td>$1.00</td>
    </tr>
</table>
</body>
</html>
html

This is what the table looks like when rendered:

Image: HTML table heading example
Simple example of an HTML table with headings (without any CSS styling)

How to insert a main heading for a table with the <caption> tag

You can also add a heading for the entire table by inserting a <caption> element right after the <table> tag. You can use CSS to style and position the heading.

Let’s add a <caption> heading “Products and Prices Table” to our previous example. Here’s the code:

<html>
<table>
<caption>Products and Prices Table</caption>
    <tr>
        <th scope="col">Product</th>
        <th scope="col">Category</th>
        <th scope="col">Price</th>
    </tr>
    <tr>
        <th scope="row">Apple</th>
        <td>Fruit</td>
        <td>$1.50</td>
    </tr>
    <tr>
        <th scope="row">Bread</th>
        <td>Bakery</td>
        <td>$2.00</td>
    </tr>
    <tr>
        <th scope="row">Juice</th>
        <td>Drinks</td>
        <td>$1.00</td>
    </tr>
</table>
</body>
</html>
html

Now, you’ll see the new heading for the table:

Image: HTML table heading: Example with caption tag
Heading for the entire table (without CSS styling) using the caption element
Tip

For more information on the popular markup language, check out our comprehensive HTML beginner’s tutorial.

Was this article helpful?
Go to Main Menu