如何不使用CSS仅用HTML自定义WordPress表格的表头

安全阿岳

2026-10-3

解决方案

你只需要调整表头部分的HTML标签，使用表格原生的表头属性即可实现目标效果，全程无需额外引入CSS：

核心修改点

将原代码<tbody>中的第一行表头内容移出，放到新增的<thead>标签包裹的区域
把表头单元格原来的<td>标签替换为HTML原生表头标签<th>
给<th>添加HTML原生属性设置样式：用bgcolor设置表头背景色，text设置文字颜色，align控制对齐方式

修改后完整代码

<figure class="wp-block-table is-style-stripes"><table>
<thead>
<tr>
<th bgcolor="#2d3748" text="#ffffff" align="left"><strong>Nom </strong></th>
<th bgcolor="#2d3748" text="#ffffff" align="left"><strong>Prénom</strong></th>
<th bgcolor="#2d3748" text="#ffffff" align="left"><strong>S1 / S2</strong></th>
</tr>
</thead>
<tbody>
<tr><td>Jack</td><td>Ouille</td><td><span class="has-inline-color" style="color: #0e12d8;">12</span><br><span class="has-inline-color" style="color: #db1b1b;">11</span></td></tr>
<tr><td>Moe</td><td>Amed</td><td><span class="has-inline-color" style="color: #0e12d8;">20</span><br><span class="has-inline-color" style="color: #db1b1b;">19</span></td></tr>
<tr><td>Eric</td><td>Zhumour</td><td><span class="has-inline-color" style="color: #0e12d8;">1</span><br><span class="has-inline-color" style="color: #db1b1b;">2</span></td></tr>
<tr><td>Tom</td><td>Jaidulard</td><td><span class="has-inline-color" style="color: #0e12d8;">11</span><br><span class="has-inline-color" style="color: #db1b1b;">17</span></td></tr>
<tr><td>Marie</td><td>Pleinedegraisse</td><td><span class="has-inline-color" style="color: #0e12d8;">8</span><br><span class="has-inline-color" style="color: #db1b1b;">14</span></td></tr>
<tr><td>Adolphe</td><td>Litière</td><td><span class="has-inline-color" style="color: #0e12d8;">1</span><br><span class="has-inline-color" style="color: #db1b1b;">0</span></td></tr>
</tbody></table></figure>