TINY TABLE TIDBITS

Written by: FLO
November's two questions were:

  1. How can we table some "different" tree ornaments
    or other fancy stuff for the holidays?


  2. How can I cut down on file size when I have a lot of cells in a table?


  3. Bonus: Playing with Borders




1. TABLING TREE ORNAMENTS
I'd like to make my own ornaments this year, table them, instead of using other people's images.

This can be done in at least 4 different ways, all involving tables.

  1. Use gradtables.


  2. Use buttons and put them in a table structure.


  3. Put scopes in a table stucture.


  4. Use a combination of 2 or all of the above.


EXAMPLES:

Flo's Ornaments 2002 These were tabled, then Glenda took screen shots of each, enabling me to put them all on one page as jpgs.

Paulie's Gallery of Button Ornaments Paulie, a.k.a. The Button King, has made many ornaments using buttons of all kinds. You can see the possibilities by looking through his great collection.




2. SAVING FILE SIZE
If you want to make a table that has a lot of rows with a lot of cells in each row, it's not necessary to write out the heights and widths for each of those cells!

  1. For the row of cells across the top, it is necessary to specify the widths. But you don't have to use the width attribute in any of the other cells below these top cells.


  2. For the first cell in each row, it is necessary to specify the heights. Since this first cell controls the heights of all the other cells in its row, you can leave out the height attribute from these other cells in each row.


Now you can see how to save file size by following these two rules. The table below is 200x200 pixels wide and each cell is 10x10 pixels. Go to this page for the codes.




3. PLAYING WITH BORDERS
Borders can play an important part in the effects and appearance of a table on a webpage. The border attribute can be set at 0 or at 1 to "anything" pixels. Borders can be plain or fancy. Tables with visible borders can be nested inside each other, too, for interesting effects. Some people use images as the table background to make interesting borders and frames around other images. From The Professor, I got the idea of very wide borders containing a very small cell. So check out the pages below for inspiration:

  1. Nested Tables with Borders

  2. Tables with Very Wide Borders & Gradangle Changes

  3. Tables with Wide Inverted Borders & Gradangle Changes

  4. Nested Tables with Alternating Borders & Gradangle Changes




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.

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

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

Back to the Tribune