腾讯云618限量抢购
  1. DIV+CSS教程

XHTML 表格美化与表格布局

最后更新:2010-09-30 18:20阅读:7304

表格美化

在上例表格标签中,我们使用了 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>

效果如下:

这是 caption 标签
这是表格头 这是表格头 这是表格头
表格正文内容 表格正文内容 表格正文内容
表格正文内容2 表格正文内容2 表格正文内容2

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

表格布局

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

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


本章节内容共分 2 部分:
  1. 1. XHTML 表格 table 标签
  2. 2. XHTML 表格美化与表格布局
腾讯云618限量抢购