Neverside

Table in CSS

Hi,

How to horizontally center a table with CSS so that it's XHTML valid? Also, what are the CSS equivalents of cellspacing and cellpadding?

Set the TD element's padding attribute to simulate cellpadding. But in general, tables and CSS mix as well as water an oil.

td{
padding: 5px;
}

___________________

"Don't live your life by other people's quotes. Figure out life for yourself." ~Sum Wize Guy
CSS Tutorials
HTML Tutorials
Web Host Guide - Stuff you should know before choosing a web host.

Wouldn't you use CSS to format the table? I'm sure you can use cellpadding and cellspacing anyway, but to get something similar to what you want:

Code:

#wrapper
{
text-align: center;
}

table#tableid
{
margin: 0 auto;
text-align: left;
}

table#tableid tr td
{
margin: 1px;
padding: 1px;
}

That's just a guess coming from me. I havn't tried it myself, I've only just started using CSS for layouts.

You really shouldn't try to simulate cellpadding and cellspacing with CSS IMO... it has no benefits whatsoever and can yield unexpected results. However, for cellpadding, like someone said, use:

td { padding: [x]px; }

for cellspacing:

td { margin: [x]px; }

___________________

Learn HTML

Quote:

Originally posted by schmeg007
But in general, tables and CSS mix as well as water an oil.

Why is that?

For the centering issue, use this:

Code:

body {
text-align: center;
}

table {
text-align: left;
margin: 0 auto;
}

You can replace body with the container of the table.