css制作三行三列表格

使用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控制表格的边框、间距和外观：

.three-by-three {
  border-collapse: collapse; /* 合并边框 */
  width: 100%; /* 表格宽度 */
}

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

可选增强样式

添加隔行变色效果和悬停高亮：

.three-by-three tr:nth-child(even) {
  background-color: #f2f2f2; /* 偶数行背景色 */
}

.three-by-three tr:hover {
  background-color: #ddd; /* 悬停行背景色 */
}

固定宽度布局

如果需要固定列宽，可为单元格指定统一宽度：

.three-by-three td {
  width: 33.33%; /* 三列等宽 */
}

响应式调整

针对移动设备添加媒体查询：

@media (max-width: 600px) {
  .three-by-three td {
    padding: 5px; /* 小屏幕减少内边距 */
    font-size: 14px;
  }
}