Page 1   Page 2   Page 3   Page 4   Page 5   Page 6  

Working with Cell Height.

Let’s build a new Table with three (3) Rows and three (3) Columns; we’ll make it all Absolute in size by using pixels for the Height and Width. Also, I’m going to introduce you to another two-sided Table flag that can be quite useful at times. It’s called the Table Heading flag, and it is written this way: . This flag has one very important feature to remember, all the items entered into this area will be CENTERED and the Text will be BOLD!

Copy the Table code in Figure 14 and we’ll have some fun with this.

Think first! Before you start typing all of the text in Figure 14, how much of it can be copied from the first Table you wrote? Then, after you create the first line of code, copy it to the second and third lines. After you have created the first complete set, copy it two more times. The only thing you’ll have to do is change the positions of the Xs and 0s in the middle section.

Figure 14 Table Source Code for the Second Table.

When you are finished, re-save your work and view in the browser. What do you see?

Does your Table look like a Tic-Tac-Toe board? Well it should! Before I show you my example I want to add a colored background to some of the cells. Read on and let’s see what we can do to our Table.

Coloring a Table

Would you like to color your Table? Or perhaps color a certain cell? It’s not hard; just use the BGCOLOR attribute in the Table, Row or Data Cell flag. To color, the Table, or the Row or the individual Data cell respectively.

The same BGCOLOR information covered in my chapter on Color for Web pages works as well for Tables. In fact, Tables are quite transparent in nature; whatever happens to be behind them will show through the Table. If the page is colored, then the Table is colored… unless you decide to color the Table differently. Please note: If you color a Table Data Cell very dark, any text in that cell could be rendered impossible to see! You’ll have to change the color of the Text as well.

Let’s make a few changes to the Table we just created; follow Figure 15 for a guide. I want to color all the boxes that have an X in them to silver. This is the new code for those cells:

< TH BGCOLOR=silver WIDTH=80 HEIGHT=80 > X < /TH >

Figure 15 Adjusted code to add the BGCOLOR tags.

Figure 16 Results of new BGCOLOR tags.

Figure 16a
Play Tic-Tac-Toe?

X	0	X
0	X	0
X	0	X

OK, so make me proud! Does your Table look anything like the one in Figure 16? If so, congratulations! I’m so proud of you!!

There’s more that I could teach you about Tables, but I feel that should be in a class devoted to the subject of Web page design. These pages were to accomplish introducing you to the subject of Basic Web page Tables, and I believe it does just that. Perhaps I could leave you with one more thing to make your Table nicer. What about a Caption for the Table? Fairly easy for this two-sided Table flag. Just under the < TABLE… > flag enter insert a line and type the following line of code:

< CAPTION ALIGN="bottom" >
Play Tic-Tac-Toe? < /CAPTION >

If you prefer the Caption to be at the top, don’t type ALIGN="bottom", it defaults to the top all by itself.

In a more advanced class you could learn how to make Tables look like a newspaper, flyer or a graph or chart, the possibilities are almost endless!

Page 1   Page 2   Page 3   Page 4   Page 5   Page 6   TOP

Back to LAB     Back to TOC