CSS and tables

Cellpadding question

[DerekH]

Hi
I normally live over at Forum3, but I want to come here and profess my ignorance on something quite trivial.
Although I'm pretty happy with CSS, I want to use it to get rid of the <table cellpadding=0 cellspacing = 0> bloat in my HTML.

I want to retain the table so I'm compatible with old browsers, though I'm sure that some of you won't like that <grin>

Now if I remove the cellpadding and cellspacing, the table defaults to a small amount of white space round the cells, at least in all the browsers I've viewed it on. I've tried setting margin, border and padding to zero for <table>, <tr> and <td> in CSS, but nothing seems to remove the white space.

Can anyone help?
Thanks!
DerekH

[Lance]

Try adding:

border-collapse: collapse;

as well.

[DerekH]

Thanks Lance - that cures it for Safari, but not for IE5/Mac

But it's a start!
DerekH

[Lance]

Hmmm...

Okay, how about border: 0px; (on the cells) too?

[DerekH]

Thanks Lance.
I already tried that <wry grin>

But thanks for taking the time to reply - it's appreciated.
DerekH

[Lance]

Ah HA!

Here you go. There was one more parameter that I guess I never bothered with because it only affects text.

table
{
border-collapse: collapse;
}
td
{
margin: 0px;
padding: 0px;
line-height: 1em;
}

[encyclo]

It's not for nothing that the cellspacing and cellpadding attributes are still present in the strict DTDs and even XHTML 1.1: there is no CSS equivalent which fully corresponds to those attributes. So, sadly, you're stuck with them. :)

[DerekH]

encyclo - thanks for pointing out the obvious. OK, I'm stuck with them...

Though I would have thought a <td> was just right for the CSS box model!

DerekH

[createErrorMsg]

Though I would have thought a <td> was just right for the CSS box model!

How so?

[DerekH]

I probably wasn't at all clear!
What I meant was that the table cell seems to be the one feature of HTML that already has the padding and margin that CSS gives to any HTML element. I would have thought that the table would therefore be the HTML construct most readily controlled in CSS, though as encyclo said, the cellpadding and cellspacing don't seem to have a complete CSS analogue...

Then again, re-reading what I've just typed, I'm not sure I've been much clearer this time!
But in all other aspects of mixing tables and CSS I've had 100% success, so I'm not too worried <grin>
DerekH

[pageoneresults]

Could I ask a question? When does cellspacing come into play? I've been using CSS on tables for a couple of years now and I've not had one instance where I had to have cellspacing on a table. I usually end up with this simple code for my tables...

table, td{
border-collapse:collapse;
}
table{
border:1px solid #777;
}
td{
border:1px solid #ccc;
}

And then from there I have additional classes that control width, text alignment and vertical alignment...

.tac{
text-align:center;
}
.tal{
text-align:left;
}
.tar{
text-align:right;
}
.vab{
vertical-align:bottom;
}
.vam{
vertical-align:middle;
}
.vat{
vertical-align:top;
}

With the above CSS, I've been able to effectively remove all attributes from

<table>

and

<td>

tags.

P.S. I've also found that there is always a way to reproduce something via CSS. And, there are different ways to go about it.

[Lance]

If you're just trying to get rid of spacing and padding, the CSS example I posted a few messages back does that. No need for the "bloat".

cellPadding and cellSpacing do still exist, but you sure don't need them if you're styling with CSS.

Perhaps you could post an excerpt of the code you're having trouble with.

[pageoneresults]

No need for the "bloat".

What "bloat" are we referring to?

[SuzyUK]

I normally live over at Forum3,

DerekH - Welcome to CSS then ;)

When does cellspacing come into play?

For IE5/Mac unfortunately ;) It doesn't support border-collapse [macedition.com] .. even with the cellspacing explicitly set to zero it will still give "double" borders although they show as 2px borders without a gap..

cellpadding can be safely replaced with padding on the <td>
e.g. td {padding: 5px;}

Lance as far as I can see the line-height doesn't make any difference, padding on the cell would do the same and it works the same way that cellpadding would work

p1r it's also not necessary to set "border-collapse" on the td.. it applies only to table elements [w3.org]

my example table code would be if you want IE/Mac to at least partly behave!

table{
border: 1px solid #777;
border-collapse: collapse;
}

td {
border:1px solid #ccc;
padding: 5px;
}

<table cellspacing="0">
<tr>
<td>some stuff</td><td>some stuff</td>
etc...

Suzy

[Lance]

No need for the "bloat".

What "bloat" are we referring to?

I was referring to this line from the original message in this thread:

I want to use it to get rid of the <table cellpadding=0 cellspacing = 0> bloat in my HTML.

Suzy:

In this example (that I was playing around with earlier):

<style>
table
{
border-collapse: collapse;
}
td
{
border: 1px #000 solid;
margin: 0px;
padding: 0px;
line-height: 1em;
}
</style>
<table>
 <tr>
 <td>One</td>
 <td>Two</td>
 <td>Three</td>
 </tr>
 <tr>
 <td>One</td>
 <td>Two</td>
 <td>Three</td>
 </tr>
</table>

Setting line-height to 1em did remove a small amount of vertical spacing above and below the text, decreasing the space to the border. This was true on both IE6/Win and FF.

DerekH
Yes, without the use of border-collapse there is no way to remove cellSpacing. cellPadding on the other hand is removed with padding: 0, so at least you've got it half way licked.