HTML中表格标签＜table＞＜tr＞＜tb＞＜th＞中单元格的合并问题

最新推荐文章于 2023-09-25 15:24:06 发布

烨昕.

最新推荐文章于 2023-09-25 15:24:06 发布

阅读量5.1k

点赞数 6

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_73087898/article/details/130209187

版权

前情知晓

层级关系如下：

<table>

        <tr>

                <td> </td>
                <th> </th>

        </tr>

</table>

<table>...</table> 用于定义一个表格开始和结束

<tr>...</tr> 定义一行标签，一组行标签内可以建立多组由<td>或<th>标签所定义的单元格

<th>...</th> 定义表头单元格，表格中的文字将以粗体显示，在表格中也可以不用此标签

<td>...</td> 定义单元格标签，一组<td>标签将将建立一个单元格

好啦，听我来说两句吧！上面引用块是官方解释，看了之后你也不会用

tr标签向下定义一行，里面包裹的td或th再向后定义每一列 => 两者结合定义出一个单元格

合并单元格问题

牢记：tr标签定义一行，里面包裹的td或th定义每一列 => 两者结合定义出一个单元格

以实现上图效果为例：

rowspan = “2”: 向下合并 2 行

colspan = “3”：向右合并 3 列

如你所见，最左上角的那个空单元格其实是左右两个单元格合并后的结果

再看那个“上午”的单元格其实是向下合并5个单元格的结果

利用tr向下定义一行后，再用td向右定义一列，形成一个单元格

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./mystyle.css">
</head>

<body>
  <table border="1" cellspacing="0">
    <tr>
      <th colspan="2"></th>
      <th>周一</th>
      <th>周二</th>
      <th>周三</th>
      <th>周四</th>
      <th>周五</th>
    </tr>
    <tr>
      <th rowspan="5">上午</th>
      <td>1</td>
      <td>课程名称<br>教室名称</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>这里有内容</td>
    </tr>
    <tr>
      <td>5</td>
    </tr>
    <tr>
      <td rowspan="4">下午</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
    </tr>
  </table>
</body>

</html>