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:

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