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
HTML Table Headers
Re: <t>HTML Table Headers</t>
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.
-
JulianGresham
- Posts: 0
- Joined: Thu Nov 13, 2025 6:38 am
Re: <t>HTML Table Headers</t>
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.