csstable跨列居中_CSS进阶11-表格table

(注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！)

(注2：更多内容请查看我的目录。)

1. 表格简介

本文定义了CSS中表格的处理模型。这种处理模式的一部分就是布局。对于布局，本文介绍两种算法; 第一种是固定表格布局算法，其定义很明确，但第二种是自动表格布局算法，该规范没有完全定义。

对于自动表格布局算法，一些广泛部署的实现已经实现了相对紧密的互操作性。

表格布局可以用来表示数据之间的表格关系。开发者以文档语言指定这些关系，并可以使用CSS 2.2指定他们的表示。

在可视化媒体中，CSS表格也可以用来实现特定的布局。在这种情况下，开发者不应该在文档语言中使用与表格相关的元素，而应该将CSS应用于相关的结构元素以实现所需的布局。

开发者可以将表格的视觉格式指定为矩形网格单元格。单元格的行和列可以组织成行组和列组。行，列，行组，列组和单元格可以在它们周围绘制边框(CSS 2.2中有两个边框模型)。开发者可以在单元格中垂直或水平对齐数据，并可以将一行或者一列的所有单元格数据对齐。

如下，是一个简单的三行，三列的HTML 4中描述的表格：

This is a simple 3x3 table

Header 1	Cell 1	Cell 2
Header 2	Cell 3	Cell 4
Header 3	Cell 5	Cell 6

该段代码创建了一个表(TABLE元素)，三行(TR元素)，三个标题单元格(TH元素)和六个数据单元格(TD元素)。请注意，此示例的三列是隐式指定的：表中的列与标题单元格和数据单元格总共所需的列数一样多。

以下CSS规则令标题单元格中的文本水平居中，并用粗体字显示标题单元格中的文本：

th { text-align: center; font-weight: bold }

接下来的规则将标题单元格的文本与其基线对齐，并垂直居中每个数据单元格中的文本：

th {vertical-align：baseline}

td {vertical-align：middle}

接下来的规则指定顶行将被3px实蓝色边框包围，而其他每行都将被1px实心黑色边框包围：

table { border-collapse: collapse }

tr#row1 { border: 3px solid blue }

tr#row2 { border: 1px solid black }

tr#row3 { border: 1px solid black }

但请注意，行周围的边框于行相交处重叠。row1和row2之间的边界是什么颜色(黑色或蓝色)和厚度(1px或3px)？我们在关于边界冲突解决的部分讨论这一点 。

以下规则将表头放在表格的上方：

caption { caption-side: top }

上例显示了CSS如何作用于 HTML 4元素; 在HTML 4中，各种表格元素(TABLE，CAPTION，THEAD，TBODY，TFOOT，COL，COLGROUP，TH和TD)的语义是明确定义的。在其他文档语言(如XML应用程序)中，可能没有预定义的表格元素。因此，CSS 2.2允许开发者通过“display”属性将文档语言元素“映射”到表格元素。例如，以下规则使FOO元素行为表现和HTML TABLE元素一样，BAR元素像CAPTION元素一样：

FOO {display：table}

BAR {display：table-caption}

我们在接下来讨论各种表格元素。在本文中，术语表元素table element是指任何涉及创建表的元素。内部表元素internal-table-element是生成行row、行组row group、列column、列组column group或单元格cell的元素。

2. CSS表格模型

CSS表格模型基于HTML4表格模型，其表格结构与表格的可视布局紧密相关。在此模型中，表格由可选标题caption和任意数量行的单元格组成。作者在文档语言中明确表格模型被为“行主要”。一旦指定了所有行，就会派生出列(每行的第一个单元格属于第一列，第二个单元格属于第二列，......)。行和列可以在结构上分组，并且该分组会通过表现反映出来(例如，可能会围绕行来绘制border)。

因此，表格模型由表格tables，标题captions，行 rows，行组row groups(包括标题组header groups和页脚组footer groups)，列columns，列组column groups和单元cells组成。

CSS模型不要求文档语言包含对应这些组件的每一个元素。对于没有预定义表元素的文档语言(如XML应用程序)，作者必须将文档语言元素映射到表元素，这是通过“display”属性完成的。下面的“display”值将表格格式化规则分配给任意元素：

table (In HTML: TABLE)

指定元素定义块级表格block-level table：它是参与BFC的矩形块。

inline-table (In HTML: TABLE)

指定元素定义行内级表格inline-level table：它是参与IFC的矩形块。

table-row (In HTML: TR)

指定元素是行单元格

table-row-group (In HTML: TBODY)

指定元素是一行或多行的分组

table-header-group (In HTML: THEAD)

与'table-row-group'类似，但对于视觉格式化，该行组始终显示在所有其他行和行组之前以及任何顶部标题top captions之后。打印用户代理可以在表的每一页上重复标题行。如果一个表包含具有'display：table-header-group'的多个元素，则只有第一个元素被渲染为标题; 其与元素被视为具有'display: table-row-group'。

table-footer-group (In HTML: TFOOT)

与'table-row-group'类似，但对于视觉格式化，该行组始终显示在所有其他行和行组之后以及任何底部标题bottom captions之前。打印用户代理可以在表的每一页上重复页脚行。如果一个表包含具有'display：table-header-group'的多个元素，则只有第一个元素被渲染为标题; 其与元素被视为具有'display: table-row-group'。

table-column (In HTML: COL)

指定元素描述一列单元格

table-column-group (In HTML: COLGROUP)

指定元素是一列或多列的分组

table-cell (In HTML: TD, TH)

指定一个元素表示一个表格单元格。

table-caption (In HTML: CAPTION)

为表指定一个标题，即表头。所有带有'display：table-caption'的元素都必须被渲染，如17.4节所述。

具有这些display值的替换元素在布局过程中被视为其给定的display类型。例如，设置为'display：table-cell'的图像将填充可用的单元格空间，其尺寸可能会影响表格大小算法，如同普通单元格一样。

将display设置为'table-column'或'table-column-group'的元素不会被渲染(就像它们有'display：none'一样)，但是它们是有用的，因为它们可能具有某些属性为其所代表的列包含特定的样式。

table { display: table }

tr { display: table-row }

thead { display: table-header-group }

tbody { display: table-row-group }

tfoot { display: table-footer-group }

col { display: table-column }

colgroup { display: table-column-group }

td, th { display: table-cell }

caption { display: table-caption }

用户代理可能忽略HTML表元素的这些“display”属性值，因为HTML表可能会使用其他用于向后兼容渲染的算法呈现。然而，这并不意味着鼓励在HTML中的其他非表元素中不使用“display: table”。

2.1 匿名表格对象 Anonymous table objects

HTML以外的文档语言可能不包含CSS 2.21表模型中的所有元素。在这些情况下，必须假定“缺失”元素才能使表格模型起作用。任何table元素都会自动生成必要的匿名表对象，由至少三个对应于'table'/'inline-table'元素，'table-row'元素和'table-cell'元素的嵌套对象组成。缺失元素根据以下规则生成匿名对象(例如，可视化表格布局中的匿名盒)：

我们为这些规则定义如下术语：

row group box

A 'table-row-group', 'table-header-group', or 'table-footer-group'

proper table child

A 'table-row' box, row group box, 'table-column' box, 'table-column-group' box, or 'table-caption' box.

proper table row parent

A 'table' or 'inline-table' box or row group box

internal table box

A 'table-cell' box, 'table-row' box, row group box, 'tabl