Wrox Programmer Forums
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
Old August 20th, 2003, 12:42 PM
Authorized User
Join Date: Jun 2003
Posts: 29
Thanks: 0
Thanked 0 Times in 0 Posts
Default CSS Table Definitions


I have the following code:

<table border="0" cellspacing="1" cellpadding="2" bgcolor="#2B5178" width="580">

I'd like to shorten it down to:

<table class="myclass" width="580">

The problem I have when I try to define this style is that it doesn't seem to react to my cellspacing definition. The background color takes, as does the padding, but the cell spacing, which normally makes it look like there is a 1px border around each cell, is too fat. It appears to be about 2-3 pixels wide, but it is the right color (the background color I specified).

The definition I used for my style is below, what can I change to make this work the way it works without styles?

.myclass { background-color:#2B5178; cell-spacing:1; cell-padding:2; }
Old August 21st, 2003, 01:41 AM
Registered User
Join Date: Aug 2003
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts

Hi pjmair,

I am not quite sure what you intended the table to look like as you are writing about borders without specifying one.

However, you might try the following:

- always use length units in CSS when attributing values to margins, paddings, widths, heights,...
     wrong: .myclass { padding: 2;}
     correct: .myclass { padding: 2px;}

- there are no attributes cell-spacing and cell-padding in CSS.
  Use border-spacing and padding instead. Unfortunately the border-spacing attribute will not work in Internet Explorer though, but as you do not specify any border, setting the padding to the desired value will suffice. Keep in mind that the padding-attribute will put a padding around the specified class or element, i.e. if you define padding of say 5px for a table, there will be a padding of 5px around the whole table. To use padding for table cells you have to define it for the td-element.

If you would like to have borders around each table cell you must define these for the td-elements rather than for the table-element:

table { border: 1px solid #00CC00; } draws a green border around the whole table

td { border: 1px solid #00CC00; } draws a green border around each cell

Now if you do not want any spaces between the borders of the table cells you can use the attribute border-collapse for the table:
table { border: 1px solid #00CC00; border-collapse: collapse; }

To sum it up, your class should work fine using this expression:

.myclass { width: 580px; background-color:#2B5178; border-collapse: collapse; }

td { padding: 2px; }

This expression will result in a table of width 580px with a blueish background. There will be no space between each table cell but the cells themselves have a padding of 2px.

Hope my explanation is not too confusing :)

Old September 18th, 2003, 08:25 PM
Registered User
Join Date: Sep 2003
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to chadlupkes Send a message via Yahoo to chadlupkes

Hi guys,

One thing I notice missing from the answer is that the CSS style change for td needs to be specific for .myclass. The way to specify that is:

.myclass {width: 580px; background-color: #2B5178; border-collapse: collapse;}
.myclass td {padding: 2px;}

Otherwise all of the table cells on the page will use the 'padding: 2px' setting instead of just tables with class="myclass".

This might be a duh, but I thought I'd mention it.


Chad Lupkes
[email protected]

Similar Threads
Thread Thread Starter Forum Replies Last Post
Scrolling table with CSS: Almost there! asearle XSLT 1 November 24th, 2007 10:13 AM
CSS for Table border. rupen CSS Cascading Style Sheets 2 March 29th, 2006 09:41 AM
CSS for Table cellspacing and cellpadding shurabhavesh CSS Cascading Style Sheets 1 March 17th, 2006 08:47 PM
what is table cellspacing equivalent in css? nerssi Javascript 1 September 19th, 2004 02:02 AM
format table borders through CSS amc Dreamweaver (all versions) 7 August 28th, 2004 10:19 AM

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.