XHTML 表格美化与表格布局

表格美化

在上例表格标签中，我们使用了 border （边界）属性，设定为 1 ，否则表格将不显示边缘，我们也看不出表格效果。

默认的表格显示是比较难看的，如果需要对它进行美化，做出漂亮的表格来，可以通过 CSS 样式表进行控制：

.table{
    width: 90%;
    border-collapse: collapse; 
    border: 1px solid black;
    line-height: 1.5em;
}
.table caption{
    line-height: 1.8em;
    text-align: left;
}
.table th{
    border:1px solid gray;
    padding: 2px;
    background-color: #CCCCCC;
}
.table td{
    border:1px solid gray;
    padding: 3px 0 2px 5px;
    background: #F6F6F6;
}

HTML 代码如下：

<table class="table">
<caption>这是 caption 标签</caption>
<tr>
<th width="20%">这是表格头</th>
<th width="40%">这是表格头</th>
<th>这是表格头</th>
</tr>
<tr>
<td>表格正文内容</td>
<td>表格正文内容</td>
<td>表格正文内容</td>
</tr>
<tr>
<td>表格正文内容2</td>
<td>表格正文内容2</td>
<td>表格正文内容2</td>
</tr>
</table>

效果如下：

CSS 样式表更多关与表格的信息，请参考《CSS 表格》。

表格布局

在 DIV+CSS布局 兴起之前，表格曾广泛用于网页布局。表格可以设置宽度，高度以及可以分割成多个单元格，以及简单可视化的效果，非常用于简单的布局效果。实际上在目前很多应用中，也可以充分利用表格来进行布局，如论坛列表等。

将表格边缘(border)取消掉后，即可隐藏表格的显示，以达到表格布局的效果，具体不展开论述。