HTML5+CSS3_4_表格标签（合并单元格）

泠泠七弦上111

于 2024-07-15 21:38:56 发布

阅读量26

点赞数 2

分类专栏： HTML5+CSS3 文章标签： html5 前端

本文链接：https://blog.csdn.net/2301_81057751/article/details/140449749

版权

HTML5+CSS3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果图

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格标签</title>
</head>

<body>
  <!-- 
  colspan跨列合并单元格，rowspan跨行合并单元格
  注意：合并单元格不能跨过表格结构标签合并
  -->
  <table border="1">
    <thead>
      <tr>
        <th>科目</th>
        <th>张三</th>
        <th>李四</th>
        <th>王五</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>数学</td>
        <td colspan="2">100</td>
        <td rowspan="2">98</td>
      </tr>
      <tr>
        <td>语文</td>
        <td>85</td>
        <td>93</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>总分</td>
        <td>185</td>
        <td>193</td>
        <td>196</td>
      </tr>
    </tfoot>
  </table>
  <!-- 
  thead、tbody、tfoot是表格结构标签，让表格结构、语义更清晰
  但表格结构标签加与不加，肉眼在浏览器上看不出区别，所以也可省略
  -->
</body>

</html>