CSS表格

CSS表格可以让你用样式控制HTML表格。它可以让表格看起来更美观和易于阅读，更适合你的网站主题。

基础语法

HTML表格由 table 标签定义。每个表格行由 tr 标签定义。每个单元格由 td 标签定义。

<table>
  <tr>
    <td>单元格 1</td>
    <td>单元格 2</td>
  </tr>
  <tr>
    <td>单元格 3</td>
    <td>单元格 4</td>
  </tr>
</table>

设置表格样式需要通过CSS样式表。以下是一些常用的表格样式属性：

1. 表格宽度和表格边框

table {
  width: 100%; /* 表格宽度 */
  border: 1px solid #ccc; /* 表格边框 */
}

2. 表头样式

th {
  background-color: #f2f2f2; /* 表头颜色 */
  text-align: left; /* 表头文本对齐 */
  padding: 8px; /* 表头内边距 */
}

3. 单元格样式

td {
  border-bottom: 1px solid #ddd; /* 单元格下边框 */
  text-align: left; /* 单元格文本对齐 */
  padding: 8px; /* 单元格内边距 */
}

4. 鼠标悬停样式

tr:hover {
  background-color: #f5f5f5; /* 鼠标悬停时的颜色 */
}

示例

以下是一个示例表格的CSS代码：

table {
  width: 100%;
  border: 1px solid #ccc;
}

th {
  background-color: #f2f2f2;
  text-align: left;
  padding: 8px;
}

td {
  border-bottom: 1px solid #ddd;
  text-align: left;
  padding: 8px;
}

tr:hover {
  background-color: #f5f5f5;
}

以下是示例表格的HTML代码：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>22</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>28</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>25</td>
    <td>广州</td>
  </tr>
</table>

更新后的表格将具有以下外观：

| 姓名 | 年龄 | 城市 | | ---- | ---- | ----- | | 张三 | 22 | 北京 | | 李四 | 28 | 上海 | | 王五 | 25 | 广州 |

结论

CSS表格是一种非常强大的工具，可以让您更好地控制HTML表格的外观和感觉。用合适的样式，表格会更加美观，易于理解和阅读，这对于网站的用户体验来说是非常重要的。