Table Headers
Headers for many columns and rows, or for each column and row, are possible in HTML tables.
| EMIL | TOBIAS | LINUS |
|---|---|---|
| MON | TUE | WED | THU | FRI | |
|---|---|---|---|---|---|
| 8:00 | |||||
| 9:00 | |||||
| 10:00 | |||||
| 11:00 | |||||
| 12:00 |
HTML Table Headers
The th elements specify table headers. A table cell is represented by each th element.
Example
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jillen</td>
<td>Simon</td>
<td>50</td>
</tr>
<tr>
<td>Timmy</td>
<td>Jacky</td>
<td>94</td>
</tr>
</table>
Vertical Table Headers
Define the first cell of each row as a <th> element in order to use the first column as table headers:
Example
<table>
<tr>
<th>Firstname</th>
<td>Jillen</td>
<td>Timmy</td>
</tr>
<tr>
<th>Lastname</th>
<td>Simon</td>
<td>Jacky</td>
</tr>
<tr>
<th>Age</th>
<td>94</td>
<td>50</td>
</tr>
</table>
Align Table Headers
By default, table headers are bold and centered:
| Firstname | Lastname | Age |
|---|---|---|
| Jillen | Simon | 50 |
| Timmy | Jacky | 94 |
To left-align the table headers, use the CSS text-align property:
Example
th {
text-align: left;
}
Header for Multiple Columns
You can have a header that spans over two or more columns.
| Name | Age | |
|---|---|---|
| Jillen | Simon | 50 |
| Timmy | Jacky | 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>Jillen</td>
<td>Simon</td>
<td>50</td>
</tr>
<tr>
<td>Timmy</td>
<td>Jacky</td>
<td>94</td>
</tr>
</table>
Table Caption
You can add a caption that serves as a heading for the entire table.
| 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>$1000</td>
</tr>
<tr>
<td>February</td>
<td>$500</td>
</tr>
</table>
table headers
HTML tables
the elements
vertical table headers
align table headers
header for multiple columns
table caption
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
HTML tables are a powerful tool for organizing and presenting data in a structured format. One key aspect of working with tables is the use of table headers, which provide important context and labeling for the information contained within the table.
The “ element is used to define a table header cell in HTML. This element is typically placed within the “ section of the table, which contains the column and row headers. Table headers help screen readers and other assistive technologies understand the structure and meaning of the data in the table.
When working with table headers, you can align the text within the header cells using the `align` attribute. The possible values are `left`, `right`, and `center`. You can also use CSS to style the table headers, such as setting the font weight, size, and color.
For tables with multiple columns, you can use the `colspan` attribute on the “ element to span the header across multiple columns. Similarly, the `rowspan` attribute can be used to span a header across multiple rows.
Finally, the “ element can be used to provide a descriptive title or label for the entire table, which helps users understand the context and purpose of the data.
By properly using table headers and other table-related elements in HTML, you can create more accessible and informative tables for your users.
HTML tables are a powerful tool for organizing and presenting data in a structured format. One important aspect of working with tables is the use of table headers, which provide context and clarity to the information being displayed.
The “ element is used to define a table header cell in HTML. This element can be used within the “, “, or “ sections of a table to indicate that a particular cell should be treated as a header.
Table headers can be aligned vertically or horizontally using the `align` attribute. The `scope` attribute can also be used to specify whether the header is for a column or a row.
For tables with multiple columns, the `colspan` attribute can be used to span a header across multiple columns. Similarly, the `rowspan` attribute can be used to span a header across multiple rows.
Finally, the “ element can be used to provide a descriptive title for the entire table, which can help users understand the context and purpose of the data being presented.
By understanding and properly utilizing table headers in HTML, you can create more accessible and user-friendly tabular data on your website.
