HTML » Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
This is how a plain table code looks:
<table>
<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>
This table would look like this:
| Row 1, cell 1 | Row 1, cell 2 |
| Row 2, cell 1 | Row 2, cell 2 |
If you do not specify a border attribute the table will be displayed without any borders. To display a table with borders, you will have to use the border attribute: Border="1"
You can use this training pad from www.w3schools.com found here
You can merge cells together, whether it is rows or columns. If you look at this code:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td colspan="2">Row 1, cell 2 also spanning row 1, cell 3</td>
</tr>
<tr>
<td rowspan="2"> Row 2, cell 1, also spanning Row 3, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
</table>
In a browser, you will see that on the second row there are now two cells instead of three, the second column spanning the second and third cell. The colspan attribute, which means 'column span' will span the cell over the number of cells that is specified. This means, in this example, that there is no need for a third td tag - two cells are merged into one.
| Row 1, cell 1 | Row 1, cell 2 also spanning row 1, cell 3 | |
| Row 2, cell 1, also spanning Row 3, cell 1 | Row 2, cell 2 | Row 2, cell 3 |
| Row 3, cell 2 | Row 3, cell 3 | |
The self-descriptive rowspan attribute is similar to colspan, except, obviously, it will span across rows rather than columns. Again, the cells that it spans should be removed. In this example, because it spans over the fourth row, there is only two cells in that row.
So practise making tables, it's the most important code in hl layouts. Don't give up before you can create one of these:
| Cell 1/2, row 1 | Cell 3, row 1 | Cell 4, row 1 | Cell 5, row 1 | |
| Cell 1, row 2 | Cell 2, row 2 | Cell 3/4, row 2 | Cell 5, row 2 | |
| Cell 1, row 3 | Cell 2/3/4, row 3 | Cell 5, row 3 | ||
| Cell 1, row 4/5 | Cell 2, row 4 | Cell 3, row 4 | Cell 4, row 4 | Cell 5, row 4 |
| Cell 2, row 4 | Cell 3, row 4 | Cell 4, row 4 | Cell 5, row 4 | |
Some handy tags:
Into the table tag:
Merge the borders: style="border-collapse:collapse"
Add a background image to a table: background="url"
Add a background color to a table: bgcolor="red"
Into the td tag:
Add a background color to a table cell: bgcolor="red"
Add a background image to a table cell: background="url"
Align the content in a cell: align="left" (right, center), valign="top" (bottom)
Cell padding: space inside the cell: cellpadding="0"
Cell spacing: space around the table on the outside: cellspacing="0"
Tings that can go inside a cell:
|
This is a paragraph This is another paragraph |
This cell contains a table:
|
||||
This cell contains a list
|
HELLO |
<table border="1">
<tr>
<td>
This is a paragraph
This is another paragraph
</td>
<td>This cell contains a table:</td>
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>