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

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

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

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

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

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

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

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

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

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

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

  1. <table>
  2. <tr>
  3. <td>单元格1</td>
  4. <td>单元格2</td>
  5. </tr>
  6. <tr>
  7. <td>单元格3</td>
  8. <td>单元格4</td>
  9. </tr>
  10. </table>

上面的 HTML 代码将创建一个包含两行两列的表格,其中第一行的单元格内容为“单元格1”和“单元格2”,第二行的单元格内容为“单元格3”和“单元格4”。

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

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

  1. table {
  2. border: 1px solid black;
  3. }

上面的代码将设置表格边框为 1 像素宽的黑色实线。

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

  1. td {
  2. border: 1px solid black;
  3. }

上面的代码将设置所有单元格的边框为 1 像素宽的黑色实线。

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

  1. table {
  2. background-color: lightgray;
  3. }

上面的代码将设置表格的背景色为浅灰色。

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

  1. td {
  2. background-color: lightblue;
  3. }

表格样式
CSS 可以对表格的各个部分进行样式设置,包括表格本身、表头、表格行、表格单元格等。

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

  1. table {
  2. border-collapse: collapse;
  3. }

border-spacing
border-spacing 属性用于设置表格单元格之间的间距,该属性只有在 border-collapse 属性值为 separate 时才会生效。

  1. table {
  2. border-collapse: separate;
  3. border-spacing: 10px;
  4. }

caption-side
caption-side 属性用于设置表格标题的位置,可选值为 top、bottom、left、right。

  1. table {
  2. caption-side: top;
  3. }

empty-cells
empty-cells 属性用于设置表格中空单元格的显示方式,可选值为 show 和 hide。

  1. table {
  2. empty-cells: hide;
  3. }

表头样式
表头(<thead>)标签通常用于表示表格的列标题。

  1. <table>
  2. <thead>
  3. <tr>
  4. <th>姓名</th>
  5. <th>年龄</th>
  6. <th>性别</th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td>张三</td>
  12. <td>20</td>
  13. <td></td>
  14. </tr>
  15. <tr>
  16. <td>李四</td>
  17. <td>22</td>
  18. <td></td>
  19. </tr>
  20. </tbody>
  21. </table>

可以使用 background-color、color、text-align 等属性来设置表头的样式。

  1. thead {
  2. background-color: #f5f5f5;
  3. color: #333;
  4. text-align: left;
  5. }

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