html table headers

HTML Tutorials

HTML Introduction HTML Headings HTML Paragraphs HTML Formatting HTML Links

HTML Images

HTML Tables

HTML Lists

HTML Block & Inline HTML Classes HTML Id HTML Iframes HTML JavScript HTML File Paths HTML Head HTML Layout HTML Responsive

HTML Table Headers

Previous Next

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>

Try it Yourself

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:

td {
text-align: left;
}

Try it Yourself

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"></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>

Try it Yourself

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:50%">
    <caption>Monthly Saving</caption>
    <tr>
        <th>Month</th>
        <th>Saving</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.

Previous Next

Report error:

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail: shaurya.y321@gmail.com

Forum | About

LearnToCode is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using LearnToCode, you agree to have read and accepted our terms of use, cookie and privacy policy.