In HTML tables are defined with the <table> tag and as in Excel are devided into rows and cells that can contain anything: numbers but also text, images, lists or other nested tables.
Table rows are initiated with the <tr> tag while cells and their data are conained into the <td> tag (table data).
<table>
<tr>
<td>Cell data</td>
<td>Cell data</td>
</tr>
</table>
The table tag can be used to isolate data in cells as well organize text and images in different cells on a webpage.
Tables can be setup for unlimited number of rows and columns, the design of a table is based on how we use the attributes inside the <table>, <tr> and <td> tags.
Table size is setup using the attributes width and height, values can be given relative in percentage of the screen size or absolute in pixels.
The position of the table on the screen is defined using the attribute align with the usal values of left (default), right and center.
Also borders and spacings are very important to the table design, attribute border="2" is giving the table a border of 2 pixels while attribute cellpadding define the number of pixels between text and border and cellspacing the number of pixels between cells.
When we need to give some space between the beginning of the cell and the text we add the cellpadding attribute with a value in pixel.
<table cellpadding="20" border="1">
<tr align="center">
<td>Country</td>
<td>Inhabitants</td>
</tr>
<tr>
<td>Cina</td>
<td>1.420M</td>
</tr>
</table>
| Country | Inhabitants |
| Cina | 1.420M |
| India | 1.368M |
| USA | 329M |
Similar to cellpadding, the cellspacing attribute is used to give space between the beginning of the cell and the border of the table. In a normal scenario you won't recognize the difference between cellaspacing and cellpadding.
HTML5 Tip! - cellpadding="20" doesn't work in HTML5, you have to force it on the cells using CSS with a padding value.
<table border="5">
<tr align="center">
<td style="padding: 20px">Country</td>
<td style="padding: 20px">Inhabitants</td>
</tr>
<tr>
<td style="padding: 20px">Cina</td>
<td style="padding: 20px">1.420M</td>
</tr>
</table>
| Country | Inhabitants |
| Cina | 1.420M |
| India | 1.368M |
| USA | 329M |
To adapt cells and make them space between more columns we use attribute colspan on the <td> tag with an integer value representing the number of column to span.
<table border="1">
<tr align="center">
<td>Country</td>
<td>Inhabitants</td>
</tr>
<tr align="center">
<td>Cina</td>
<td>1420M</td>
</tr>
<tr align="center">
<td>India</td>
<td>1368M</td>
</tr>
<tr>
<td colspan="2">Cell spanning accross 2 columns</td>
</tr>
</table>
| Country | Inhabitants |
| Cina | 1.420M |
| India | 1.368M |
| USA | 329M |
| Cell spanning accross 2 columns | |
Similar to colspan but for rows the rowspan attribute applied to the <td> tag permit to the cell to space accross 2 or more rows.
<table cellpadding="20" border="1">
<tr align="center">
<td>Country</td>
<td>Inhabitants</td>
</tr>
<tr>
<td>Cina</td>
<td>1.420M</td>
</tr>
<tr>
<td rowspan="2">India & USA</td>
<td>1.368M</td>
</tr>
<tr>
<td>329M</td>
</tr>
</table>
| Country | Inhabitants |
| Cina | 1.420M |
| India & USA | 1.368M |
| 329M |
The caption tag is the same used to describe photos, in the same way we can add a simpel explanation fo the table.
<table cellpadding="20" border="1">
<caption> Country inhabitants</caption>
<tr>
<td>Cina</td>
<td>1.420M</td>
</tr>
<tr>
<td>India</td>
<td>1.368M</td>
</tr>
<tr>
<td>USA</td>
<td>329M</td>
</tr>
</table>
| Cina | 1.420M |
| India | 1.368M |
| USA | 329M |
To define the elements of a table we can use separate tags, attribute <tfoot> represent the table footer, the bottom of the table. Attribute <tbody> is usually used for the data itselfs, the cells with numbers and data. Attribute <thead> is describing columns on top of the table, the header. Notice how in <thead> and <tfoot> we use tag <th> rather than <td>.
<table border="1">
<thead>
<tr align="center">
<th>Country</th>
<th>Inhabitants</th>
</tr>
</thead>
<tfoot>
<tr align="center">
<th>Country</th>
<th>Inhabitants</th>
</tr>
</tfoot>
<tr align="center">
<td>Cina</td>
<td>1420M</td>
</tr>
<tbody>
<tr align="center">
<td>India</td>
<td>1368M</td>
</tr>
</tbody>
</table>
| Country | Inhabitants |
|---|---|
| Country | Inhabitants |
| Cina | 1420M |
| India | 1368M |