HTML - Tables
Tables can be difficult at first, but with a little patience and practice you will se that things are not always how they seem to be. The <table> tag is used to open a table. Within this tag we will find two others typical tags, <tr> (the table lines) and <td> (the table column). But the best explanation is always an example:
<table border="1"> <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr> </table> |
Display
| Row 1 Cell 1 | Row 1 Cell 2 |
| Row 2 Cell 1 | Row 2 Cell 2 |
The content will be placed within the table's rows. A row represents what is between <td> and </td>. The border attribute establishes the length of the table's edge.
HTML - Asymmetrical tables
To form asymmetrical tables we will use 'rowspan' to cross more than
one line and 'colspan' to cross more than one columns. Also, if we want
that the first line to serve as titles line for all the columns we will use
the <th> tag. These will be written with bold letters as we will see in the
following example:
<table border="1"> |
Display
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 |
| Row 2 Cell 2 | Row 2 Cell 3 | |
| Row 3 Cell 1 | ||
HTML - Spacing the cells
With the help of the 'cellpadding' and 'cellspacing' attributes we will
establish the distance between the cells. 'Cellspacing' establishes the
size of the edge, and 'cellpadding' the distance between the edge and the
content. In the following example a little bit of color has also been added.
<table border="1" cellspacing="10"
|
Display
To better make the difference we will erase the edge from the previous example.
<table border="1" cellpadding="10" <tr> <th>Column 1</th> </tr> <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr> </table> |
Display
The distance between the cells and the edge's size will be interpreted in pixels by the browser. Using this 'law' a value of 10 means actually 10 pixels. This attribute is not the only one that uses as unit of measure the pixels, but we will learn about the others as we progress through the next tutorials.