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

前情知晓

层级关系如下：

<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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/12790.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！