|
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:
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: 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. Show us the results in the Interface Newsgroup! Questions:
Tune in next month, November, for the answer!
Counted 1632 |