Scribd
Upload
32 views5 pages

Tables Headers HTML

Uploaded by

captainricardus
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
32 views5 pages

Tables Headers HTML

Uploaded by

captainricardus
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

HTML Table Headers

❮ PreviousNext ❯

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 »
ADVERTISEMENT

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.

Exercise?
What is the correct tag name for a table-header in HTML?

<table-header>

<td>

<th>

You might also like