The HTML coding for a table is:
<table></table> to define a tableThe most important table attributes you can use are:
<tr></tr> to define a new row
<td></td> to define the columns in a row
<width="x"> x=a percentage (relative to the screen) or an exact number (of pixels)
<border="y"> y=a number between 0 (zero, no border) to 8 (thick border)
<align="z"> z=left, center or right
<valign="z"> z=top, middle or bottom
Here's the html code for a simple table with border="1" so you can actually see the table:
<table width="100%" border="1" cellspacing="0" cellpadding="0">and this code results in:
<tr>
<td>here's the first row, first column</td>
<td>here's the first row, second column</td>
</tr> <tr>
<td>here's the second row, first column</td>
<td>here's the second row, second column</td>
</tr>
</table>
| here's the first row, first column | here's the first row, second column |
| here's the second row, first column | here's the second row, second column |
Because this page already uses tables to present a nice lay-out, the table above is within another table. It's nested. As you can see, the examples fits well in this page. This is how it would look in a new page: html table 1, only using the table example above (the link opens a new window; close it when you're done)
As you can see the table took the whole window, because the width-tag was set to 100%. Now let's do the same table with a widht of only 650 pixels. It would look like this: html table 2 (close the window when you're done.)
As you may have noticed, the text within the tables was right next to the borders. In order to make a nicer lay-out you can use cellpadding and cellspacing in the table-tag to add some spacing between borders and text. Here's the same table as in example 2, but now we're using cellpadding and spacing: html table 3.
Did you see how there was space before the cells were made up and there was space between the cell borders and the text?
Now, using all of the above we can make a HTML template for a page. We're going to use two columns and 2 rows. Of course you can add more, but this is basically how a real page would look like. html table 4
