HTML th Tag

HTML <th> Tag: Table Header Cell

The <th> tag in HTML is used to define a table header cell. It is typically used inside a <tr> (table row) to label or provide a heading for columns or rows in a table. By default, text inside <th> is bold and centered.

1. Basic Syntax

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
    <td>USA</td>
  </tr>
</table>

✅ Displays headers "Name", "Age", and "Country" above the data.

2. How <th> Works

• Bold & Centered by Default: Text in <th> cells is bold and centered.

• Semantic Meaning: <th> Cells represent headers and provide context for the corresponding data in rows or columns.

• Accessible: Helps screen readers understand the structure of the table.

3. Merging Cells Using colspan and rowspan

You can merge header cells across multiple columns or rows using colspan and rowspan.

Column Span (colspan)

<table border="1">
  <tr>
    <th colspan="2">Personal Info</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
    <td>USA</td>
  </tr>
</table>

✅ Merges two columns under "Personal Info".

Row Span (rowspan)

<table border="1">
  <tr>
    <th rowspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>25</td>
  </tr>
</table>

✅ Merges rows for "Name".

4. Styling <th> with CSS

You can customize the appearance of <th> elements using CSS:

<style>
  th {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
  }
</style>

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
  </tr>
</table>

✅ Makes header cells green with white text and adds padding.

5. Conclusion

• The <th> tag defines table header cells and provides semantic meaning.

• Bold & centered by default, which helps with readability.

• You can use colspan and rowspan to merge cells.

• Style <th> with CSS for a better visual presentation.