[分享]css与html分离设置表格

在网页设计中，我们常常需要使用表格来展示数据。而为了更好地管理和维护代码，我们可以使用 HTML 和 CSS 分离的方法来设置表格样式。首先，我们在 HTML 中定义表格的结构和内容： 姓名 年龄...

在网页设计中，我们常常需要使用表格来展示数据。而为了更好地管理和维护代码，我们可以使用 HTML 和 CSS 分离的方法来设置表格样式。

首先，我们在 HTML 中定义表格的结构和内容：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>女</td>
    </tr>
  </tbody>
</table> 

接下来，我们使用 CSS 来设置表格样式。我们可以使用 class 或 id 来选择表格中的不同元素，为它们设置样式。

/* 设置表格边框 */
table {
  border-collapse: collapse;
  border: 1px solid #ccc;
}

/* 设置表头样式 */
thead {
  background-color: #f5f5f5;
}

/* 设置表头单元格样式 */
thead th {
  border: 1px solid #ccc;
  padding: 10px;
}

/* 设置表格主体样式 */
tbody {
  text-align: center;
}

/* 设置表格内容单元格样式 */
tbody td {
  border: 1px solid #ccc;
  padding: 10px;
} 

通过以上代码，我们可以为表格设置边框，为表头和表格内容设置不同的背景颜色和边框样式。同时，我们也可以为表头和表格内容设置不同的字体大小、颜色等样式。

综上所述，使用 HTML 和 CSS 分离的方法来设置表格样式，不仅可以更好地管理和维护代码，还可以使页面更加美观和规范。