11表布局

Posted 2020-08-23 U201113877

table值指定了一个元素定义了一个块级表，它定义了一个生成块框的矩形块。inloine-table指定了一个元素定义了一个行内级表。这说明，该元素定义了一个生成行内框的矩形块。table-row指定了一个元素是一个单元格的行。table-row-group指定了一个元素是一个或多个行的组。table-header-group，table-footer-group与table-row-group很类似。table-column声明元素描述了一个单元格的列。table-column-group声明了一个元素是一个或多个列的组。table-cell指定了一个元素表示表中的单个单元格。table-caption定义了一个表的总标题。

CSS将其表模型定义为“以行为主”。换句话说，这个模型假设创作人员创建的标记语言会显式声明行，而列是从单元格行的布局推导出来的。在CSS中列和列组只能接受4种样式，border、background、width和visibility。border只有当border-collapse属性为collapse时才能为列和列组设置边框。background只有当单元格及其行有透明背景时，列或列组的背景才可见。width属性定义了列或列组的最小宽度。如果一个列或列组的visibility为collapse，则该列（或列组）中所有单元格都不显示。

CSS定义了6个不同的“层”来完成表的显示。表、列组、列、行组、行、单元格。对应表各个方面的样式都在其各自的层上绘制。列样式在行样式的下面，所以行背景会覆盖列背景。默认地，所有元素背景都是透明的。

caption-side属性可以设置标题的位置，值：top|bottom.大多数情况下，为caption应用样式非常类似于块级元素，它们可以有内边距、边框、背景等。

CSS中有两种边框模型。分割边框模型的单元格相互之间是分隔的（默认模型）。合并边框模型的单元格之间是没有间隔的。border-collapse属性可以设置边框模型，值:collapse|separate|inherit.当border-collapse的值为collapse时，border-spacing属性可以用来设置单元格边框之间的距离，值:<length><length>?|inherit,如果提供两个长度，则要求第一个值始终是水平间隔，第二个值始终是垂直间隔。要声明一个border-spacing值，会应用于表本身，而不是单元格，不能为行、行组、列和列组设置边框。

empty-cells属性可以设置空单元格的处理方式，值：show|hide|inherit，设置为show，会画出空单元格的边框和背景，就好像这些表单元格有内容一样，设置为hide，则不会画出该单元格的任何部分。

如果两个或多个边框相邻，它们会互相合并。某个合并边框的border-style为hidden，它会优先于所有其他合并边框，border-style为none，它的优先级最低。如果至少有一个合并边框的border-style值不是none，而且多有合并边框的border-style值都不是hidden，则窄边不敌更宽的边框。有相同宽度，则考虑边框样式，bouble、solid、dashed、dotted、ridge、outset、groove、inset.样式也一样，则按下表顺序使用元素的颜色，cell、row、row group、column、column group、table。

table-layout属性可以设置确定表的宽度的方法，固定宽度布局和自动宽度布局（高度都会自动计算），值：auto|fixed|inherit。两者之间的差异是速度。固定布局模型的速度之所以快是布局不依懒于表单元格的内容，其布局是根据该表以及表中列和单元格的width值决定的。自动布局比较慢的原因是，用户代理查看完表的所有内容之前无法确定表的布局。

表的高度可以用height属性显示设置。如果为auto，则高度是表中所有行的行高再加上所有边框和单元格间隔的总和。

text-align属性可以设置水平对齐。单元格会处理为一个块级框，其中的内容根据text-align值对齐。vertical-align属性可以设置垂直对齐。