HTML Table Headers & Captions

The meaningfulness and accessibility of HTML tables increases when headers (<th>) and captions (<caption>) are properly implemented. Headers and captions allow users and screen readers to comprehend both the structure and content of tables.

Table Headers – <th>

• <th> stands for Table Header
• It defines a heading cell in a row or column
• Text inside <th> is bold and centered by default

Syntax

<tr>
  <th>Product</th>
  <th>Price</th>
  <th>Stock</th>
</tr> 

Table Caption – <caption>

• The <caption> tag adds a title or description for the entire table.
• It is placed directly after <table> and before the first <tr>.

Syntax

<table border="1">
  <caption>Monthly Sales Report</caption>
  <tr>
    <th>Month</th> 
  </tr>
  <tr>
    <td>January</td> 
  </tr>
</table> 

Example

<table border="1">
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <th>Apples</th>
    <td>$1.00</td>
  </tr>
  <tr>
    <th>Bananas</th>
    <td>$0.50</td>
  </tr>
</table>