WEB基础入门六:表格的基本设置
2018-09-11 本文已影响0人
瘦不下去了
一、表格
现在我们使用表格的作用只有一个,就是用来表示格式化的数据
- table: 使用table标签创建一个表格
- tr: 表示表格中的一行,tr中可以编写一个或多个th或td
- th: 表示表头
- td: 表示表格中的一个单元格
- caption: 表示表格的标题
表格是可以嵌套,可以在td中在放置一个表格
二、长表格
有一些情况下表格是非常的长的,这时就需要将表格分为三个部分,表头,表格的主体,表格底部,在HTML中为我们提供了三个标签:
- thead: 表示表格的头部,永远会显示在表格的头部
- tbody: 表示表格的主体,永远都会显示表格的中间
- tfoot: 表示表格的底部,永远都会显示表格的底部
注意tr并不是table的子元素,而是tbody的子元素,通过table > tr 无法选中行 需要通过tbody > tr
三、合并单元格
合并单元格指将两个或两个以上的单元格合并为一个单元格
合并单元格可以通过在th或td中设置属性来完成
- 横向合并:colspan
- 纵向合并:rowspan
四、表格的样式
- text-align: 设置文本的水平对齐
-
vertical-align: 设置文本的垂直对齐
可选值:top、baseline、middle、bottom - border-spacing:边框间距(如果设置了合并边框则失效)
-
border-collapse:合并边框
collapse:合并边框
separate:不合并边框
五、解决高度塌陷的终极格式,完善clearfix
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}