Is it ok to use cellpadding="2" cellspacing="2" in <table>?

Question

Is it ok to use cellpadding="2" cellspacing="2" in <table>? Or are these not recommended by W3C and not right according to web standards?

What are alternatives in CSS?

Update: and is it also ok to use <td align="right" valign="top">?

My question is in terms of separation of content and presentation and W3C recommendations.

Update: According to this chart in <table> only align and bgcolor are not allowed in Strict version. So is it ok to allow other properties of <table>?

alt text http://shup.com/Shup/293811/11021055643-My-Desktop.png

Answer 1

No, the attributes are not officially deprecated but they are generally frowned upon, since you should use CSS for presentation.

For cellpadding you can easily replace it with padding in CSS:

table.classname td {
  padding: 4px;
}

For cellspacing, first decide if it's really necessary. If you don't have any borders on the table cells, or you don't want spacing between the borders of each cell then it isn't. (Personally I think cell spacing looks bad design-wise, but it may be useful in some circumstances.)

It's quite nice to do this:

table {
  border-collapse: collapse;
}

Then each table cell shares the border with its neighbour, meaning you can add, say, 1px top and bottom borders and you just get 1px separating each row.

To separate borders, however, you can use this CSS, though it probably doesn't work in IE6.

table.data td {
  border-collapse: separate;
  border-spacing: 4px;
}

Answer 2

While it's technically fine, it is strongly not recommended.

Imagine if your site had many tables across many pages and you wanted to change the padding or the spacing for one reason or another. Well, you would have to go through your entire site and make the changes.

Or you can use CSS and change your entire site by changing a line of code in one location. This is not only far more efficient, but its easier, helps you avoid mistakes, and keeps you consistent.

<style type="text/css">
    table td { padding:10px; margin:10px; }
</style>

If you want to use some tables with padding and margins and others without, you can create classes in your CSS by adding a "." before a name of your choice:

<style type="text/css">
    .myTable td { padding:10px; margin:10px; }
</style>
<table class="myTable> etc...

Note that class names are case sensitive. There are also many other attributes you can have fun with like border, background-color, etc...

In short, while cell-spacing and cell-padding attributes are not deprecated, its far better to use CSS for ease and consistency across your site.

Answer 3

<style type="text/css">
table.padded-table td { 
    padding:10px; 
    }
</style>