Example

Using Tables to Enforce Alignment
by Agatha Taormina

 

Let's take a look at the inner workings of a table:

In the table below I have recreated the table from the Overview:Tables page.

  • I have added borders so you can see the table design
  • I have added a column to the right for commentary on what I did to make the table appear the way I wanted it to
table: the entire table
   
   

Here I decided that one table image would suffice to illustrate both the table and table border and another image would suffice for the cell and cell border.

So I had the first two center cells span the two groups of cells in the left column. I also centered the image so it would look like it was aligned to both definitions.
table border: the line around the entire table
cell: the smallest individual cross section of a table
   
   
cell border: the line around a particular table cell
table row:  a horizontal group of cells
   
   

For the entire table, I increased the cell padding, that is, the horizontal and vertical spaces between each cell.

I did this so that the definitions and the table images would be properly aligned.

I set the border to 0 in the original table so the visitor wouldn't see the behind the scenes finagling.
table column:  a vertical group of cells
   
   
cell spacing: the width of the border between table cells
   
   
table data: the content of a particular cell
data data
data data

cell padding: the amount of white space around the data within each cell
data data
data data
 

 

 

 

Web Design CenterReadings MenuTop of Page

Web Design Center Readings
Last Revised: January 28, 2002
©2001  Agatha Taormina