HTML表格合并行和列

1.概述
2.合并行：rowspan
2.合并列：colspan

1.概述

在设计表格时，有时我们需要将“横向的N个单元格”或者“纵向的N个单元格”合并成一个单元格（类似Word的表格合并），这个时候就需要用到“合并行”或“合并列”

2.合并行：rowspan

在HTML中，我们可以使用rowspan属性来合并行。所谓的合并行，指的是将“纵向的N个单元格”合并

语法：

<td rowspan="跨域的行数">td>

实例：

DOCTYPE html>
<html lang="utf-8">
<head>
    <meta charset="utf-8"/>
    <title>rowspantitle>
    <style>
        table, tr, td {
            border: 1px solid silver;
        }
    style>
head>
<body>
<table>
    <tr>
        <td>姓名:td>
        <td>小明td>
    tr>
    <tr>
        <td rowspan="2">喜欢水果:td>
        <td>苹果td>
    tr>
    <tr>
        <td>香蕉td>
    tr>
table>
body>
html>

在这里插入图片描述

2.合并列：colspan

在HTML中，我们可以使用colspan属性来合并列。所谓的合并列，指的是将“横向的N个单元格”合并

语法：

<td colspan="跨域的列数">td>

实例：

DOCTYPE html>
<html lang="utf-8">
<head>
    <meta charset="utf-8"/>
    <title>colspan属性title>
    <style>
        table, tr, td {
            border: 1px solid silver;
        }
    style>
head>
<body>
<table>
    <tr>
        <td colspan="2">前端开发技术td>
    tr>
    <tr>
        <td>HTMLtd>
        <td>CSStd>
    tr>
    <tr>
        <td>JavaScripttd>
        <td>jQuerytd>
    tr>
table>
body>
html>

在这里插入图片描述

相关阅读:
kubernetes向每个命名空间的默认账户添加ImagePullSecrets
Spring 更简单的读取和存储对象
梯度消失和梯度爆炸问题详解
vue 实现自定义分页打印 window.print
【数据结构初阶】一文详解顺序栈和链队列的基本操作
华为机试真题 Java 实现【积木最远距离】【2022.11 Q4 新题】
GUI 应用：socket 网络聊天室
2019史上最全java面试题题库大全800题含答案
C++ 流（stream）总结
深度学习【使用seq2seq实现聊天机器人】

原文地址：https://blog.csdn.net/Gherbirthday0916/article/details/127109413