Fancy Tables

1. Pretty Table Borders Using Simple Nested Tables
2. Border Around Table and Each Cell
3. Ultimate Table Challenge

---

Pretty Table Borders Using Simple Nested Tables

To acheive this border effect, the trick is to nest tables.

The first table's attributes are:

cellpadding="1" (use higher number for thicker border)
cellspacing="0"
bgcolor="#C4D9FF" (this is the color your border will be)
width="100%"
border="0"

The second table's attributes are:

cellpadding="n" (any number you wish)
cellspacing="0"
bgcolor="#E8F0FF" (must be different from 1st table's bgcolor)
width="100%"
border="0"
align="center"

---

Border Around Table and Each Cell

To Create a nice border effect within and around a table:

First Table's Attributes:
cellpadding="0"
cellspacing="0"
border="0"
width="n" (% or pixel)
bgcolor="hex" (this will be the border color)
* You only need one cell in the first table. *

Second Table's Attributes:
cellspacing="1" (use larger number for thicker border)
border="0"
width="100%"
Here's the key: Set each td's bgcolor to a different color than the first table.

---

Ultimate Table Challenge

Remember paper forms? Unlike web forms, the columns in one row are usually independent of the columns in the other rows. To mimic paper forms on the web, use nested tables.