TINY TABLE TIDBITS

Written by: FLO

September's question was: How is this table put together?

And the answer is - TA-DAH ~TABLING VERTICALLY!



There are 2 basic ways to form a complicated table:

  1. HORIZONTALLY: This is the way many people table. Use one row with several cells, then stack another row with several cells beneath it and so on.


  2. VERTICALLY: Make one narrow table with several rows of only 1-2 cells in each row. Make another narrow table the same way. And so on. You will end up with a long string of tables underneath each other. Not especially interesting.


Here's the trick to make this bunch of tall skinny tables into a much more interesting piece of table art.

Start with a container table. Then each narrow table is put into one cell of the container table straight across in a row.

THE TABLE ABOVE consists of one container table of one row with 5 cells. Each cell contains one vertical table. Each cell of the container table has valign="middle" in the tag. This (vertically) aligns the middle of each vertical table with the middles of those beside it.


The basic structure for the table is as follows:

<table border="0"> (container)
<tr> (This tag is not really necessary, as there is only one row)
<td valign="middle"> (cell #1)
<table> (inner table #1 and its contents) </table>
</td> (Close cell #1)

<td valign="middle"> (cell #2)
<table> (inner table #2 and its contents) </table>
</td> (Close cell #2)

<td valign="middle"> (cell #3)
<table> (inner table #3 and its contents) </table>
</td> (Close cell #3)

<td valign="middle"> (cell #4)
<table> (inner table #4 and its contents) </table>
</td> (Close cell #4)

<td valign="middle"> (cell #5)
<table> (inner table #5 and its contents) </table>
</td> (Close cell #5)
</tr> </table> (Close container table)

ATTRIBUTES:

BORDERS: Zero (0) for the container. You may or may not want borders of the inner tables to show.

CELLSPACING & CELLPADDING: Zero for the container table, usually. Can vary for the inner tables.

WIDTHS: For each inner table, you will need to specify its width, then add the widths of each inner table to make up the width of the container table.

HEIGHTS: Specify for the first cell in each row of the inner tables. The container table will stretch itself around the tallest of the inner tables.

BGCOLOR: Depends. Most likely you'll want the container table's bgcolor to be the same as the page bgcolor. Remember to include the bgcolors of the inner tables' cells.

VALIGN: Valign="middle" (or "top" or "bottom") - add to EACH CELL of the container table.


So try your hand at Vertical Tabling
Show us the results in the
Interface Newsgroup!



Questions:
  1. How can you make a table into a link that'll work for both
    computer and MSNTV viewers?


  2. When do we use the table attribute "bordercolor"?

Tune in next month, November, for the answer!


Back to the Tribune

Counted
1632