HTML Tables

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

A simple HTML table consist of the following components:

<table> - defines the table container
<tr> - defines a table row
<th> - defines a header cell
<td> - defines a standard data cell

Example

A simple HTML table:

<table>
<tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
</tr>
<tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
</tr>
</table>

Try it Yourself »

An HTML table can easily be styled with CSS:

Example

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

Try it Yourself »

Table Cells

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

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

Example

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

Try it Yourself »

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

Table Rows

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

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.

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 »

Header Cells

A header cell is defined with the <th> tag.

By default, the text in header cells are bold and centered, but you can change that with CSS.

Example

Let the first row be header cells:

<table>
<tr>
<th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
</tr>
<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 »

HTML Table Tags

Tag	Description
<table>	Defines a table
<th>	Defines a header cell in a table
<tr>	Defines a row in a table
<td>	Defines a cell in a table
<caption>	Defines a table caption
<colgroup>	Specifies a group of one or more columns in a table for formatting
<col>	Specifies column properties for each column within a <colgroup> element
<thead>	Groups the header content in a table
<tbody>	Groups the body content in a table
<tfoot>	Groups the footer content in a table