CSS设置表格边框、标题、合并边框、边框分离、表格

鳄鱼君

发表文章数:523

热门标签

,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS和CSS3教程 » CSS设置表格边框、标题、合并边框、边框分离、表格

表格可以用来组织、显示数据,也可以用来排版。在传统的网页中,用户主要使用表格作为工具进行页面布局,现在很少有人使用表格设计页面了,但是表格在数据化的显示方式中,仍然是不可以取代的。

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> 定义表格中供格式化的列组

可以自行结合属性对应效果进行练习尝试,鳄鱼君在这里不做详细介绍了!

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《CSS设置表格边框、标题、合并边框、边框分离、表格》 发布于2020-04-09

分享到:
赞(1) 赏杯咖啡

评论 抢沙发

7 + 1 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册