持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第31天，点击查看活动详情
前言
大家好呀，我是L同学。在上篇文章CSS——设置背景中，我们学习了如何使用CSS设置背景，包括background-image、background-repeat、background-size、background-position等等相关知识点。今天，在这篇文章中，我们将学习列表元素和表格元素等相关知识点。
列表元素
在开发一个网页的过程中, 很多数据都是以列表的形式存在的。事实上现在很多的列表功能采用了不同的方案来实现:方案一: 使用div元素来实现(比如汽车之家, 知乎上的很多列表)；方案二: 使用列表元素, 使用元素语义化的方式实现。
HTML提供了3组常用的用来展示列表的元素：
- 有序列表：ol、li
- 无序列表：ul、li
- 定义列表：dl、dt、dd
有序列表 – ol – li
- ol（ordered list）: 有序列表，直接子元素只能是li。
- li（list item）：列表中的每一项
无序列表 – ul - li
- ul（unordered list）：无序列表，直接子元素只能是li
- li（list item）：列表中的每一项
定义列表 – dl – dt - dd
- dl（definition list）：定义列表，直接子元素只能是dt、dd
- dt（definition term）：列表中每一项的项目名
- dd（definition description）：列表中每一项的具体描述，是对 dt 的描述、解释、补充；一个dt后面一般紧跟着1个或者多个dd。
表格元素
在网页中, 对于某些内容的展示使用表格元素更为合适和方便。编写表格最常见的是下面的元素:
- table： 表格
- tr(table row)：表格中的行
- td(table data)： 行中的单元格
另外表格有很多相关的属性可以设置表格的样式, 但是已经不推荐使用了。
这里我们需要用到一个非常重要的属性:border-collapse。
border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。table { border-collapse: collapse; }合并单元格的边框。
在某些特殊的情况下, 每个单元格占据的大小可能并不是固定的。一个单元格可能会跨多行或者多列来使用。这个时候我们就要使用单元格合并来完成。
单元格合并分成两种情况:
- 跨列合并: 使用colspan。在最左边的单元格写上colspan属性, 并且省略掉合并的td。
- 跨行合并: 使用rowspan。在最上面的单元格协商rowspan属性, 并且省略掉后面tr中的td。
