Building Your Own Tables
Building tables is time consuming, repetitious work, so be sure that the tables will
really enhance your content. You can simplify your work by careful planning the
layout of your tabular data and by making use of search, replace, copy, and paste
functions of your HTML editor. Many popular WYSIWYG HTML editor makes table creation a
breeze.
Laying out tabular data for easy display
First of all, make a sketch of how you want your table to look. Then make a small HTML
table with only a few rows of data to test your methodology and to see whether the table
appears the way you envisioned it. If you're using multicolumn and multirow spanning
heads, you may need to make some adjustments to get them properly spaced to fit your data.
Finally, you may want to test your tables with several browsers to see how they look on
each browser.
Multirow and multicolumn
Just remember, you must build your tables by rows. If you use ROWSPAN="3" in
one row (<TR>), you must account for the extra two rows in the next two <TR>.
The general concept is to leave out the cell in each row or column that will be assumed or
spanned into by the ROWSPAN or COLSPAN cell For example:
- <TABLE BORDER>
<TR>
<TD ROWSPAN="3">
Letters</TD>
<TD>A</TD>
</TR>
<TR>
<TD>B</TD>
</TR>
<TD>C</TD>
</TR>
</TABLE>
|
Mixing graphics and tables makes for
interesting pages
Tables are an effective way to present text in a visually pleasing and well ordered
manner so that your readers won't be frightened off by a screen full of dense text.
Something about a long, unbroken list of bare numbers quickly drives away all but the
truly brave. However, putting those numbers into an attractive table, or better yet,
several tables with a few well chosen images, can do wonders for your Web site.
Nesting
Nesting is an important concept in building tables. The method of creating a table
relies on nesting one set of tags within another set that is itself nested within yet
another set of tags, You can easily get lost and confused when building tables. To keep
the confusion down to a minimum, always type in both the opening and closing tags of a tag
pair before adding attributes or content. This ensures that you always close your tags.
Another good habit is to code each element of a table on a separate line. Every
<TD> tag pair needs to appear on its own line and indented to offset it from the
other levels of table markup. For example
- <TABLE BORDER="2">
<CAPTION>The default caption placement.</CAPTION>
<TR>
<TH> Header: Row 1 - Column 1</TH>
<TH> Header: Row 2 - Column 2</TH>
</TR>
<TR>
<TD> Cell: Row 2 - Column 1</TD>
<TD> Cell: Row 2 - Column 2</TD>
</TR>
</TABLE>
|
The default caption placement.
Header: Row 1 - Column 1
|
Header: Row 1 - Column 2
|
Cell: Row 2 - Column 1 |
Cell: Row 2 - Column 2 |
|
|