表格
在网页中, 表格是经常使用的一种展示形式。对于某些内容的展示使用表格元素更为合适和方便。
编写表格最常见的是下面的元素有table、tr、td:
- table:表格
- tr(table row):表格中的行
- td(table data):行中的单元格
另外表格有很多相关的属性可以设置表格的样式, 但是已经不推荐使用了。
给表格设置边框时我们需要用到一个非常重要的属性:border-collapse。border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。table { border-collapse: collapse; }
合并单元格的边框。
表格的其他元素:
- thead:表格的表头
- tbody:表格的主体
- tfoot:表格的页脚
- caption:表格的标题
- th:表格的表头单元格
单元格合并
在某些特殊的情况下, 每个单元格占据的大小可能并不是固定的。一个单元格可能会跨多行或者多列来使用,这个时候我们就要使用单元格合并来完成。
单元格合并分成两种情况:
- 跨列合并: 使用colspan。在最左边的单元格写上colspan属性, 并且省略掉合并的td。
- 跨行合并: 使用rowspan。在最上面的单元格写上rowspan属性, 并且省略掉后面tr中的td。