[分享]css列表显示成表格

发布于 2024-11-11 15:21:31

CSS中可以使用table属性来将列表显示成表格的形式。我们可以使用如下的代码来实现：

ul {
  display: table;
}

li {
  display: table-row;
}

li span {
  display: table-cell;
  padding: 5px;
}

以上代码中，我们将ul元素以表格的方式展示，li元素以表格行的方式展示，li中的span元素以表格单元格的方式展示。我们还为span元素设置了内边距，以便让表格看起来更加美观。
接下来看一下完整的代码示例：

<html>
<head>
  <style>
    ul {
      display: table;
    }
    
    li {
      display: table-row;
    }
    
    li span {
      display: table-cell;
      padding: 5px;
    }
  </style>
</head>
<body>
  <ul>
    <li>
      <span>姓名</span>
      <span>年龄</span>
      <span>性别</span>
    </li>
    
    <li>
      <span>张三</span>
      <span>23</span>
      <span>男</span>
    </li>
    
    <li>
      <span>李四</span>
      <span>25</span>
      <span>女</span>
    </li>
    
    <li>
      <span>王五</span>
      <span>21</span>
      <span>男</span>
    </li>
  </ul>
</body>
</html>

以上代码将一个包含姓名、年龄和性别的列表以表格的形式展示出来。当我们运行代码后，可以看到一个美观的表格被呈现在浏览器中。
总的来说，使用CSS将列表显示成表格是非常简单的，只需几行代码即可实现。这种方式不仅可以让我们的列表更加美观，还可以帮助我们更好地组织和展示数据。

css 教程