HTML tables allow web developers to arrange data into rows and columns.
| 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 |
A table in HTML consists of table cells inside rows and columns.
A simple HTML table:
<table>
<thead>
<th> Company </th>
<th> Contact </th>
<th> Country </th>
</thead>
<tbody>
<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>
</tbody>
</table>
Each table cell is defined by a <td> and a <td> tag.
td stands for table data.
Everything between <td> and </td> is the content of a table cell.
<table>
<tr>
<td> Emil </td>
<td> Tobias </td>
<td> Linus</td>
</table>
Note :A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.
ach table row starts with a <tr> and ends with a </tr> tag.
<table>
<tr>
<td> Emil </td>
<td> Tobias </td>
<td> Linus</td>
</tr>
<tr>
<td> 16 </td>
<td> 14 </td>
<td> 10</td>
</tr>
</table>
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 <th> tag:
th stands for table header.
Let 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>
By default, the text in <th> elements are bold and centered, but you can change that with CSS.