Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
Password Reminder
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old August 20th, 2003, 12:42 PM
Authorized User
Join Date: Jun 2003
Location: , , .
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; }
Reply With Quote
  #2 (permalink)  
Old August 21st, 2003, 01:41 AM
Registered User
Join Date: Aug 2003
Location: Aachen, , Germany.
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 :)

Reply With Quote
  #3 (permalink)  
Old September 18th, 2003, 08:25 PM
Registered User
Join Date: Sep 2003
Location: SSeattle, WA, USA.
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
Reply With Quote

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

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

All times are GMT -4. The time now is 11:26 PM.

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