How do i set table cellspacing with CSS

They have: 24 posts

Joined: Feb 2002

How do I specify table cellspacing in CSS?

For instance,

Would equal to

Renegade's picture

He has: 3,022 posts

Joined: Oct 2002

I'm not sure you can do that with CSS...

Busy's picture

He has: 6,151 posts

Joined: May 2001

you can use a combination of margin:? and padding:? but your better off using a style sheet and setting the class or id in the table. note this isn't an universal method, the good old cellspacing is still best method.

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

http://lists.w3.org/Archives/Public/www-html/1997Oct/0069.html this isn't exactly a tutorial, but it does map between html and css.

Learning how to use contextual declarations will really help, as well.

Anyway, for cellpadding="10", use td {padding: 10px;} and for cellspacing="3", use td { margin: 3px; }, so for your example, you'd have to put the style="margin: 1px;" in every TD, best to put it in the stylesheet instead, where you can just do it once:

td { margin: 1px; }

Note: you'll have to likely use border-collapse: collapse; to get accurate results.

They have: 24 posts

Joined: Feb 2002

Why doesn't the following:

TABLE {
border-collapse: collapse;
background-color: #111111;
margin: 1px;
}

look like:

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

Because. you. need. to. set. the. style. for. the. td. element., not. the table. element.

They have: 24 posts

Joined: Feb 2002

Sill,

TABLE {
border-collapse: collapse;
background-color: #111111;
}

/* The above two should stay wit table */

TD {
margin: 1px;
}

doesn't work. I'm running out of hair to pull Confused

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

Do you have some code to offer? Preferably an url. Let's see what else is happening. Also, what browsers are having difficulty? All of them?

They have: 24 posts

Joined: Feb 2002

I don't have a URL because it is a template for my PHP class.

I fixed the problem by dumping cellspacing and used borders instead.
TABLE {
border-collapse: collapse;
}

TD, TH {
border-bottom: 1px solid #111111;
border-left: 1px solid #111111;
border-right: 1px solid #111111;
}

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

Sounds like a great solution. Glad you solved it!

Renegade's picture

He has: 3,022 posts

Joined: Oct 2002

what does border-collapse: collapse; do?

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

It collapses the borders.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.