Don’t shoot me for using HTML tables for formatting the page. This was the standard of the time.
An HTML table is more than a technique to throw a bar around some text; it can also be used to finely control the appearance of your entire page.
To start, we’ll create a table that is about the most basic table there is.
| This is the header |
|---|
| This is the data |
The table does not use any of the attributes that one can use with the table, row, header, or data definitions. It uses the defaults for each. Now, to create a table that is a little more interesting, lets add a border to the table and a little spacing:
| This is the header |
|---|
| This is the data |
A table with only one column is helpful, but lets add a second column and increase the width of the table to be equal to 60% of the window width, regardless of whatever the width is:
| This is the header | The Second header |
|---|---|
| This is the data | The Second set of data |
I don’t know about all of you, but I like a little color so lets add color to the whole table:
| This is the header | The Second header |
|---|---|
| This is the data | The Second set of data |
This might be a bit too much color. Why don’t we change the table to a nice gray background, and the headers to the bright red color:
| This is the header | The Second header |
|---|---|
| This is the data | The Second set of data |
Now, if you are using Internet Explorer 3.x you will be able to see that the following table actually uses an image as the background in the headers. If you are using Netscape or other table compliant browser, you will continue to see the red background color.
| This is the header | The Second header |
|---|---|
| This is the data | The Second set of data |
Now, let’s try making the table header stretch across both columns with the “colspan” attribute:
| This is the header | |
|---|---|
| This is the data | The Second set of data |
You can also make data occupy more than one row as the next table demonstrates:
| This is the header | |
|---|---|
| This is the big data | The Second set of data |
| Third set of data | |
You can also color the borders of the table:
| This is the header | |
|---|---|
| This is the big data | The Second set of data |
| Third set of data | |
Maybe we’ll say we can…and don’t. Finally, you can nest tables within tables:
|
||
|---|---|---|
| This is the big data | The Second set of data | |
| Third set of data | ||
You can use tables to format your entire HTML page. The main YASD page makes use of table rowspan, background colors and images, and nested tables to present a page that combines the effective use of white space and content (at least, we hope it’s effective). Most of the pages located on this site use tables to manage the menu bar that is located at the top of the page as shown in the Samples main page.
Tables can be used to format a group of objects as shown at the GotaSee site. Tables can also be used as a sidebar in an online article, as shown in Page1-4 of the City Zoo Scenario.
Tables can even be used to frame a graphic as shown in the Main page. Look at the Finalist graphic at the bottom of the page and you will see an example of this technique.
All in all, the most useful HTML tag after those for images and hypertext links, is the table.