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

表格相关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样式有一个统一的基准，有利于代码的优化

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓