如何为HTML表格单元格单独设置颜色并实现表头跨列居中

嘿，我来帮你搞定这两个小问题！先从表头的跨列居中说起，再一步步教你给每个单元格单独上色～

一、实现表头跨列居中 #

你现在的表头<th>只占了一列宽度，自然没法在两列中间居中。只需要给<th>加上colspan="2"属性，它就会自动横跨两列，而且文字默认就是居中的！修改后的表头代码是：

<th colspan="2">name</th>

二、单独为表格单元格设置颜色 #

这里给你两种实用方法，选自己顺手的来就行：

方法1：用CSS的:nth-child组合选择器定位单元格 #

不用改动HTML结构，直接通过行和列的位置精准选中单元格。比如要选第2行第1列的单元格，就用tr:nth-child(2) td:nth-child(1)，然后设置背景色即可。下面是完整的CSS示例，我给几个单元格加了不同颜色，你可以照着这个格式扩展：

table, td {
  border: 1px solid black;
  border-collapse: collapse;
}
td {
  height: 50px;
  width: 100px;
  text-align: center;
  padding: 0px;
}
th {
  height: 30px;
  text-align: center;
}
/* 表头跨列后可手动设置宽度等于两列之和，让样式更规整 */
th[colspan="2"] {
  width: 200px;
}

/* 单独设置单元格颜色示例 */
tr:nth-child(1) td:nth-child(1) { background-color: #ffcccc; } /* 第一行第一列 */
tr:nth-child(1) td:nth-child(2) { background-color: #ccffcc; } /* 第一行第二列 */
tr:nth-child(2) td:nth-child(1) { background-color: #ccccff; } /* 第二行第一列 */
tr:nth-child(3) td:nth-child(2) { background-color: #fff000; } /* 第三行第二列 */
/* 其他单元格继续按这个格式添加就行 */

方法2：给单元格加class（更直观，适合新手） #

如果觉得行号列号容易搞混，直接给每个<td>加个自定义class，然后在CSS里对应设置颜色，这样一眼就能看出哪个单元格对应哪种颜色：

修改后的HTML部分示例：

<tr>
  <td class="cell-1a">1<br>a</td>
  <td class="cell-1b">2<br>b</td>
</tr>
<tr>
  <td class="cell-2a">3<br>c</td>
  <td class="cell-2b">4<br>d</td>
</tr>

对应的CSS：

.cell-1a { background-color: #ff9999; }
.cell-1b { background-color: #99ff99; }
.cell-2a { background-color: #9999ff; }
.cell-2b { background-color: #ffff99; }

完整的示例代码 #

把两个修改整合到一起，你可以直接复制使用：

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
  border: 1px solid black;
  border-collapse: collapse;
}
td {
  height: 50px;
  width: 100px;
  text-align: center;
  padding: 0px;
}
th {
  height: 30px;
  text-align: center;
}
th[colspan="2"] {
  width: 200px;
}

/* 用:nth-child设置颜色的示例 */
tr:nth-child(1) td:nth-child(1) { background-color: #ffcccc; }
tr:nth-child(1) td:nth-child(2) { background-color: #ccffcc; }
tr:nth-child(2) td:nth-child(1) { background-color: #ccccff; }
tr:nth-child(2) td:nth-child(2) { background-color: #fff000; }
tr:nth-child(3) td:nth-child(1) { background-color: #ffccff; }
tr:nth-child(3) td:nth-child(2) { background-color: #ccffff; }
tr:nth-child(4) td:nth-child(1) { background-color: #ff9900; }
tr:nth-child(4) td:nth-child(2) { background-color: #0099ff; }
tr:nth-child(5) td:nth-child(1) { background-color: #9900ff; }
tr:nth-child(5) td:nth-child(2) { background-color: #00ff99; }
</style>
</head>
<body>
<table>
  <th colspan="2">name</th>
  <tr>
    <td>1<br>a</td>
    <td>2<br>b</td>
  </tr>
  <tr>
    <td>3<br>c</td>
    <td>4<br>d</td>
  </tr>
  <tr>
    <td>5<br>e</td>
    <td>6<br>f</td>
  </tr>
  <tr>
    <td>7<br>g</td>
    <td>8<br>h</td>
  </tr>
  <tr>
    <td>9<br>i</td>
    <td>10<br>j</td>
  </tr>
</table>
</body>
</html>

内容来源于stack exchange