Tables 102
Three Common Table Problems and Two Common Table Tricks
By The Small Lady 
Q.: I've put the HTML for a table on my page. When I try to view the page, it comes up blank!
A.: It sounds like you forgot a </TABLE> tag. Ending tags for tables are CRUCIAL: leaving one off, especially the </TABLE> tag, can have disastrous results. Check your HTML and for every beginning tag (<TABLE>, <TR> etc.), make sure you have the appropriate ending tag (</TABLE>, </TR> etc.). Also, check the order of the tags and make sure that you close nested tags first (e.g., <TR><TD> should be closed </TD></TR> and NOT </TR></TD>): ending tabs in the improper order can corrupt your table's appearance. If you have a large or complicated table, printing out the HMTL for the table and then matching up beginning/ending tags with a highlighter may help.
Q.: Why do my table columns keep changing sizes?
A.: If you do not specify a WIDTH attribute in your <TABLE> or <TD> tags, your table automatically tries to take up as much space at it can. Any text or graphics in the table cell will also impact how wide the columns get; so will the resolution you use to view the page. Using WIDTH tags in your <TABLE> and/or <TD> tags will help keep your table and its columns the size you want.
Q.: Which is better to use: setting WIDTH as a percentage or as a pixel size?
A.: It really depends on what you are using the table for. The advantage of setting WIDTH (and HEIGHT) as a percentage is that the table will automatically adjust for the resolution size you are using. This is good to use if
You are trying to maintain a degree of consistency in your site's appearance among different resolutions.
For text or graphics that do not have to be rigidly fixed in a specific location/layout.
For simple table layouts (1-3 columns or rows)
For creating centered or right-aligned layouts.
The disadvantages are:
Table/column size is dynamic across resolutions.
It can be harder to design complex tables by using percentages to assign size.
Setting WIDTH/HEIGHT as a pixel size will lock the size of your cells/table in place, regardless of the resolution size. Setting the WIDTH of a table at 700 means that that width will always remain 700, even if the resolution used to view it is 640x480 (those scroll bars will come in at the bottom of your browser). This is good for:
More complex tables where cell sizes need to be static.
For text or graphics that have to be set in a certain location on the page.
For large graphics that are "diced" and arranged in a table to speed up page loading time.
Some disadvantages are:
The cell sizes won't change, so your table that looks perfect at 800x600 will look tiny at 1600x1200 or huge at 640x480.
Like I said before, it really depends on what you are using the table for. And don't worry, if it turns out that WIDTH as pixels doesn't work, you can always switch over to WIDTH as percentage.
Q. The font used in my table doesn't match what I am using for the rest of my page!
A.: Unless you specify the font face and size to be used in your table, the font will revert to the default settings (usually Times/Times New Roman, average size). You will need to set the font attributes using the <FONT> tag in each cell. For example, if we wanted to set the font face to Arial with a size of 2, the tags would look something like this:
<TD>
<FONT FACE="ARIAL" SIZE="2">
Your Text Here.
</FONT>
</TD>
[Then you go on to the next cell:]
<TD>
<FONT FACE="ARIAL" SIZE="2">
Your Text Here.
</FONT>
</TD>
[etc.]
Q. I want to set my table up so it looks like this:
How do I do that?
A: It sounds logical that this code would work:
<TABLE width=400 border=1>
<TR>
<TD width=400><br></TD>
</TR>
<TR>
<TD width=100><br></TD>
<TD width=100><br></TD>
<TD width=100><br></TD>
<TD width=100><br></TD>
</TR>
<TR>
<TD width=100><br></TD>
<TD width=100><br></TD>
<TD width=100><br></TD>
<TD width=100><br></TD>
</TR>
</TABLE>
But that's wrong, because if you used that your table would turn out like this:
Columns will usually be as wide as the widest cell in them. In this case, the first column width was set to 400...so even though the subsequent rows had all the columns set to 100, the table still accommodated that first cell (ignoring the 100 as well as the table width of 400!) and kept that column width at 400. Know what you need? The COLSPAN attribute! COLSPAN is used within the <TD> tag to have the cell span as many columns as you need it to.
Don't believe me? Watch! First, start your table and your first row:
<TABLE width=400 border=1>
<TR>
[OK? OK! Now, let's do that wide cell:]
<TD COLSPAN=4>
[the COLSPAN is set so that the cell will span across the 4 columns. Now, type your text, close the cell, and lets move to the next row.]
</TD>
</TR>
[Now for the next row:]
<TR>
<TD width=100>Text</TD>
<TD width=100>Text</TD>
<TD width=100>Text</TD>
<TD width=100>Text</TD>
</TR>
[and continue on and on and on, until you are done! Then, close the table:]
</TABLE>
[and that's it! You have the layout you want!]
Q. All right, now what about a table that looks like this:
How do I do that?
A; Well, obviously COLSPAN won't work here, and you learned what happened when you try to vary cell widths in a column. How to do this? ROWSPAN! The ROWSPAN attribute works in the same way as COLSPAN, except that you are expanding up and down, not across. Let's make that table you wanted. First, start the table and the row:
<TABLE WIDTH=400 BORDER=1>
<TR>
[Now, the first two cells:]
<TD WIDTH=100>Text</td>
<TD WIDTH=100>Text</td>
[Now, for the big one!]
<TD WIDTH=200 ROWSPAN="3">Text</td>
[This tells the cell that it should span 3 rows. The number of rows to be spanned must include the row the ROWSPAN attribute is being used in. Now, close the row:]
</TR>
[Now, do the next row:]
<TR>
<TD WIDTH=100>Text</td>
<TD WIDTH=100>Text</td>
</TR>
[Notice that there are only two cells in this row? This is important to remember! The cell in that first row, the one with the ROWSPAN attribute in it, is taking up the remaining space. Now, do another row and close the table:]
<TR>
<TD WIDTH=100>Text</td>
<TD WIDTH=100>Text</td>
</TR>
</TABLE>
There you have it!
