Creating Tables
Tables, are in my opinion, the most important tag in the HTML language. You need to know and understand how tables work to be an effective web designer.
There are three main elements to a table. The <TABLE> tag, the table row <TR> and the table cell <TD>. Every time you add a TR tag, this means that you are dropping down to the next row. Every time you add a <TD> tag, then you are starting a new cell inside of that row. I have listed the main elements below, along with their most common attributes.
<TABLE> Attributes
- align - aligns the table to the left, center or right.
- bgcolor - defines the color of the background for the entire table.
- border - defines the width of the border in pixels.
- cellpadding - is the invisible space in between the content of the cell and the actual cell wall.
- cellspacing - is the actual space (in pixels) between the two cells.
- width - defines the width of the table in pixels or a percentage.
EXAMPLE: <TABLE align="center" bgcolor="blue" border="2" cellpadding="5" cellspacing="2" width="90%">
<TR> Attributes
align - aligns the content of the row to the left, center or right.
bgcolor - defines the color of the background for the row.
valign - vertically aligns the content of the row to the top, middle or bottom.
EXAMPLE: <TR align="right" bgcolor="red" valign=top>
<TD> Attributes
align - aligns the content of the row to the left, center or right.
background - places a background image inside of the table cell.
bgcolor - defines the color of the background for the entire table.
colspan - stretches the length of the cells to 2 or more cell lengths.
height - defines the heights of the cell in pixels.
nowrap - is an attribute to lock the content so that it all stays on the same line.
rowspan - stretches the height of the cells to 2 or more cells.
valign - vertically aligns the content of the cell to the top, middle or bottom.
width - defines the width of the actual cell, in pixels or percentage.
EXAMPLE: <TD align="right" background="back.gif" bgcolor="green" colspan="3" height="200" nowrap rowspan="2" valign="bottom" width="300">
Now that you know the basics, here are two examples of tables. Each example has two pictures associated with it. The top picture has the cellpadding, cellspacing and border set to 2 and the bottom has them all set to 0. I have also included the code for each table so that you can see how it was constructed.
 |
<table cellspacing="2" cellpadding="2" width=100 border=0>
<tr>
<td bgcolor="red"> </td>
<td bgcolor="yellow"> </td>
<td rowspan=2 bgcolor="aqua"> </td>
</tr>
<tr>
<td colspan="2" bgcolor="blue"> </td>
</tr>
<tr>
<td colspan=3 bgcolor="fuchsia"> </td>
</tr>
</table>
|
 |
<table cellspacing="2" cellpadding="2" width=100 border=2>
<tr>
<td rowspan=3 bgcolor="aqua"> </td>
<td bgcolor="blue"> </td>
<td bgcolor="fuchsia"> </td>
</tr>
<tr>
<td colspan=2 bgcolor="lime"> </td>
</tr>
<tr>
<td bgcolor="gray"> </td>
<td bgcolor="yellow"> </td>
</tr>
</table>
|
Before I ever start to create a table, I draw out what my table will look like on a piece of paper. This way I know exactly how many rows and columns my table will have before I even start. It's easy to do and will save you a big headache if you get stuck while writing your table. The problem with tables is that they are very picky and usually don't end up displaying right until you do have it perfect. With most code, you can build it as you go, but if you have the smallest error in your table it will mess the whole thing up or not even display anything at all. Thus, troubleshooting tables is a bit harder than other HTML code.
Here are some helpful hints to remember while building your table:
Always close your tags! - Some browsers don't need closing tags, but most do and so it's important to to this. If you have 3 <TR> tags, then make sure you have 3 </TR> tags. If you have 10 <TD> tags, make sure that you have 10 </TD> tags. You should always have an even amount of tags.
Set your border to 2 during construction. Even if your final table will not have a border on it, it's important to set a border in the TABLE tag while you are making your table. I do this because it shows where each row and cell are and you can more easily correct errors in your table if you know where cells start and stop. Once the table is complete and looking good, then you can change it back to 0 if you need to.
Seamless Tables. If you would like to assemble several images together in a table to form a larger seamless image, then there are two things to remember. First, make sure your border, cellpadding and cellspacing are all set to 0. Second, make sure that all of your tags are touching and that you don't have any space in between them. For example, instead of this: <TD> <IMG SRC="piece.gif"> </TD> you should have:
<TD><IMG SRC="piece.gif"></TD>
Count your cells. This means that you need to always have the same number of TD's in each row. If your table has 4 columns in it, then you need to make sure that there are 4 <TD> and 4 </TD> tags in each row. (Or the total number of cells adds up to 4 if you are using the colspan tag.) This insures that each row will have the same amount of columns and your table will align much better.
This is really the tip of the iceberg when it comes to tables, but the main thing to remember is experimentation. Just try new things and you will be amazed at the ability of the <TABLE> tag.