CSS中的table

来源：互联网发布：淘宝客怎么开通教程编辑：程序博客网时间：2024/06/05 13:30

table可以看成是外面一个大边框，里面有很多小边框的元素，如下图

在CSS文件中，在table中对外面的边框进行修饰，在th或td中对里面的单元格边框进行修饰。

table{border-style: solid; -- 边框类型，有solid(实线) dashed(虚线) dotted(点线) 等border-width: 1px; -- 边框宽度border-color: blue; -- 边框颜色border-collapse: collapse; -- 是否把表格边框合并为单一边框，有separate,collapse两个常用值border-spacing: 1px 2px; -- 边框横向纵向距离empty-cells: show; -- 是否显示空的单元格；有show,hide两个常用值}

或者用一个border属性同时对三个属性进行赋值

table { border: solid 1px  blue } // 注意属性之间要有空格

对单元格边框的修饰在th或td中进行。

th, td{border-style: solid; -- 边框类型，有solid(实线) dashed(虚线) dotted(点线) 等border-width: 1px; -- 边框宽度border-color: blue; -- 边框颜色}

示例：

<html><head><style type="text/css">table.one {border-collapse: separate;border-spacing: 10px;border-style: solid;border-width: 1px;}table.one td{border-style: dotted;border-width: 5px;}</style></head><body><table class="one" ><tr><td>Adams</td><td>John</td></tr><tr><td>Bush</td><td>George</td></tr></table></body></html>

效果图：

更多关于边框(border)的介绍，请看链接

http://www.1keydata.com/css-tutorial/tw/border.php

0 0