html开发笔记20-合并单元格-列和行

、什么是合并单元格？

一个表格中分为行和列，有时候你经常在网页中看到类似这样的表格，有时候是合并了列，有时候是合并了行。那么这个是怎么做的？也是通过下面的方法实现的。

二、怎么合并？

向单元格添加属性即可实现，合并列和行的属性不一样

1、合并列的属性：clospan="2" //要合并几列数字就是几

2、合并行的属性：rowspan="2" //同理，要合并几行数字就是几

3、合并后的单元格（行或列）必然会自动多出来一个，需要手动删掉。

4、重点：合并单元格只和 td 标签有关系：

（1）合并列：是左右合并，在左侧的 td 标签中添加 colspan="2" 要合并的 td 的数量。

（2）合并行：是上下合并，在上面的 td 标签中添加 rowspan="2" 要合并的td的数量。

（3）合并完后删除多余的 td 标签。

三、两个属性的用法

1、合并列的用法：

（1）首先确定你要合并的单元格在第几行第几列，然后找到它，从他的td标签中添加属性。

例如要合并第4行的，第4和第5列：


<tr>
    <td>第三节</td>
    <td>html</td>
    <td>css</td>
    <td colspan="2">php</td> <!-- 合并 列 的用法-->
    <td>php</td>
  </tr>

2、合并行的用法：

例如下面：合并第3行和第4行的第1列。

完整代码：↓

数据密集型文档和网页中，复杂表格结构是必不可少的。它们帮助用户理解大量的信息和数据关系。本文将详细介绍复杂表格的设计要点，提供实用的例子，并展示如何使用HTML代码来创建这些表格。

复杂表格的设计要点

1. 清晰的层次结构

复杂表格应该有明确的层次结构，以便用户可以轻松地从总体到细节地阅读信息。这通常通过使用标题行和列来实现。

2. 一致的对齐

数据应该根据其类型进行对齐，例如，数字通常右对齐以便于比较，而文本则左对齐。

3. 合理的分隔

使用边框和底色来区分不同的行和列，以增强可读性。

4. 简洁的标注

对于包含复杂数据的表格，应该提供清晰的标注和脚注，以便用户理解数据的来源和含义。

表格实例与HTML代码

实例 1: 带有合并单元格的表格

这个表格显示了一个团队成员在上半年和下半年的表现评估。

<table border="1">
  <thead>
    <tr>
      <th rowspan="2">成员</th>
      <th colspan="2">上半年</th>
      <th colspan="2">下半年</th>
    </tr>
    <tr>
      <th>项目1</th>
      <th>项目2</th>
      <th>项目1</th>
      <th>项目2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>良好</td>
      <td>优秀</td>
      <td>优秀</td>
      <td>良好</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>合格</td>
      <td>良好</td>
      <td>良好</td>
      <td>优秀</td>
    </tr>
  </tbody>
</table>

实例 2: 带有子标题的复杂表格

这个表格显示了一个公司季度财务报告的简化版本。

<table border="1">
  <thead>
    <tr>
      <th></th>
      <th>Q1</th>
      <th></th>
      <th>Q2</th>
      <th></th>
      <th>Q3</th>
      <th></th>
      <th>Q4</th>
      <th></th>
    </tr>
    <tr>
      <th>财务报告</th>
      <th>收入</th>
      <th>支出</th>
      <th>收入</th>
      <th>支出</th>
      <th>收入</th>
      <th>支出</th>
      <th>收入</th>
      <th>支出</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2020年</td>
      <td>50</td>
      <td>30</td>
      <td>70</td>
      <td>40</td>
      <td>60</td>
      <td>50</td>
      <td>80</td>
      <td>60</td>
    </tr>
    <tr>
      <td>2021年</td>
      <td>55</td>
      <td>35</td>
      <td>75</td>
      <td>45</td>
      <td>65</td>
      <td>55</td>
      <td>85</td>
      <td>65</td>
    </tr>
  </tbody>
</table>

实例 3: 具有行跨度的表格

这个表格展示了不同设备对于特定功能的支持程度。

<table border="1">
  <thead>
    <tr>
      <th>功能</th>
      <th>支持的设备</th>
      <th>兼容性</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">视频播放</td>
      <td>手机</td>
      <td>高</td>
    </tr>
    <tr>
      <td>平板</td>
      <td>高</td>
    </tr>
    <tr>
      <td>电脑</td>
      <td>中</td>
    </tr>
    <tr>
      <td rowspan="2">音频播放</td>
      <td>手机</td>
      <td>高</td>
    </tr>
    <tr>
      <td>智能音箱</td>
      <td>高</td>
    </tr>
    <tr>
      <td rowspan="2">文档编辑</td>
      <td>电脑</td>
      <td>高</td>
    </tr>
    <tr>
      <td>平板</td>
      <td>中</td>
    </tr>
  </tbody>
</table>

最佳实践

简化设计：避免使用过多的装饰性元素，如阴影或渐变。
数据可比性：确保相似性质的数据在表格中是可比较的。
注释和说明：在表格下方提供必要的注释和数据来源说明。
测试：在不同的设备和屏幕尺寸上测试表格的显示效果。

复杂表格结构是展示和理解多维数据的强大工具。通过遵循上述设计原则和实例，你可以创建清晰、有效的表格来提高你的数据呈现能力。

天我们说下HTML的表格结构标签，包含<thead></thead>、<tbody></tbody>等。

<thead></thead> 用于定义表格的头部，<thead>内部必须包含<tr>标签，一般是位于第一行。头部区域
<tbody></tbody>用于定义表格的主体，主要用于放数据本体。主题区域。
以上两个标签都是放在<table></table>标签中

先看下效果:

然后看下代码:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

在<body>中，我们看到层次分明的三个部分

首先是页面整体配置:

然后是head部分

接下来是tbody部分

接下来说下合并单元格

特殊情况下，可以把多个单元格合并为一个单元格，只需要了解简单合并单元格就可以了。

合并单元格方式：跨行合并:rowspan="合并单元格的个数"跨列合并:colspam="合并单元格的个数"
目标单元格
合并单元格的步骤
跨行合并跨列合并

综上显示:

目标单元格:

跨行:最上侧单元格为目标单元格，写合并代码

跨列:最左侧单元格为目标单元格，写合并代码

首先，需要先确定是跨行还是跨列合并

其次，找到目标单元格，写上合并方式=合并的单元格数量，比如 <td colspan="2"></td>

最后，删除多余的单元格

先创建一个3x3的单元格，代码如下:

对应代码:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<h1>今天我们学习合并单元格</h1>

<body>

<h3>首先，我们先创建一个3x3的单元格</h3>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

按照上面的代码试了一下，发现不行，重新写了测试代码

先看样式:

然后进行单元格合并:

为啥我的是这样呢，是准备合并第一行的第二列和第三列数据

先看下代码:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<tr>

>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

发现是还没有删除第三行的代码，格子给挤出去了。现在看就好了

我们看下全部代码:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<tr>

>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

好的，今天就先到这里，大家下周再见

在线咨询

上一篇：十款Chrome 扩展工具，提高你的开发效率
下一篇：如何使用FTP软件连接WordPress网站

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html开发笔记20-合并单元格-列和行

、什么是合并单元格？

二、怎么合并？

三、两个属性的用法

复杂表格的设计要点

1. 清晰的层次结构

2. 一致的对齐

3. 合理的分隔

4. 简洁的标注

表格实例与HTML代码

实例 1: 带有合并单元格的表格

实例 2: 带有子标题的复杂表格

实例 3: 具有行跨度的表格

最佳实践

您的项目需求