html tables

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 Tables

Previous Next

HTML tables allow web developers to arrange data into rows and columns.

Example:

Country	Saleperson	Order Date	OrderID	Units	Order Amount
USA	Fuller	1/01/2011	10392	13	1,440.00
UK	Gloucester	2/01/2011	10397	17	716.72
UK	Bromley	2/01/2011	10771	18	344.00
USA	Finchley	3/01/2011	10394	16	2,556.95
UK	Gillingham	3/01/2011	10395	9	2,122.92
USA	Coghill	9/01/2011	10403	18	855.01
Uk	Rayleigh	13/01/2011	10406	15	1,830.78
USA	Farnham	14/01/2011	10409	19	319.20

Try it Yourself

Table Cells

Each table cell is defined by a >td< and >/td< tag.

Note: td stands for table data.

Everything between >td< and >/td< are the content of the table cell.

Example

<table>
    <tr>
        <td>Emil</td>
        <td>Tobias</td>
        <td>Linus</td>
    </tr>
</table>

Try it Yourself

Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.

Each table row starts with a <tr> and ends with a </tr> tag.

Note: stands for table row

Example

<table>
    <tr>
        <td>Emil</td>
        <td>Tobias</td>
        <td>Linus</td>
    <tr>
    <tr>
        <td>16</td>
        <td>14</td>
        <td>10</td>
    <tr>
</table>

Try it Yourself

You can have as many rows as you like in a table; just make sure that the number of cells are the same in each row.

Note: There are times when a row can have less or more cells than another. You will learn about that in a later chapter.

Table Headers

Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:

th stands for table header.

Example

Let the first row be table header cells:

<table>
    <tr>
        <th>Person 1</th>
        <th>Person 2</th>
        <th>Person 3</th>
    </tr>
    <tr>
        <th>Emil</th>
        <th>Tobias</th>
        <th>Linus</th>
    </tr>
    <tr>
        <th>16</th>
        <th>14</th>
        <th>10</th>
    </tr>
</table>

Try it Yourself

By default, the text in <th> elements are bold and centered, but you can change that with CSS.

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.