您现在的位置是:首页 > 网站制作 > CSS3|Html5CSS3|Html5

表格高级(表格相关css属性)(表格重要html属性)、样式重置

胜于蓝2019-07-30【CSS3|Html5】人已围观

简介表格相关css属性1.合并相邻单元格边框(给table加) 语法: border-collapse: collapse(合并相邻单元格边框) | separate(相邻单元格边框分开);2.设置表格标题的位置(给tab

表格相关css属性

1.合并相邻单元格边框(给table加)

    语法:

 

border-collapse: collapse(合并相邻单元格边框)  |  separate(相邻单元格边框分开);
2.设置表格标题的位置(给table加)

    语法:

 

caption-side: top  |  bottom  |  left  |  right;
    注:left和right只有火狐识别

 

3.设置单元格之间的间距(给table加)

    语法:

 

border-spacing: 数值+单位;
    注:当出现border-collapse: collapse; 时,border-spacing 会失效;样式中的border-spacing 属性会覆盖掉标签中的cellspacing属性。

 

4.无内容单元格显示或隐藏(给table加)

    语法:

 

empty-cells: show(显示)  |  hide(隐藏);
5.表格布局算法(给table加)

    语法:

 

table-layout: auto(默认值)  |  fixed(单元格宽度固定,不跟随内容多少改变单元格宽度);
 

 

表格重要html属性

1.合并行

 

rowspan="数值"
2.合并列

 

colspan="数值"
3.设置单元格内容垂直对齐方式

 

valign="top  |  cols  |  all  |  groups  |  none"
4.设置单元格内容水平对齐方式

 

align="left  |  right  |  center"
5.
rules="rows  |  cols  |  all  |  groups  |  none"

    row:行分隔线

    cols:列分隔线

    all:位于行和列之间的分隔线

    groups:行组和列组分隔线

    none:不添加任何分隔线

    注:表格行分组   thead、tbody、tfoot

    表格列分组:

 

<colgroup span="1"></colgroup>
    注:span用来设置几列为一组,默认为1

 

 

样式重置

    概念:将一些多次需要使用到的css属性写在公共样式中,或统一各个浏览器的一些样式就叫做样式重置

    作用:让各个浏览器的css样式有一个统一的基准,有利于代码的优化

Tags:

很赞哦! ()

文章评论

站点信息

  • 建站时间:2018-10-24
  • 网站程序:帝国CMS7.5
  • 主题模板《今夕何夕》
  • 文章统计495篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们
[!--temp.jinyong--]