在 html4 中创建 table 时经常会用到 cellspacing，cellpadding，align 等属性，比如如下的一个示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>table in html4</title> </head> <body> <table cellspacing="2" cellpadding="4" align="center" border="1" style="border: 1px solid black;border-collapse: collapse;"> <caption>html4 table</caption> <tr> <td>html4</td> <td>html4</td> <td>html4</td> </tr> <tr> <td>html4</td> <td>html4</td> <td>html4</td> </tr> </table> </body> </html>
效果则如下：
但当我们把 doctype 改为 html5 时，一些属性会被提示已经过期（obsolete）了。比如在 eclipse 的 html 编辑器中，就有如下一些警告提示：
比如说：“Attribute (align) is obsolete. Its use is discouraged in HTML5 documents.”
大意为：“属性（align）已经过期了，不鼓励在 html5 文档中使用。”
这些过期的属性值可以在 w3c 的网站上查到：
如果不使用这些过期的属性，警告自然也会消除，但效果上也会发生变化：
那么要达成这些效果，在 html5 中要怎么做呢？
下面给出 html5 中的等价写法：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" >
<title>table in html5</title>
<style>
/* cellspacing */
table { border-spacing: 2px; }
/* cellpadding */
th, td { padding: 4px; }
/* align (center) */
table { margin: 0 auto; }
</style>
</head>
<body>
<table border="1" style="border: 1px solid black;border-collapse: collapse;">
<caption>html5 table</caption>
<tr>
<td>html5</td>
<td>html5</td>
<td>html5</td>
</tr>
<tr>
<td>html5</td>
<td>html5</td>
<td>html5</td>
</tr>
</table>
</body>
</html>
具体的讲，
- cellspacing 可以用 border-spacing 代替。
- cellpadding 可以用 th 和 td 的 padding 代替。
- align=“center”则可以用 margin: auto 代替。