如何使用 CSS 设置表格布局算法？

在网页中，表格布局是非常常用的一种布局方式，可以用来展示数据、排版等。而 CSS 可以用来设置表格的样式和布局。

表格基础

在 HTML 中，表格通常使用 <table> 标签来定义。一个基本的表格由多个行组成，每行由多个列组成，列使用 <td> 标签，行使用 <tr> 标签。

<table>
  <tr>
    <td>列1</td>
    <td>列2</td>
    <td>列3</td>
  </tr>
  <tr>
    <td>列4</td>
    <td>列5</td>
    <td>列6</td>
  </tr>
  <!-- 可以有多个行 -->
</table>

上面的代码定义了一个 2 行 3 列的表格，每个单元格都是普通的文本。

CSS 样式

使用 CSS 可以设置表格的样式，如边框、颜色、背景色等。

table {
  border-collapse: collapse; /* 合并边框 */
  border: 1px solid #ccc; /* 设置边框样式 */
}

td {
  padding: 10px; /* 设置内边距 */
}

上面的代码设置了表格的边框为灰色，单元格的内边距为 10px，border-collapse 属性用于合并相邻单元格的边框，让表格更美观。

表格布局

除了需要美观的样式，表格的布局也非常重要。CSS 提供了多种方式来设置表格的布局和对齐方式。

表格宽度和边距

可以使用 width 属性来设置表格的宽度，也可以使用 margin 属性来设置表格与其它元素之间的间距。

table {
  width: 100%; /* 表格宽度为父元素的 100% */
  margin-bottom: 20px; /* 表格下方留出 20px 的空白 */
}

单元格宽度和高度

可以使用 width 和 height 属性来设置单元格的宽度和高度。

td {
  width: 100px; /* 单元格宽度为 100px */
  height: 50px; /* 单元格高度为 50px */
}

表格对齐方式

可以使用 text-align 属性来设置表格中文本的对齐方式。

th, td {
  text-align: center; /* 文本居中显示 */
}

th {
  background-color: #eee; /* 表头背景色 */
}

上面的代码将表格中的文本居中对齐，并为表头设置了灰色背景色。

表格边框和间距

可以使用 border-spacing 属性来设置单元格间的间距。

table {
  border-spacing: 10px; /* 单元格间距为 10px */
}

使用 border-collapse 属性可以将表格边框合并为一条。

table {
  border-collapse: collapse; /* 合并表格边框 */
}

最终，我们可以将上面的代码合并成一个完整的示例。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>22</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

<style>
  table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    border-spacing: 10px;
  }

  th, td {
    padding: 10px;
    text-align: center;
  }

  th {
    background-color: #eee;
  }
</style>

这样就可以得到一个带有表头的表格，具备美观的样式和良好的布局。