HTML tables allow web developers to arrange data into rows and columns.
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 »
Define an HTML TableA table in HTML consists of table cells inside rows and columns. ExampleA 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 »
Table CellsEach table cell is defined by a <td> and a </td> tag. 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.
Table RowsEach table row starts with a <tr> and ends with a </tr> tag. tr 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.
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.
ExampleLet the first row be table 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 » By default, the text in <th> elements are bold and centered, but you can change that with CSS.
HTML Exercises
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
|
For a complete list of all available HTML tags, visit our HTML Tag Reference. |