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

表格相关css属性2XA胜于蓝|优秀个人博客

1.合并相邻单元格边框(给table加)2XA胜于蓝|优秀个人博客

    语法：2XA胜于蓝|优秀个人博客

 2XA胜于蓝|优秀个人博客

border-collapse: collapse(合并相邻单元格边框)  |  separate(相邻单元格边框分开);

2.设置表格标题的位置(给table加)

    语法：2XA胜于蓝|优秀个人博客

 2XA胜于蓝|优秀个人博客

caption-side: top  |  bottom  |  left  |  right;

    注：left和right只有火狐识别

 2XA胜于蓝|优秀个人博客

3.设置单元格之间的间距(给table加)2XA胜于蓝|优秀个人博客

    语法：2XA胜于蓝|优秀个人博客

 2XA胜于蓝|优秀个人博客

border-spacing: 数值+单位;

    注：当出现border-collapse: collapse; 时，border-spacing 会失效；样式中的border-spacing 属性会覆盖掉标签中的cellspacing属性。

 2XA胜于蓝|优秀个人博客

4.无内容单元格显示或隐藏(给table加)2XA胜于蓝|优秀个人博客

    语法：2XA胜于蓝|优秀个人博客

 2XA胜于蓝|优秀个人博客

empty-cells: show(显示)  |  hide(隐藏);

5.表格布局算法(给table加)

    语法：2XA胜于蓝|优秀个人博客

 2XA胜于蓝|优秀个人博客

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

 

 2XA胜于蓝|优秀个人博客

表格重要html属性2XA胜于蓝|优秀个人博客

1.合并行2XA胜于蓝|优秀个人博客

 2XA胜于蓝|优秀个人博客

rowspan="数值"

2.合并列

 2XA胜于蓝|优秀个人博客

colspan="数值"

3.设置单元格内容垂直对齐方式

 2XA胜于蓝|优秀个人博客

valign="top  |  cols  |  all  |  groups  |  none"

4.设置单元格内容水平对齐方式

 2XA胜于蓝|优秀个人博客

align="left  |  right  |  center"

5.

rules="rows  |  cols  |  all  |  groups  |  none"

    row：行分隔线2XA胜于蓝|优秀个人博客

    cols：列分隔线2XA胜于蓝|优秀个人博客

    all：位于行和列之间的分隔线2XA胜于蓝|优秀个人博客

    groups：行组和列组分隔线2XA胜于蓝|优秀个人博客

    none：不添加任何分隔线2XA胜于蓝|优秀个人博客

    注：表格行分组   thead、tbody、tfoot2XA胜于蓝|优秀个人博客

    表格列分组：2XA胜于蓝|优秀个人博客

 2XA胜于蓝|优秀个人博客

<colgroup span="1"></colgroup>

    注：span用来设置几列为一组，默认为1

 2XA胜于蓝|优秀个人博客

 2XA胜于蓝|优秀个人博客

样式重置2XA胜于蓝|优秀个人博客

    概念：将一些多次需要使用到的css属性写在公共样式中，或统一各个浏览器的一些样式就叫做样式重置2XA胜于蓝|优秀个人博客

    作用：让各个浏览器的css样式有一个统一的基准，有利于代码的优化2XA胜于蓝|优秀个人博客

Tags：

转载：【免责声明】：转载自其他平台或媒体的文章，本站将注明来源及作者，但不对所包含内容的准确性、可靠性或网站性提供任何明示或暗示的保证，仅做参考！如有侵权，请联系本站并提供相关证明，本站将依据著作权人意见删除该文，并不承担任何责任！
如果您认为本文侵犯了您的版权信息，请与我们联系修正或删除。感谢您对胜于蓝个人博客网站平台的认可，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源胜于蓝个人博客”。/web/html/77.html

扫描关注胜于蓝微信|公众号，第一时间获取网站模板更新动态

本文地址：/web/html/77.html

很赞哦！ ()