You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

求助:如何制作复杂HTML5表格?学校项目卡壳急需协助

复杂HTML5表格实现示例

以下是一个包含单元格合并的复杂表格代码,你可以根据项目需求替换内容:

<table border="1" cellpadding="8" cellspacing="0">
  <thead>
    <tr>
      <th rowspan="2">序号</th>
      <th colspan="2">个人信息</th>
      <th colspan="3">课程成绩</th>
    </tr>
    <tr>
      <th>姓名</th>
      <th>班级</th>
      <th>语文</th>
      <th>数学</th>
      <th>英语</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>高一(1)班</td>
      <td>92</td>
      <td>88</td>
      <td>95</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>高一(2)班</td>
      <td>85</td>
      <td>90</td>
      <td>87</td>
    </tr>
    <tr>
      <td colspan="6">总成绩统计:语文平均分88.5,数学平均分89,英语平均分91</td>
    </tr>
  </tbody>
</table>

核心用法说明

  • rowspan="n":设置单元格垂直合并n行
  • colspan="n":设置单元格水平合并n列
  • <thead>和<tbody>标签用于划分表格结构,让代码更易维护

你只需把示例中的文本、合并参数替换成项目实际内容,调整border、cellpadding、cellspacing的值可修改表格的边框和内边距样式。

内容的提问来源于stack exchange,提问作者Sougouu

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.18 22:12:01