6 replies [Last post]
whittaker007
Offline
newbie
Last seen: 15 years 49 weeks ago
Joined: 2003-12-04
Posts: 5
Points: 0

Hi there,

I am laying out my site with tables and find that I almost always mark up a new <table> tag as such:

<table width="100%" border="0" cellpadding="0" cellspacing="0">

So I thought I would save repeating my markup by using CSS to set my table defaults like this:

table {
width: 100%;
border: 0px;
cellpadding: 0px;
cellspacing: 0px;
}

However this seems to cause cell padding or spacing to appear and break the layout. I have tried setting every padding and border related attribute to 0px and nothing fixes the problem except to retype those tags for each table.

Is there a better way, or a fix for this?

Thanks,

Scott

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Using CSS to redefine the &lt;table&gt; tag

Hi whittaker007,
Firstly remove "cellspacing and cellpadding" as they are not part of CSS.
You should be able replace them with padding and margin.
table, table td{border:none; padding:0; margin:0;}

Hope that helps

whittaker007
Offline
newbie
Last seen: 15 years 49 weeks ago
Joined: 2003-12-04
Posts: 5
Points: 0

Using CSS to redefine the &lt;table&gt; tag

Hi Tony,

Unfortunately that doesn't seem to help. After playing with different values it seems to me that:

1. padding (any value) is ignored when applied to a TABLE tag via CSS

2. margin (any value) is ignored when applied to a TD tag via CSS

In any case I seem to get a minimum 1 pixel border space around each TABLE and TD which breaks layout and adjacent cells and nested tables each contribute a gap so some gaps seem larger than others.

I am using Internet Explorer 6 and Netscape Navigator 6.1 on Windows XP Home. The browsers render the gap errors slightly differently but both display correctly if I ust the inline table tags:

<table width="100%" border="0" cellpadding="0" cellspacing="0">

DreamWeaver 2004 MX's Browser compatability test reports no compatability errors on the page.

I'm stumped.

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 1 day ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Using CSS to redefine the &lt;table&gt; tag

Try this

table { border-collapse: collapse; }

which is equiv to cellspacing="0".

From memory the cellpadding is the same as using padding: 0px;

Regards
Day

The only way to learn is to do it yourself

whittaker007
Offline
newbie
Last seen: 15 years 49 weeks ago
Joined: 2003-12-04
Posts: 5
Points: 0

Using CSS to redefine the &lt;table&gt; tag

Ahaaaa! Thanks a lot, that worked a treat!

whittaker007
Offline
newbie
Last seen: 15 years 49 weeks ago
Joined: 2003-12-04
Posts: 5
Points: 0

Using CSS to redefine the &lt;table&gt; tag

Ah crap, it works on IE6 but not NN6.1!

I'm using:

table {
width:100%;
}

table, table td {
border:none;
border-collapse: collapse;
margin:0px;
padding:0px;
}

whittaker007
Offline
newbie
Last seen: 15 years 49 weeks ago
Joined: 2003-12-04
Posts: 5
Points: 0

Got it!

I've got a solution to my problem! The spaces were being caused by the images in the table being raised to the height of the text baseline at the size of the current font - so if I had a large font the gaps would be even larger.

The solution was to change all images in tables to block elements:

td img { display: block }

This can cause other problems with images but suits my needs so far. Thanks for your help!