表格布局

表格布局涉及的关键标签：

1.table标签：

属性	单位	描述
border	pixels	规定表格边框的宽度
cellpadding	pixels%	规定单元边沿与其内容之间的空白
cellspacing	pixels%	规定单元格之间的空白

table标签更多属性以及介绍

2.tr标签：

属性	值	描述
align	left right center justify char	定义表格当前行的内容对齐方式

tr的更多属性以及介绍

3.单元格th/td标签：

th标签和td标签区别：th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。

属性	值	描述
align	left right center justify char	规定当前单元格内容的水平对齐方式
rowspan	number	规定单元格可横跨的行数
colspan	number	设置单元格可横跨的列数

th/td的更多属性以及介绍

4.不推荐使用的thead、tbody、tfoot标签，使用tr和样式替代即可。

文档里是这样注释的：thead、tbody 以及 tfoot 很少被使用，这是因为糟糕的浏览器支持。我们期望在 XHTML 的未来版本中这种情况会发生变化。

表格布局要点

• 表格布局不同于div布局，不能随便的控制各个标签的宽度。
• 表格布局是一种结构，布局时想象该结构会很有帮助。
• 宏观把控整个表格布局，有必要事先确定你表格最大的列数colspan，以及每列的大致宽度（px或百分比）。
• 最好着重布局其中一个tr内的所有td的宽度，其它tr内的td都使用colspan来确定占有的单元格数。
• 保持每个tr的colspan属性之和保持一致，没有该属性的td默认为1。
• 注意rowspan会占有它跨越的所有tr的colspan。
  例如：某td的rowspan为2，并且该td的colspan为3，则计算下一个tr的colspan之和时需要加上3。

表格布局使用场景

在你布局时只要有类似表的结构，就可以使用表格布局，如常在form表单以及后台数据对象的显示上。

如果使用了ui库element-ui，那么表格布局的需求基本上都可以使用table表格组件以及layout布局组件所替代，并且使用起来更加方便强大。

点击前往element-ui官网