当前位置：首页 > CSS

css制作三行三列表格

2026-02-12 18:08:36CSS

使用HTML和CSS创建三行三列表格

HTML结构部分定义一个基础的表格框架，包含三行（<tr>）和每行三个单元格（<td>）：

<table class="three-by-three">
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
  <tr>
    <td>单元格7</td>
    <td>单元格8</td>
    <td>单元格9</td>
  </tr>
</table>

基础CSS样式设置

通过CSS定义表格的边框、间距和整体样式：

css制作三行三列表格

.three-by-three {
  border-collapse: collapse; /* 合并边框 */
  width: 100%; /* 表格宽度 */
  max-width: 600px; /* 最大宽度限制 */
  margin: 20px auto; /* 居中显示 */
}

.three-by-three td {
  border: 1px solid #ddd; /* 单元格边框 */
  padding: 12px; /* 内边距 */
  text-align: center; /* 文字居中 */
}

添加悬停效果

增强交互性，当鼠标悬停在单元格上时改变背景色：

.three-by-three tr:hover td {
  background-color: #f5f5f5;
}

斑马纹样式

为表格添加交替行颜色，提高可读性：

css制作三行三列表格

.three-by-three tr:nth-child(even) td {
  background-color: #f9f9f9;
}

响应式设计

针对小屏幕设备调整表格样式：

@media (max-width: 480px) {
  .three-by-three td {
    padding: 8px; /* 减小内边距 */
    font-size: 14px; /* 调整字体大小 */
  }
}

完整代码示例

将HTML和CSS组合成一个完整示例：

<!DOCTYPE html>
<html>
<head>
<style>
.three-by-three {
  border-collapse: collapse;
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

.three-by-three td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
}

.three-by-three tr:hover td {
  background-color: #f5f5f5;
}

.three-by-three tr:nth-child(even) td {
  background-color: #f9f9f9;
}

@media (max-width: 480px) {
  .three-by-three td {
    padding: 8px;
    font-size: 14px;
  }
}
</style>
</head>
<body>

<table class="three-by-three">
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
  <tr>
    <td>单元格7</td>
    <td>单元格8</td>
    <td>单元格9</td>
  </tr>
</table>

</body>
</html>