列表和表格的概念和作用-编程入门课：CSS(3)从入门到实战

当前位置:　首页>> 技术小册>> 编程入门课：CSS(3)从入门到实战

CSS中的列表和表格是常见的排版方式，它们能够将数据和内容有条理地呈现给用户，提高页面的可读性和美观性。本文将分别介绍CSS中的列表和表格，并结合代码示例详细讲解它们的概念和作用。

列表
在HTML中，我们可以使用`<ul>和<ol>`标签创建无序列表和有序列表，而CSS中则提供了一些属性来控制这些列表的样式。

无序列表
无序列表使用`<ul>`标签创建，通常用于展示一些没有特定顺序的项目列表。CSS中可以使用以下属性控制无序列表的样式：

list-style-type：指定列表项前面的符号类型，默认为圆点（disc），还可以设置为方块（square）、实心圆（circle）等。
list-style-position：指定列表项符号的位置，默认为外部（outside），也可以设置为内部（inside）。
例如，下面的代码演示了一个简单的无序列表，其中列表项前面的符号使用实心圆，并且符号在列表项内部显示：

```
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>
```
```
ul {
  list-style-type: circle; /* 使用实心圆符号 */
  list-style-position: inside; /* 符号在列表项内部显示 */
}
```

有序列表使用`<ol>`标签创建，通常用于展示有特定顺序的项目列表。CSS中可以使用以下属性控制有序列表的样式：

list-style-type：指定列表项前面的数字或字母类型，默认为数字（1, 2, 3...），还可以设置为字母（a, b, c...）或罗马数字（I, II, III...）等。
list-style-position：指定列表项数字或字母的位置，默认为外部（outside），也可以设置为内部（inside）。
例如，下面的代码演示了一个简单的有序列表，其中列表项前面的数字使用罗马数字，并且数字在列表项内部显示：

```
<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>
```
```
ol {
  list-style-type: upper-roman; /* 使用罗马数字 */
  list-style-position: inside; /* 数字在列表项内部显示 */
}
```

当我们在开发网页时，有时候需要展示复杂的数据，这时候表格就非常实用了。CSS 提供了很多样式属性，可以帮助我们美化表格，使其更具吸引力和易读性。本文将介绍 CSS 表格的概念和作用，并结合代码示例演示如何创建和美化表格。

表格的基本概念
表格是由行和列组成的矩形网格，其中每个方格称为单元格（cell），用于展示数据或信息。在 HTML 中，表格通过 `<table> `标签来定义，包含一或多个 `<tr>` 行标签，而每一行又包含一个或多个` <td> `单元格标签。例如：

```
<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>
```
上面的 HTML 代码将创建一个包含两行两列的表格，其中第一行的单元格内容为“单元格1”和“单元格2”，第二行的单元格内容为“单元格3”和“单元格4”。

基本样式设置
CSS 提供了许多属性来控制表格的样式，包括表格边框、单元格边框、背景色、字体大小等。下面是一些基本的样式设置：

表格边框
表格边框可以通过 border 属性来设置，该属性可以控制表格四个边框的宽度、样式和颜色。例如：

```
table {
  border: 1px solid black;
}
```
上面的代码将设置表格边框为 1 像素宽的黑色实线。

单元格边框
单元格边框可以通过 border 属性来设置，该属性可以控制单元格四个边框的宽度、样式和颜色。例如：

```
td {
  border: 1px solid black;
}
```
上面的代码将设置所有单元格的边框为 1 像素宽的黑色实线。

表格背景色
表格背景色可以通过 background-color 属性来设置，该属性可以控制表格的背景色。例如：

```
table {
  background-color: lightgray;
}
```
上面的代码将设置表格的背景色为浅灰色。

单元格背景色
单元格背景色可以通过 background-color 属性来设置，该属性可以控制单元格的背景色。例如：

```
td {
  background-color: lightblue;
}
```
表格样式
CSS 可以对表格的各个部分进行样式设置，包括表格本身、表头、表格行、表格单元格等。

表格样式属性
border-collapse
border-collapse 属性用于设置表格边框的合并方式，可选值为 collapse 和 separate。如果设置为 collapse，相邻单元格的边框会合并为一个边框，如果设置为 separate，则相邻单元格的边框会分开。

```
table {
  border-collapse: collapse;
}
```
border-spacing
border-spacing 属性用于设置表格单元格之间的间距，该属性只有在 border-collapse 属性值为 separate 时才会生效。

```
table {
  border-collapse: separate;
  border-spacing: 10px;
}
```
caption-side
caption-side 属性用于设置表格标题的位置，可选值为 top、bottom、left、right。

```
table {
  caption-side: top;
}
```
empty-cells
empty-cells 属性用于设置表格中空单元格的显示方式，可选值为 show 和 hide。

```
table {
  empty-cells: hide;
}
```
表头样式
表头（`<thead>`）标签通常用于表示表格的列标题。

```
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>女</td>
    </tr>
  </tbody>
</table>
```
可以使用 background-color、color、text-align 等属性来设置表头的样式。

```
thead {
  background-color: #f5f5f5;
  color: #333;
  text-align: left;
}
```

该分类下的相关小册推荐：

编程入门课：HTML(5)从入门到实战