Creating a Web Page VI : Tables
Created | Updated Sep 15, 2002
Please refer to previous entries in the "Creating a Web Page" series:
Good luck...
Be warned now that tables are one of a webmaster's biggest bugaboos. You can drive yourself crazy trying to get it to look exactly as you want since there are so many possible attributes (customizable features), and results will vary from one browser to the next. Thus warned, let us plunge into the fray...
Here are the simplest tags to form a table. TR stands for "table row", and TD for "table data", or one cell.
Sample HTML:
<TABLE><TR>
<TD> row1column1</TD>
<TD> row1column2</TD>
<TD> row1column3</TD>
</TR>
<TR>
<TD> row2column1</TD>
<TD> row2column2</TD>
<TD> row2column3</TD>
</TR>
<TR>
<TD> row3column1</TD>
<TD> row3column2</TD>
<TD> row3column3</TD>
</TR>
</TABLE>
Result:
| row1column1 | row2column1 | row3column1 |
| row1column2 | row2column2 | row3column2 |
| row1column3 | row2column3 | row3column3 |
All of the following attributes fall within the TABLE tag:
- BORDER
- BORDERCOLOR
- CELLSPACING
- CELLPADDING
- HSPACE and VSPACE
- ALIGN
...draws a border x pixels wide around the table
...sets the border's color.
sets the number of pixels (amount of space) around and between cells
gives you x number of pixels of space in the cell inside the cell around your text or data
set the amount of space around the table in pixels
can align the table either LEFT, RIGHT, or CENTER on the page.
<TR ALIGN=LEFT>
<TD> row1column1</TD>
<TD> row1column2</TD>
<TD> row1column3</TD>
</TR>
<TR ALIGN=CENTER>
<TD> row2column1</TD>
<TD> row2column2</TD>
<TD> row2column3</TD>
</TR>
<TR ALIGN=RIGHT>
<TD> row3column1</TD>
<TD> row3column2</TD>
<TD> row3column3</TD>
</TR>
</TABLE>
While not all of the attributes can be demonstrated within the Guide, here are what borders and alignments can do.
| row1 column1 | row2 column1 | row3 column1 |
| row1 column2 | row2 column2 | row3 column2 |
| row1 column3 | row2 column3 | row3 column3 |
As for the other attributes, the only other that will be presented here is found in the TD tag. NOWRAP is handy since if your table contains a long line of text, it will stay all on one line. (Otherwise, the browser would automatically make it fit the other cells, and there are times when you may not want it to.)
Sample HTML:
<TD nowrap> Here is a long cell in the table.</TD>Unfortunately, the Guide does not support this feature at this time. You'll just have to experiment with this one. The only disadvantage of NOWRAP is that it will stretch all the other cells in that column to fit the longest cell, but sometimes that's preferable to having it wrap the words, and sometimes you'll prefer the look of the table if the cells are wrapped.
There are many other attributes available that start to go beyond beginning web design. If you'd like to learn more of them, you can consult Netscape's online HTML tag reference, or a printed HTML guide.
