Tables can be difficult at first, but with a little patience and practice you will see 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:
HTML
<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>
Demo
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:
HTML
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>
Demo
COLUMN 1 COLUMN 2 COLUMN 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 2 Row 3 Cell 1 Row 2 Cell 3
HTML – Spacing the cells
HTML
<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>
Demo
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:
HTML
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>
Demo
COLUMN 1 COLUMN 2 COLUMN 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 2 Row 3 Cell 1 Row 2 Cell 3
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.
HTML
<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)">
<tr>
<th>Column 1</th>
<th>Column 2</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>
To better make the difference you can erase the edge from the previous example.
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.
HTML
<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)">
<tr>
<th>Column 1</th>
<th>Column 2</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>
To better make the difference you can erase the edge from the previous example.
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.
Article Source:http://www.techstarcle.com/html-tables-tutorial/
