Re: Reproducing table attributes with CSS

>>>>
How do you reproduce table attributes like border, cellspacing and
cellpadding with CSS?
<<<<

Create a simple 4 cell table. Put some text in each table so things will
show up for this example. 

Now, what if you wanted to do this:

You want all the tables (TABLE) in your page to have a red border, with
each table data cell (TD) with solid lines between each cell that is
colored navy, and a white background for each table data cell.

In an embedded STYLE element in the HEAD of the page put the following:

body (
color: black;
background-color: white;
}

table { 
border: red medium solid; 
background-color: navy 
}

td { 
border: navy thin solid; 
padding: 10px;
background-color: white; }

Some points to consider:

Setting the TABLE background-color to the same color of the TD border
makes the lines between the cells solid. Remove the TABLE
background-color CSS declaration to see what I mean.

Setting the TD background-color to white overrides the inherited
background-color of the table. Otherwise, black text on a navy
background ain't too readable (grin).

Setting the padding does exactly what setting the cellpadding attribute
for a TABLE element in HTML does for a table, but with the ability to
control not only the overall padding (as in this example) but the
padding for left, right, top and bottom.

You could, remove just the border declaration for the TD elements on the
page, but using the border allows you to set the thickness of the
borders. 

For instance, remove the TD border CSS declaration. Notice how the lines
between the cells becomes thinner. Then add the TD border CSS
declaration back to the page, and work through setting the width of the
border to thin, then medium, then thick. For more precise control, you
can even specify pixels, for instance 10px, or 20px or 3px.

Check out other properties instead of solid. Two popular ones would be
inset and outset. Then try the following:

dotted
dashed
double
groove
ridge

Of course, what happens with tables is that we don't want to have every
table and the cells to have this or that attribute, then you have to use
something like class for your variations. 

However, what makes CSS so neat is that if the customer comes in and
says that all announcements need to have red, inset borders instead of
navy, solid borders, and whats them to be 20px in width instead of 3px,
one change to a linked style sheet and it is done.

On note: of these, I've found the results to be consistent for solid,
inset and outset.

enjoy.



-- 


Jim Tom Polk -:- jtpolk(at)texas.net -:- http://camalott.com/~jtpolk/	
	''You might as well fall flat on your face as 
	  lean over too far backwards.''      --James Thurber--
   "The Universe is run by the complex interweaving of three 
          elements: energy, matter and enlightened self-interest." 
 		- G'Kar  "Survivors"                                  

HTML: hwg-basics mailing list archives, maintained by Webmasters @ IWA