Lesson 10: Tables
Tables are used when you need to show "tabular data" i.e. information that is logically presented in rows and columns.
Is it difficult?
Building tables in HTML may at first seem complicated but if you keep cool and watch your step, it is actually strictly logical - just like everything else in HTML.
Example 1:
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
Will look like this in the browser:
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
What's the difference between <tr> and <td>?
As you will see from the above example, this is probably the most complicated HTML example we have given you so far. Let's break it down and explain the different tags:
3 different elements are used to insert tables:
- The opening tag
<table>and the closing tag</table>starts and ends the table. Logical. <tr>stands for "table row" and starts and ends horizontal rows. Still logical.<td>is short for "table data". This tag starts and ends each cell in the rows of your table. All simple and logical.
Here is what happens in Example 1: the table starts with a <table>, followed by a <tr>, which indicates the beginning of a new row. Two cells are inserted in this row: <td>Cell 1</td> and <td>Cell 2</td>. The row is hereafter closed with a </tr> and a new row <tr> begins immediately after. The new row also contains two cells. The table is closed with </table>.
Just to make it clear: rows are horizontal lines of cells and columns are vertical lines of cells:
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
Cell 1 and Cell 2 form a row. Cell 1 and Cell 3 form a column.
In the above example, the table has two rows and two columns. However, a table can have an unlimited number of rows and columns.
Example 2:
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
<tr>
<td>Cell 9</td>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
</tr>
</table>
Will look like this in the browser:
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
| Cell 5 | Cell 6 | Cell 7 | Cell 8 |
| Cell 9 | Cell 10 | Cell 11 | Cell 12 |
Are there any attributes?
Of course there are attributes. For example, the border attribute is used to specify the thickness of the border around your table:
Example 3:
<table border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
Will look like this in the browser:
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
The thickness of the border is specified in pixels (See lesson 9)
As with images, you can also set the width of a table in pixels - or alternatively in percentage of the screen:
Example 4:
<table border="1" width="30%">
This example will be displayed in the browser as a table with the width of 30% of the screen. Try it yourself.
More attributes?
There are lots of attributes for tables. Here are two more:
- align: specifies the horizontal alignment of the content in the entire table, in a row or in a single cell. For example, left, center or right.
- valign: specifies the vertical alignment of the content in a cell. For example, top, middle or bottom.
Example 5:
<td align="right" valign="top">Cell 1</td>
What can I insert in my tables?
Theoretically, you can insert anything in tables: text, links and images... BUT tables are meant for presenting tabular data (i.e. data which can be meaningfully presented in columns and rows) so refrain from putting things into tables simply because you want them to be placed next to each other.
In the old days on the Internet - i.e. a few years ago - tables were often used as a layout tool. But if you want to control the presentation of texts and images there is a much cooler way to do it (hint: CSS). But more about that later.
Now, put what you just learned to practice and design a number of tables in different sizes, with different attributes and content. This should keep you busy for hours.