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

完整代码：↓

挑战30天在头条写日记#

HTML是一种用于创建网页结构和内容的标记语言，其中包含了许多标签，可以用于排版、布局和展示内容。本文将详细介绍HTML中的<tr>和<td>标签的使用方法，并通过示例展示如何创建表格。

1. <tr>标签的作用： <tr>标签代表HTML表格中的一行（行数据），它可以包含一个或多个<td>元素作为单元格。

2. <td>标签的作用： <td>标签用于定义表格中的一个单元格（列数据），可以包含文本、图像、链接等内容。

3. 如何使用<tr>和<td>： 在使用<tr>和<td>标签时，首先需要创建一个<table>元素作为表格的容器，然后在其中嵌套<tr>和<td>标签，如下所示：

htmlCopy code<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

4. 表格样式： 可以使用CSS来为表格添加样式，如设置边框、背景颜色等。以下是一个简单的示例：

htmlCopy code<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
</style>

5. 示例应用： 以下示例演示了如何使用<tr>和<td>标签创建一个包含姓名、年龄和城市的简单表格：

htmlCopy code<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
    }
  </style>
</head>
<body>

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>城市</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>28</td>
    <td>广州</td>
  </tr>
</table>

</body>
</html>

6. 书籍参考：

"HTML and CSS: Design and Build Websites" by Jon Duckett
"Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics" by Jennifer Niederst Robbins

7. 总结： 通过本文的介绍，我们了解了HTML中<tr>和<td>标签的基本用法，以及如何创建简单的表格和添加样式。使用这些标签，我们可以轻松地创建具有结构和内容的网页表格，提升页面的可读性和可视性。

天我们说下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>

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

在线咨询

上一篇：碎片时间学编程「112]：转义 HTML
下一篇：使用 HTML5 Canvas 和 JavaScript 开发动画气泡：分步教程

您的项目需求

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

整合营销服务商

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

、什么是合并单元格？

二、怎么合并？

三、两个属性的用法

您的项目需求