前端十一课--表格元素与表格布局

表格元素与表格布局

table元素：

1.在网页内容中创造一个表格内容；

2.表格table的大小是由里面的内容撑开的，没有内容的空表不存在表格；

3.table设置样式border"1";

里面的数字表示边框的宽度；

4.只有给table加上border属性之后才能够改变整个边框的样式（颜色）

tr元素：

1.在网页内容中创造表格中的一行 ，只有行的话不会在网页中间展示任何的效果，一个表格至少需要行和列的同时出现；

2.tr元素无法手动设置行的宽度，但能设置高度；

3.可以设置文本对齐；

td元素：

1.在网页内容中创造表格中的一列，每一个tr元素中间都要设置具体的列数，默认情况下，每一个tr的列数都是相同的；

2.td的高度和宽度都可以设置

3.可以设置文本对齐

th元素：

1.在表格中间创造一列中的表头，专门用来标注这一列的数据类型或者是名称；（比较特殊的td元素）；

2.和td属性一致；

表格区域划分：

1.thead(表头区域) tbody(表身区域) tfoot(表身区域)

2.设置为这三个区域即使这三个不按顺序写也不影响；

caption标签：(表格标题)

1.该元素出现的位置是表格上方居中,但不出现在表格当中(即没有表格线包裹)；

2.block型，text-line居中方式不适用；

单元格的大小：

1.在不设置的情况下表格的大小有里面元素的大小决定

2.若单元格中没有内容，默认的空间会很小几乎不存在，这时候合并空的单元格是无效的(即不会被合并)

​ 2.1解决方案：不要设置空的单元格，然后前面的单元格合并后面的空位置就能实现有内容格占据剩下的

​ 位置；

3.在进行行合并的时候同样空单元格是不会被合并的

4.一行的高度，由该行最高的内容决定，一列的宽度，由该列最宽的内容决定

5.设置table的宽和高之后单元格的宽高大小：

​ 5.1一列的宽度：总宽度*该列所占宽度的比例计算；

​ 5.2一行的高度：总高度*改行所占高度的比例；

表格边框：

border-spacing:20px;表格间隔；一个值上下左右都存在，即使为零也存在表格线出现交集的效果；

border-collapse:边框分隔(collapse,默认值seperate)

​ border-collapse:seperate;(表格之间依旧分隔着)

​ boreder-collapse:collapse;(表格线合并)

**表格中文字居中：**text-line:center;

合并单元格：

合并列：td属性：colspan=“2”；

合并行：th属性：rowspan=“2”;

中：**text-line:center;

合并单元格：

合并列：td属性：colspan=“2”；

合并行：th属性：rowspan=“2”;

数字表示合并的表格数；默认值为1；