Like frames, tables have been around for quite some time, and browser support started taking off around version 3.0 of I.E. and Navigator. With tables you can control the look of your text and images easier, and do tons of stuff you couldn’t do without tables.
In fact, Icehouse Designs is made with tables pretty much on every page.
Let us move on to the first section.
Lets take a look at a basic table, with its borders so you can actually see it.
The above table has 2 rows, 3 columns, a width of 80%, and a border of 1. Lets take a look at the source for the table.
<table width=”80%” border=”1″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td></td>
<td></td>
<td>></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Table width defines how wide the table is. You can use a fixed number and define it as pixels, or define it as a percentage. ( I recommend using a percentage and never using a fixed number ). Table border defines how thick the border of the table is. The higher the number, the thicker the border. A border of 0 will show no border at all. Cellspacingdefines how many pixels to space the cells apart inside the table, and cellpadding defines how many pixels the contents inside the cell are away from the walls of the cell itself.
<TR></TR> tells the table the starting and ending points for the table rows, and <TD></TD> stands for table data, or cells. Notice how the table opens and closes with a <TABLE>and </TABLE> tags.
So lets put some data into our table we made.
| Hi | Image or text here | |
| Hello |
The source would now look like this:
<table width=”80%” border=”1″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>Hi</td>
<td>Image or text here</td>
<td>></td>
</tr>
<tr>
<td></td>
<td></td>
<td>Hello</td>
</tr>
</table>
Notice how your text ( or images ) are inside of the <TD></TD> tags. You can put anything you want inside of these tags, including another table or any type of HTML will work.
Lets modify this table a bit.
| Hi | ||
Notice how the first cell in each row is now combined? This is done using the rowspan tag. Now the source looks like this:
<table width=”80%” border=”1″ cellspacing=”0″ cellpadding=”2″>
<tr>
<td rowspan =”2″>Hi</td>
<td></td>
<td>></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Notice the change and how it effects the table structure, and notice also how I increased the cellpadding to 2, and how it changes the content inside the cell a bit, its not so flush up against the cell wall.
Lets make even more changes to our table.
Take note the border color is now blue, or the HEX value of #0000CC. Yes you can make your borders any colors you want. This is done by adding bordercolor=”#0000CC” to the opening <TABLE> tag. Of course you can replace 0000CC to any color you want using the HTML color chart. Lets take a look at some more stuff you can do with your tables, by tweaking this one even more.
You guessed it, just like you can add a border color you can add a background color also. This is done by adding a bgcolor=”#33FFFF” statement in your opening table tag. Once again you can replace the value with any color you want. Now our source looks something like this:
<table width=”80%” border=”1″ cellspacing=”0″ cellpadding=”2″ bordercolor=”#0000CC” bgcolor=”#33FFFF”>
<TR>
<TD rowspan=”2″></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
Lets review what we went over.
<TABLE> opens the table, and </TABLE> closes it.
<TR></TR> specifies the beginning and ending of a table row.
<TD></TD> specifies the beginning and ending of table or cell data.
<TD rowspan=”#”></TD> combines 2 or more cells into one.
bgcolor=”######” gives the table a background color.
bordercolor=”######” gives the table a border color, if border is 1 or higher in size.
border=”#” the size of the table border.
<TD align=””></TD> aligns the contents of the cell, values in between the quotes are either left, right or center.