<body>
<table summary="a small table">
<caption>pro css technique author</caption> <!--caption：定义一个表格标题。其标签必须紧随 table 标签之后-->
<colgroup> <!--定义表格列的分组。通过此元素，您可以对列进行组合以便进行格式化-->
<col id="name" />
<col id="affiliation" />
<col id="url" />
<col id="role" />
</colgroup>
<thead>
<tr>
<!--scope 属性 -- 定义了行或列的表头
* scope -- 通过此属性可以定义行或列的表头
* 取值
o col -- 定义列表头
o row -- 定义行表头
o colgroup -- 定义列组的表头信息,是column group的缩写
o rowgroup -- 定义行组的表头信息,是row group的缩写
-->
<th scope="col">name</th>
<th scope="col">affiliation</th>
<th scope="col">url</th>
<th scope="col">role</th>
</tr>
</thead>
<tbody id="authors">
<tr>
<td scope="row">jeff croft</td>
<td>world online</td>
<td>http://pear.com</td>
<td>author</td>
</tr>
<tr>
<td scope="row">jeff croft</td>
<td>world online</td>
<td>http://pear.com</td>
<td>author</td>
</tr>
<tr>
<td scope="row">jeff croft</td>
<td>world online</td>
<td>http://pear.com</td>
<td>author</td>
</tr>
</tbody>
<tbody id="editors">
<tr>
<td scope="row">jeff croft</td>
<td>world online</td>
<td>http://pear.com</td>
<td>author</td>
</tr>
<tr>
<td scope="row">jeff croft</td>
<td>world online</td>
<td>http://pear.com</td>
<td>author</td>
</tr>
</tbody>
</table>
table{
width:75%;
margin:0 auto;
font:Verdana, Arial, Helvetica, sans-serif ;
font-size:.9em;
line-height:1.4em ;
border-collapse:collapse; /*collapse 默认。如果可能，边框会被合并为一个单一的边框。*/
}
th{
text-align:left;
border-bottom:3px solid #333;
border-right:1px solid #333;
border-left:1px solid #333;
padding-left:5px;
}
td{
color:#333333;
border:1px solid #666;
padding:0 5px;
}
/*消退式表格边框*/
tr{
border:1px solid #666;
}
caption{
font-size:19px;
font-weight:bold;
margin:13px;
color:#000066
}