bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/HTML/HTML Foundations
HTML•HTML Foundations

HTML Table Headers

Formula

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>

Formula

< th > Firstname </th >
< th > Lastname </th >
< th > Age </th >

</tr> <tr>

Formula

< td > Jill </td >
< td > Smith </td >
< td > 50 </td >

</tr> <tr>

Formula

< td > Eve </td >
< td > Jackson </td >
< td > 94 </td >

</tr> </table>

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>

Formula

< th > Firstname </th >
< td > Jill </td >
< td > Eve </td >

</tr> <tr>

Formula

< th > Lastname </th >
< td > Smith </td >
< td > Jackson </td >

</tr> <tr>

Formula

< 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

Jill

Smith

50

Eve

Jackson

94

Formula

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

Jill

Smith

50

Eve

Previous

HTML Table Sizes

Next

HTML Table Padding & Spacing