表格可以用来组织、显示数据,也可以用来排版。在传统的网页中,用户主要使用表格作为工具进行页面布局,现在很少有人使用表格设计页面了,但是表格在数据化的显示方式中,仍然是不可以取代的。
CSS设置边框颜色
CSS使用background-color属性
为元素设置一种纯色,这种颜色会填充元素的内容,内边距和边框区域,扩展到元素边框的外边姐,如果边框有透明部分(虚线边框),会通过这些透明部分显示出背景色。它的属性值有两个:
- color:颜色可以是颜色名,rgb值或者十六进制数。
- transparent:默认,背景颜色为透明。
CSS设置合并边框
CSS使用border-collapse 属性
设置表格的边框是否被合并为一个单一的边框,属性值可以为以下几种:
separate
:默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。collapse
:如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。inherit
:规定应该从父元素继承 border-collapse 属性的值。
CSS设置边框分离
CSS使用border-spacing 属性
设置相邻单元格的边框间的距离(仅用于“边框分离”模式),某些版本的IE浏览器不支持此属性。属性值可以设置为像素px,两个像素值的话,第一个为横间距,第二个为纵间距;一个像素值的话作用于横向和纵向间距。
CSS使用empty-cells 属性
设置是否显示表格中的空单元格(仅用于“分离边框”模式)。属性值可以为以下几种:
hide
:不在空单元格周围绘制边框。show
:在空单元格周围绘制边框。默认。inherit
:规定应该从父元素继承 empty-cells 属性的值。
CSS设置表格标题
CSS使用caption-side 属性
设置表格标题的位置。属性值可以为一下几种:
top
:默认值。把表格标题定位在表格之上。bottom
:把表格标题定位在表格之下。inherit
:规定应该从父元素继承 caption-side 属性的值。
综合实例:
<style type="text/css">
.reference{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /*设置字体*/
border: red solid 1px; /*表格外边框*/
width:400px;
border-collapse:collapse; /*合并边框 边框重叠*/
border-spacing: 5px 10px; /*单元格横向间距为5px 纵向间距为10px*/
empty-cells: hide; /*不在空单元格周围绘制边框*/
}
.reference td, .reference th {
font-size:1em;
border:1px solid #98bf21; /*单元格边框*/
padding:5px 10px; /*设置内边距 上下5px 左右10px */
}
.reference th {
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
.xxoo{ /*表格标题样式*/
font-size: 15px;
font-weight: bold;
padding: 6px;
color: #141513;
caption-side: bottom; /*表格标题的显示在表格底部位置*/
}
.reference tr.alt td {
color:#000000;
background-color:#EAF2D3;
}
</style>
<table class="reference">
<thead valign="bottom">
<caption class="xxoo">
表格标签
</caption>
<tr>
<th style="width: 30%">标签</th>
<th style="width: 70%">描述</th>
</tr>
</thead>
<tbody valign="top">
<tr class="alt"><td><table></td><td>定义表格</td></tr>
<tr><td><caption></td><td>定义表格标题</td></tr>
<tr class="alt"><td><th></td><td>定义表格中的表头单元格</td></tr>
<tr><td><tr></td><td>定义表格中的行</td></tr>
<tr class="alt"><td><td></td><td>定义表格中的单元</td></tr>
<tr><td><thead></td><td>定义表格中的表头内容</td></tr>
<tr class="alt"><td><tbody></td><td>定义表格中的主体内容</td></tr>
<tr><td><tfoot></td><td>定义表格表注内容(脚注)</td></tr>
<tr class="alt"><td><col></td><td>定义表格中一个或多个列的属性值</td></tr>
<tr><td><colgroup></td><td>定义表格中供格式化的列组</td></tr>
</tbody></table>
以下是演示效果:
标签 | 描述 |
---|---|
<table> | 定义表格 |
<caption> | 定义表格标题 |
<th> | 定义表格中的表头单元格 |
<tr> | 定义表格中的行 |
<td> | 定义表格中的单元 |
<thead> | 定义表格中的表头内容 |
<tbody> | 定义表格中的主体内容 |
<tfoot> | 定义表格表注内容(脚注) |
<col> | 定义表格中一个或多个列的属性值 |
<colgroup> | 定义表格中供格式化的列组 |
可以自行结合属性对应效果进行练习尝试,鳄鱼君在这里不做详细介绍了!
声明:1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!