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>

在这里插入图片描述

相关阅读:
Unity Raycast开启了新的性能时代
一文梳理ICML 2022中图机器学习热点和趋势
虚拟列表（附带动态加载）原理及实现
洛谷-P11942 [KTSC 2025] 重塑矩阵题解
阿里云ECS11月销量王 99元/年
Css3使用
android 在后台任务栏隐藏应用程序
排序相关应用
MES在流程和离散制造企业的15个差别（上）
java面试题整理《微服务篇》六

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