CSS Table

表格布局有两种使用方式,一种是使用HTML提供的table标签,一种是使用CSS提供的display:table属性。CSS提供的display:table属性主要为表设置表格布局算法,CSS Table实际上是使用CSS属性模仿HTML Table的布局模型。

HTML Table是包含语义化的标签,它描述了什么是数据,因此最好是用于标记那些需要制表的数据,比如财务信息表。如果数据能够以电子表格的形式保存在电脑中,那么它在HTML文档中很可能需要使用HTML Table标签来进行标记。

CSS Table只是声明了元素在浏览器中的样式,它并不包含语义。如果使用HTML TABLE来布局,它会客户端这些数据是制表的。而使用CSS Table属性设置的元素除了告知客户端以某种样式渲染以外,不会告诉客户端任何语义,只需要客户端能够支持这些属性。

HTML Table CSS Table 描述
display:table 表格,设置元素作为块级表格
display:caption 标题,设置元素作为表格标题
display:table-header-group 标题组,设置元素作为标题组
display:table-footer-group 脚注组,设置表格作为脚注组
display:table-row 行,设置元素作为表格行
display:table-row-group 行组,设置元素作为表格行组
display:table-column 列,设置元素作为表格列
display:table-column-group 列组,设置元素作为表格列组
, display:table-cell 单元格,设置元素作为表格单元格

协助属性

vertical-align属性设置行内元素或表格单元格元的垂直对齐方式

border-collapse属性用于设置表格边框的合并模式

合并模式 描述
border-collapse:collapse 合并模式,相邻单元格共享边框。
border-collpase:spacing 分割模式,相邻单元格各自拥有独立的边框。

border-spacing属性用于设置相邻单元格边框之间的距离,仅适用于分割模式。

table-layout属性用于设置勇于布局表格的单元格、行、列的算法

布局算法 描述
table-layout:auto 表格及单元格的宽度取决于其包含的内容
table-layout:fixed 表格和列宽通过表格宽度来设置,列宽由首行单元格决定。

注意事项

属性 注意
display:table 目标元素padding失效
display:table-row 目标元素padding和margin失效
display:table-cell 目标元素margin失效

例如:使用CSS Table制作栅格

table


table cell title

table cell title

table cell title

table cell title

table cell title

table cell title

例如:使用CSS Table制作搜索栏

search


表格布局优势

  • CSS Table可是适当地调整CSS属性,可以做到很多HTML Table无法做到的事情,比如从table中择优选择属性来使用。
  • CSS Table能够轻松定义一个单元格的边界、背景等样式,不会产生因为HTML Table制表符导致的语义化问题。
  • CSS Table能够解决使用绝对定位和浮动定位进行多列布局时所遇到的问题

例如:使用CSS Table实现动态垂直居中对齐

middle


center middle

例如:实现动态水平居中对齐

使用display:tablemargin:auto实现水平居中对齐

navigator



CSS Table布局中table-cell最大的特点是同一行列表元素都是等高的

例如:使用CSS Table实现等高布局



leftleftleftleftleftleft
rightrightrightrightrightrightrightrightrightrightrightrightrightrightright

例如:使用CSS Table实现圣杯布局



header
article
footer

匿名表格元素

CSS Table除了包含表格布局的普通规则,针对缺少的表格元素浏览器会以匿名的方式创建。如果为元素设置了display:table-cell属性,而并没将其父容器设置为display:table-row,浏览器会默认创建出一个表格行,就好像文档中真实存在的一样。

你可能感兴趣的:(CSS Table)