HTML Table Headers

[Guest]

HTML Table Headers


HTML tables can have headers for each column or row, or for many columns/rows.




EMIL
TOBIAS
LINUS


 
 
 


 
 
 


 
 
 


 
 
 


 
 
 




8:00
 
 


9:00
 
 


10:00
 
 


11:00
 
 


12:00
 
 


13:00
 
 





MON
TUE
WED
THU
FRI


8:00
 
 
 
 
 


9:00
 
 
 
 
 


10:00
 
 
 
 
 


11:00
 
 
 
 
 


12:00
 
 
 
 
 




DECEMBER


 
 
 


 
 
 


 
 
 


 
 
 


 
 
 




HTML Table Headers
Table headers are defined with th elements.
Each th element represents a table cell.

Example

<table>  <tr>    <th>Firstname</th>   
<th>Lastname</th>    <th>Age</th>  </tr> 
<tr>    <td>Jill</td>    <td>Smith</td>   
<td>50</td>  </tr>  <tr>    <td>Eve</td>   
<td>Jackson</td>    <td>94</td>  </tr></table>
Try it Yourself »


Vertical Table Headers
To use the first column as table headers, define the first cell in each row as a
<th> element:

Example

<table>  <tr>    <th>Firstname</th>   
<td>Jill</td>    <td>Eve</td>  </tr> 
<tr>   
<th>Lastname</th>    <td>Smith</td>   
<td>Jackson</td>  </tr>  <tr>    <th>Age</th>    <td>94</td>   
<td>50</td>  </tr></table>
Try it Yourself »








Align Table Headers
By default, table headers are bold and centered:


Firstname
Lastname
Age


Jill
Smith
50


Eve
Jackson
94


To left-align the table headers, use the CSS text-align property:

Example

th {  text-align: left;
}

Try it Yourself »


Header for Multiple Columns
You can have a header that spans over two or more columns.


Name
Age


Jill
Smith
50


Eve
Jackson
94


To do this, use the colspan attribute on the
<th> element:

Example

<table>  <tr>    <th colspan="2">Name</th>    <th>Age</th>  </tr> 
<tr>    <td>Jill</td>    <td>Smith</td>   
<td>50</td>  </tr>  <tr>    <td>Eve</td>   
<td>Jackson</td>    <td>94</td>  </tr></table>
Try it Yourself »


You will learn more about colspan and rowspan in the Table colspan & rowspan chapter.


Table Caption
You can add a caption that serves as a heading for the entire table.

Monthly savings

Month
Savings


January
$100


February
$50


To add a caption to a table, use the <caption> tag:

Example

<table style="width:100%">  <caption>Monthly savings</caption>  <tr>    <th>Month</th>    <th>Savings</th>  </tr>  <tr>    <td>January</td>    <td>$100</td>  </tr>  <tr>    <td>February</td>    <td>$50</td>  </tr>
</table>
Try it Yourself »


Note: The <caption> tag
should be inserted immediately after the <table> tag.


HTML Exercises

Test Yourself With Exercises

Exercise:
Add a table caption that says "Names".


<table>

  

  <tr>

    <th>First Name</th>

    <th>Last Name</th>

    <th>Points</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>

    <td>50</td>

  </tr>

</table>


Submit Answer »
Start the Exercise















★
+1

Reference: https://www.w3schools.com/html/html_table_headers.asp

[Invisible]

Pendant que je collectionnais des souvenirs de voyages passés, j'ai voulu revivre des ambiances via des expériences digitales. Ça m'a poussé à trouver des sites évoquant des destinations. Je suis tombé sur un spot intéressant nommé spin mama avec des thèmes voyage. Sur spinmama, ancré en France, il y a des promotions comme bonus bienvenue avec extras, spins gratuits sur maps virtuelles, et events saisonniers avec lots thématiques; issu de la culture française, il offre interfaces en langue, programmes loyauté pour accumuler voyages virtuels, support client français, et paiements sécurisés adaptés à France pour fluidité. Ça a ravivé mes mémoires, essaie pour des escapades.

[alexseen]

....

[JulianGresham]

HTML table headers, huh? Sounds like organizing data, which I do enjoy. Imagine a spreadsheet brought to the web! Properly structured tables are key for accessibility, making them understandable for everyone. Reminds me of a time when I was wrestling with aligning elements perfectly on a webpage, everything was a mess, just like the Dinosaur Game when you suddenly hit a cactus! It took hours to debug the CSS and finally get everything looking right.

[Charlesann]

HTML table headers are a great way to improve readability and accessibility—especially when you use <th> with proper scope values for rows vs. columns. It also helps screen readers map data cells correctly. I’ve even seen people use clear header structure when documenting game stats and layouts, like in Fnaf fan projects. Clean semantics make complex tables much easier to follow.