HTML表格作业求助：cellpadding、cellspacing等属性相关问题

常见作业问题排查方向 #

• 语义化结构缺失：未使用<thead>、<tbody>、<tfoot>区分表格不同区域，导致表格逻辑混乱
• 单元格合并错误：colspan（跨列）和rowspan（跨行）数值计算失误，造成表格布局错位
• 结构与样式耦合：直接在HTML标签中写内联样式，不符合前端开发结构样式分离的原则
• 无障碍属性缺失：未添加<caption>表格标题，或未通过scope属性明确表头与单元格的关联关系

标准表格示例（含合并单元格） #

如果你的作业涉及单元格合并，参考以下规范写法：

<table border="1">
  <caption>学生课程成绩表</caption>
  <thead>
    <tr>
      <th scope="col">学生姓名</th>
      <th scope="col">课程名称</th>
      <th scope="col">考试成绩</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">张三</td>
      <td>HTML基础</td>
      <td>92</td>
    </tr>
    <tr>
      <td>CSS进阶</td>
      <td>88</td>
    </tr>
    <tr>
      <td rowspan="2">李四</td>
      <td>HTML基础</td>
      <td>85</td>
    </tr>
    <tr>
      <td>CSS进阶</td>
      <td>90</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">班级平均成绩</td>
      <td>88.75</td>
    </tr>
  </tfoot>
</table>

提升HTML表格技能的实用方法 #

• 牢记语义化标签用法：<thead>、<tbody>、<tfoot>分别对应表头、表体、表脚，<caption>用于说明表格主题，<th>搭配scope属性明确表头作用范围
• 先画草稿再写代码：遇到复杂表格时，先在纸上画出结构，标记好需要合并的单元格及其跨行列数，再对应编写代码，降低出错概率
• 用CSS控制表格样式：放弃内联样式，通过CSS的border-collapse、text-align、padding等属性美化表格，保持结构纯净性
• 查阅权威文档：MDN的HTML表格指南覆盖了从基础到进阶的所有知识点，遇到细节问题可直接参考

内容的提问来源于stack exchange，提问作者Tareq Alshabatat