HTML tables may include headers for individual columns or rows, or for multiple columns/rows.
Table headers are designated using th elements, with each th element representing a cell within the table.
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> |
To utilize the first column as table headers, designate 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> |
As a default, table headers are both bold and centered.
|
Firstname |
Lastname |
Age |
|
Jill |
Smith |
50 |
|
Eve |
Jackson |
94 |
To align the headers of the table to the left, apply the CSS text-align property.
Example
| th { text-align: left; } |
You can create a header that extends across two or more columns.
| Name | Age | |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
To achieve this, apply the colspan attribute to 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> |
You have the option to include a caption that acts as a title for the entire table.
Monthly savings
For adding a caption to a table, utilize 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> |
|
Note: Place the <caption> tag immediately following the <table> tag. |
