Table attributes deprecated

On W3schools.com I read the following about the table atributes:

align - Not supported in HTML5. Deprecated in HTML 4.01.
bgcolor - Not supported in HTML5. Deprecated in HTML 4.01.
cellpadding - Not supported in HTML5.
cellspacing - Not supported in HTML5.
width - Not supported in HTML5.

What does this all mean? Does this mean that if I build my website using <!DOCTYPE html> (HTML5) that these attributes won’t work?

It means that CSS now provides that information about the table - allowing you to specify different values for different types and sizes of device on which the page can be viewed.

Deprecated means obsolete and no longer to be used and that support for the command may be completely removed at any time.

So in 1997 when HTML 4 was released people were advised to stop using those attributes and to use CSS instead. At this point you have had 16 years to replace those attributes so there are no real excuses for still using them.

They will still work with <!DOCTYPE html> (HTML 2+) but only for as long as browsers continue to support HTML 3.2 and earlier versions of HTML.

Ok I get it. The thing is, I have a table layout using cellpadding and cellspacing. But I can’t seem to get the same layout when using css instead of these attributes. And I want the layout to be just like when I’m using cellpadding and cellspacing. That’s my problem!

Post an example of what you have, and maybe a screen shot of how you want it to look. If you do post code, please make it a readily usable example, as outlined here: http://www.sitepoint.com/forums/showthread.php?1041498-Forum-Posting-Basics

Also, don’t panic! A lot of browsers will do their best to interpret what they think you meant, so although it is not technically correct to use those attributes, it’s unlikely that (m)any browsers will choke on it and not display the table as you intended.

But, as Ralph says, you should be able to recreate any HTML table attributes in CSS, so let us know what bit you’re having trouble with.

My websites are offline at the moment so I cannot show you the difference on a webpage. But I can show you it with pics.

The code that I’ve used for years is the following:


<table bgcolor="#006633" cellspacing="1" cellpadding="2" border="0" width="150">
<tr bgcolor="#006633"><td align="center">Header</td></tr>
<tr><td bgcolor="#ffffcc" align="left">Body 1<br /><br /><br /></td></tr>
<tr><td bgcolor="#ffffcc" align="left">Body 2<br /><br /><br /></td></tr>
</table>

This code produces the table you guys see in the pic named “Example attr.gif”.

I’ve changed the table attributes into css attributes in the following code:


<table bgcolor="#006633" border="0" style="width:150px;border-spacing:1px 1px 1px 1px;padding: 2px 2px 2px 2px;">
<tr bgcolor="#006633"><td align="center">Header</td></tr>
<tr><td bgcolor="#ffffcc" align="left">Body 1<br /><br /><br /></td></tr>
<tr><td bgcolor="#ffffcc" align="left">Body 2<br /><br /><br /></td></tr>
</table>

But this gives another layout, see de pic “Example css.gif”.

This will do the job nicely:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

table {width: 150px; border-collapse: collapse;}
th, td {padding: 2px; border: 1px solid #006633;}
th {background: #006633; font-weight: normal;}
td {background: #ffffcc;}

</style>
</head>
<body>

<table>
<tr><th>Header</th></tr>
<tr><td>Body 1<br /><br /><br /></td></tr>
<tr><td>Body 2<br /><br /><br /></td></tr>
</table>
			
</body>
</html>

Thanks! It works perfectly!