HTML标签语义化——为你的table加上标题和摘要
之前在blog中也用到过一些table，总想为table加上标题，但是在Google搜索“table 标题”的时候，结果都不是自己想要的。于是也就放在了一边。
今天学习HTML标签语义化的时候，发现原来table是有标题和摘要的。其标题为：<caption>标签，摘要则用summary属性表示。
XHTML中的表格不应用来布局。然而如果是为了标记列表的数据，就应该使用表格了。<th>为表格标题，属性summar为摘要，<caption>标签为首部说明，<thead>标签为表格头部，<tbody>标签为表格主体内容，<tfoot>标签为表格尾部。
<caption> 元素定义了一个表格标题。<caption> 标签必须紧跟在 <table> 标签之后，每个表格仅能规定一个 caption。通常，caption 会位于表格之上居中的位置，但是可以通过使用CSS来控制。
下面的例子更改自w3schoolhttp://www.w3school.com.cn/tiy/t.asp?f=hdom_table_caption，通过js来动态创建table的caption:
<head>
<script type="text/javascript">
function setCaption() {
if(getCaption() == undefined){
var caption = document.createElement("caption");
caption.innerHTML="Table caption";
document.getElementById('table1').appendChild(caption);
}
}
function getCaption() {
return document.getElementById("table1").caption;
}
</script>
</head>
<body>
<table id="table1" border="1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" onclick=setCaption() value="Set table caption" />
</body>
</html>
summary 属性规定表格内容的摘要。
summary 属性不会对普通浏览器中产生任何视觉变化。
屏幕阅读器可以利用该属性。
由于不会在普通浏览器中产生任何视觉效果，很难判断浏览器是否支持 summary 属性。
关于table使用了caption和summary的演示效果大家可以参考http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm，例子非常棒。
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2009/12/17/1673/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
我现在有良好的学习环境了，以后跟我们开发人员多学点。 :grin:
[回复]