TINY TABLE TIDBITS

Written by: FLO

December's questions were:

  1. Question #1: Is there anything else we can do with the <tr> tag? All I use it for is when I have more than one row in a table.


  2. Question #2: What does the <th> tag do? How can I use it for table art?


  3. BONUS: Playing with Unordered Lists





1. THE <TR> TAG
Q: I've heard that we can use the <tr> tag in table art, but I don't see how. Isn't it used just to define a row of cells in a table?

A: That's the usual way people use this tag. But a few people use it in their table art to create wonderful effects.

By using different colors and diferent transparencies in the row and cell tags, along with a bgcolor for the table, you can get 3 or more colors instead of the two colors we obtain using the bgcolor and gradcolors only in the cell tags:

Table: bgcolor=0000ff.
Row: bgcolor=0000ff gradcolor=white gradangle=90 transparency=50%.
Cell: bgcolor=ff0000 gradcolor=ffff00 gradangle=90 transparency70%.
Font: color=ffff00 transparency=75% (65% for the last two letters).

T R A N S P A R E N T


Here's the same table with the cell gradangle at -90:

T R A N S P A R E N T


As you can see, changing the gradangle wiped out the 3-color effect and made the blue look dull. Getting the colors blended so the result is pleasing to your eye may take quite a bit of experimentation. But if you're persistent, you can come up with some lovely effects.




1. THE <TH> TAG
Q: What's this <th> tag do?

A: It's a special table cell tag we usually use to align headers and titles for tables. But as you know, we table artists invent other creative uses for table tags. This <th> tag automatically centers anything you put in it, thus you can eliminate the align="center" attribute. It also automatically makes text bold, so there's another tag you can eliminate. Like a <td> tag, the <th> tag needs to be closed.

Q: OK, I think I understand that. But what else besides text would I use in a header tag?

A: Stop thinking of this tag in association with text. Think of using it to center images and audioscopes in your table. You can line up a bunch of images or scopes side by side, as long as their combined width doesn't exceed that of the table, or stack them vertically in the table. Try the <th></th> tags, you'll like them!




3. PLAYING WITH UNORDERED Lists
A: Ever heard of Unordered or Bulleted Lists?

Q: Sure, that kind of list makes dots in front of each list item instead of numbering them. But I don't understand how we can make table art out of some lists!

A: If readers do not know what unordered lists are, you can find out here what people usually do with Unordered or Bulleted Lists. But these special list symbols can be used in table art! Various computer browsers will "see" or "not see" these the way MSNTV's browser does. I've only begun to scratch the surface of what can be done here. Credit for discovering the coloring and sizing technique apparently goes to Jim Davis (a.k.a. Lefty).



























For more examples, click on the links below:


  1. Unordered List Play 1

  2. Unordered List Play 2

  3. Unordered List Play 3





Question: How can we use CSS in table art?
(This will also include transparency)

Tune in next month, February, 2004, for the answer!

Back to the Tribune