Page Design Using Tables - Part 2

Cellpadding and Spacing

Padding is the space within each cell, and Spacing is the space between cell borders. If borders or cell background colors are not used, then cellspacing looks same as cellpadding: <table cellpadding="5" cellspacing ="10">

Alignment

All the elements inside tables can be aligned. To align a whole table in the center of a page, place it between <center> and </center> tags. Another way is to use <div align="center"> and </div>.

Every cell can be aligned in a similar way. Both the <tr> and <td> tags can be defined with align left, right or center. Set the vertical alignment of cell objects using the valign attributes of top, middle and bottom: <td valign="top">

Empty Cells

Some browsers will try to collapse empty table cells. Two ways around this is to place a non-breaking space or a transparent gif spacer inside the cell.

Designing your Tables

The best way to see how tables control layout is to take a look at the HTML of one or two pages. You can find the source code for a page by using the 'View Source' feature on your browser. Turn the table borders on so you can see what's going on behind the scenes.

While developing your tables it is useful to leave your table borders turned on: <table border="1">. This helps you get a feel for where things are on your page. Use a one pixel border as it will cause less movement when you turn the border off once you have finished.