 |
Intro Browser The Page Elements Tables Layout Perfection  
|
| |||||
Tables cause page builders more trouble than any other HTML feature, but once mastered, they can give you enormous power over your page layouts.
Two aspects make them difficult. You can't see very well what you're doing because you're writing tags to describe something you're really trying to draw. And, if you get parts of them wrong, you may not see anything at all! But the basics are very simple and even the most complex table structures are made up of those same simple pieces.
This is a basic table, made up of two rows and two data cells in each row:
 Here's a picture of the table, with the HTML tags to make it written in. Now you can see clearly how the table, the table rows, and the data cells open and close, and where the content will be inserted in the cells. To write this table, just copy the tags line by line, starting with the top <TR> line and inserting your text or image content in the cell(s) you want (between a <TD> open and a </TD> close). OK, maybe you don't need to draw a picture to write this table, but you'll need them in our next meditation. Inside a table cell you can write another table, and sometimes you'll even nest three tables for precision layout control. If you can keep that all in your head, why are you reading this page? Secret #2: Format and comment your HTML table tags. You can run your table tags together like this, and many people do (even I do, occasionally, when it's a table I write all the time): <TABLE><TR><TD> Contents 1</TD><TD> Contents 2</TD></TR><TR><TD> Contents 3</TD><TD> Contents 4</TD></TR></TABLE> But if you use indenting, and write comments next to key parts, you can keep track of a complex table much more easily. Here's a fragment of indented and commented table code with one table inside of another: <TABLE BORDER=1>
<! Open the master table -->
<TR><TD>
<! Cell for the navigator -->
<TABLE>
<! Open navigator table -->
<TR><TD>
<! Link to home here -->
</TD></TR>
<TR><TD>
<! Link to favorites here -->
</TD></TR>
</TABLE>
<! Close navigator table -->
</TD>
<! Close cell for the navigator -->
<TD>
<! Open Main Data cell -->
...etc
You can see that the indenting makes it very clear which <TR> and <TD> go with which table, and the comments make the entire code very readable.
Secret #3: Build your tables first, then insert your text or images inside.
In the code fragment just above, you can see that there isn't any content in the cells, just comments about what will go in later. When you forget to close a table tag, or put more data cells in one row than in another, you'll get strange results and all of the content after the table opening may not even show! If you've already got text or image calls mixed in with the table code, it can be very difficult to isolate the problem. When I'm building nested tables, I frequently build the outer table first, then the table(s) nested in the outer table cells, then insert the content in the inner table cells.
Also notice in the fragment that the table border has been turned on with the BORDER=1 attribute. Borders definitely make it easier to see what you're doing while building, even if you're going to make it invisible (BORDER=0) later. If you're using your table for fine layout control, though, remember that the extra pixels of your border will affect your spacing.
Dudette |