当前位置：首页 > CSS

html css 制作表格

2026-04-02 17:50:38CSS

基本表格结构

使用HTML的<table>标签创建表格框架，<tr>定义行，<td>定义单元格，<th>定义表头单元格。

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

添加边框样式

通过CSS的border属性为表格添加边框，border-collapse: collapse合并边框线。

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

表头样式优化

使用background-color和text-align增强表头可读性。

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

斑马纹效果

通过:nth-child(even)选择器实现交替行颜色。

tr:nth-child(even) {
  background-color: #f9f9f9;
}

响应式表格

添加横向滚动条适应小屏幕。

div.table-container {
  overflow-x: auto;
}

悬停高亮

使用:hover伪类提升交互体验。

html css 制作表格

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

完整示例代码

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}
th {
  background-color: #4CAF50;
  color: white;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
tr:hover {
  background-color: #ddd;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>姓名</th>
    <th>邮箱</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>王小明</td>
    <td>wang@example.com</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李小红</td>
    <td>li@example.com</td>
    <td>上海</td>
  </tr>
</table>

</body>
</html>