09-HTML-表格标签(合并单元格)

news2024/10/6 2:25:37
标签描述
<table>定义表格
<caption>定义表格标题。
<th>定义表格中的表头单元格。
<tr>定义表格中的行。
<td>定义表格中的单元。
<thead>定义表格中的表头内容。
<tbody>定义表格中的主体内容。
<tfoot>定义表格中的表注内容(脚注)。
<col>定义表格中一个或多个列的属性值。
<colgroup>定义表格中供格式化的列组。
<table border="1">
  <caption>My Table</caption>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
      <td>Row 1, Column 3</td>
    </tr>
    <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total 1</td>
      <td>Total 2</td>
      <td>Total 3</td>
    </tr>
  </tfoot>
</table>


表格标签属性: 

属性描述
align
  • left
  • center
  • right

不赞成使用。请使用样式代替。

规定表格相对周围元素的对齐方式。

bgcolor
  • rgb(x,x,x)
  • #xxxxxx
  • colorname

不赞成使用。请使用样式代替。

规定表格的背景颜色。

borderpixels规定表格边框的宽度。
cellpadding
  • pixels
  • %
规定单元边沿与其内容之间的空白。
cellspacing
  • pixels
  • %
规定单元格之间的空白。
frame
  • void
  • above
  • below
  • hsides
  • lhs
  • rhs
  • vsides
  • box
  • border
规定外侧边框的哪个部分是可见的。
rules
  • none
  • groups
  • rows
  • cols
  • all
规定内侧边框的哪个部分是可见的。
summarytext规定表格的摘要。
width
  • %
  • pixels
规定表格的宽度。

合并单元格: 

rowspan 属性:可以将一个单元格纵向合并多行,其值为合并的行数。

<table border="1">
  <tr>
    <td rowspan="2">1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td colspan="2">4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
</table>

上述代码会生成一个包含三行三列的表格,其中第一行的第一个单元格合并了两行(rowspan="2"),第二行的第二和第三个单元格合并了一列(colspan="2")。 


colspan 属性:可以将一个单元格横向合并多列,其值为合并的列数。

<table border="1">
  <tr>
    <td>1</td>
    <td colspan="2">2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td colspan="4">8</td>
  </tr>
</table>

上述代码会生成一个包含三行四列的表格,其中第一行的第二个单元格合并了两列(colspan="2"),第三行的第一个单元格合并了四列(colspan="4")。

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

API数据接口可以从几个不同的角度来看待;

一.API数据接口可以从几个不同的角度来看待&#xff1a; 1. 技术角度&#xff1a;API数据接口是一种技术实现&#xff0c;通常是以HTTP协议或其他网络协议为基础&#xff0c;并采用特定的数据格式&#xff08;如JSON或XML&#xff09;来传递数据。 2. 业务角度&#xff1a;API数…

Ubuntu22.04安装PyTorch1.12.1 GPU版本

目录 一、电脑相关信息 1. 电脑显卡环境&#xff1a; 二、安装Pytorch1.12.1/cu116&#xff08;GPU版本&#xff09; 1. 准备&#xff1a;新建虚拟环境 2. 方式一&#xff1a;用pip在线安装torch1.12.1cu116、torchvision0.13.1cu116&#xff1a;&#xff08;在pytorch官网…

堆的实现,以及画图和代码分析,建堆,堆排序,时间复杂度的分析

堆的实现 堆的概念及结构堆的实现初始化销毁返回堆顶元素判空有效数据个数 堆的插入&#xff08;向上调整算法&#xff09;删除堆顶元素&#xff0c;仍然保持堆的形态&#xff08;向下调整算法&#xff09;堆的创建向上调整法建堆向下调整建堆两种建堆方法时间复杂度向下调整法…

shell脚本之数值,冒泡排序算法

目录 一、数组 1.定义数组 2. 数组中数据类型 2.1数值类型 2.2字符类型 二、数组的用法 1. 输出数组中的值 2. 统计数组参数个数 ​编辑 3.查看数组下标列表 4.分割字符串 5.替换数组中的字符 6.删除数组 三、数组追加元素 1.方法1示例 2.方法2示例 3.方法3示例 …

Notion Ai中文指令使用技巧

Notion AI 是一种智能技术&#xff0c;可以自动处理大量数据&#xff0c;并从中提取有用的信息。它能够 智能搜索&#xff1a;通过搜索文本和查询结果进行快速访问 自动归档&#xff1a;可以根据关键字和日期自动将内容归档 内容分类&#xff1a;可以根据内容的标签和内容的…

【嵌入式Linux】MBR分区表 和 GPT分区表

文章目录 GUID以及分区表MBR分区方案GPT 分区方案GPT分区表结构 GPT分区表LBALBA0LBA1LBA 2-33python生成GPT分区表gpt分区表实例 gpt分区表查看查看百问网T113-s3固件查看友善之臂nanopi-m1-plus官方固件查看荣品RV1126固件查看f1c200s固件查看V3s的SD启动卡 原文&#xff1a;…

session和Filter

session 介绍 jsp利用servlet提供的HttpSession接口识别一个用户&#xff0c;存储这个用户的所有访问信息。默认情况下&#xff0c;jsp允许会话跟踪&#xff0c;一个新的HttpSession对象将会自动地为新的客户端实例化。禁止会话跟踪需要关掉它&#xff0c;通过将page指令中ses…

多模态:BLIP-2论文讲解

多模态&#xff1a;BLIP-2论文讲解 IntroductionMethod第一阶段第二阶段 实验 Introduction 多模态学习在近两年我们已经见证了他的快速发展&#xff0c;由于它是视觉-语言的交叉领域&#xff0c;我们自然地期待可以借助目前风头正盛的LLM来辅助完成多模态任务。 在这篇论文中…

【SAP Abap】X-DOC:SNRO - ABAP流水号应用

【SAP Abap】X-DOC&#xff1a;SNRO - ABAP流水号应用 1、定义表&#xff08;字段域&#xff09;2、定义流水号3、使用流水号4、测试程序 1、定义表&#xff08;字段域&#xff09; 2、定义流水号 Tcode: SNRO/SNUM&#xff0c; 根据以上创建的字段域 YDSNRO&#xff0c;创建对…

grep练习题

题目: 文件格式&#xff1a; 第1列&#xff1a;城市位置编号。 第2列&#xff1a;月份。 第3列&#xff1a;存储代码及出库年份。 第4列&#xff1a;产品代号。 第5列&#xff1a;产品统一标价。 第6列&#xff1a;标识号。 第7列&#xff1a;合格数量。 file.txt文件内容&a…

RabbitMQ入门案例及简单工程搭建

环境的搭建 这里是用Maven工程搭建的基础环境项目&#xff0c;这里的dome_rabbitmq就是父工程。 子工程 publisher&#xff1a;消息发布者&#xff0c;将消息发送到队列queueconsumer&#xff1a;订阅队列&#xff0c;处理队列中的消息 父工程的pom文件依赖 <?xml ver…

SpringCloud-11_Alibaba Sentinel

SpringCloud系列 SpringCloud-10_Alibaba Nacos SpringCloud-9、SleuthZipkinSpringCloud-8、Gateway网关服务SpringCloud-7_OpenFeign服务调用SpringCloud-6_Ribbon负载均衡SpringCloud-5_模块集群化 求帮助 富文本编辑器用着真伤心TT。。不知道编辑器发生了什么。。--- 用…

Android Studio Notification(状态栏通知) 不显示通知 解决

引言&#xff1a;在学习的过程中&#xff0c;我发现&#xff0c;无论怎么修改&#xff0c;甚至是直接复制了大佬的代码&#xff0c;我的程序都不呢个正确的弹出一个状态栏通知&#xff0c;在经过一晚上的纠缠后&#xff0c;终于找到了原因 通知不显示可能由多种原因引起&#…

C++自动推导与函数模板

自动推导、函数模板、类模板 目录 1. 自动推导出数据类型 2. 函数模板 基本概念注意事项函数模板的具体化函数模板分文件编写函数模板高级函数后置返回类型 1. 自动推导出数据类型 auto关键字 linux 系统下使用的话&#xff0c;要在编译时 —stdc11 注意&#xff1a; a…

关于B+树的介绍、用途和c++代码实现

数据结构和算法的重要性不言而喻&#xff0c;一些优秀的开源项目的核心和灵魂就是数据结构、算法。在实际的编程中我们经常可以在各种框架、算法中看见B树、B树的身影。特别是在数据库的数据库引擎中&#xff0c;它们更是占据着重要的地位。 下面我将通过简单的二叉树&#xff…

2023/5/12总结

这俩天主要花时间在项目上&#xff1a; 实现了创建群聊和添加群聊&#xff1a; 点击创建群聊&#xff1a; &#xff0c;点击确定之后&#xff0c;会分配到一个群聊&#xff0c;默认头像会是下面这个圆形的头像&#xff1a; 添加群聊&#xff1a; 如果你要加入的群聊在自己的列…

06-HTML-列表标签

1、 <ul> 标签定义无序列表。 2、<ol> 标签定义有序列表。 属性值描述compactcompact HTML5 中不支持。HTML 4.01 中不赞成使用。 规定列表呈现的效果比正常情况更小巧。 reversedreversed规定列表顺序为降序。(9,8,7...)startnumber规定有序列表的起始值。type 1A…

为什么使用ConcurrentHashMap

currentHashMap的介绍 ConcurrentHashMap是线程安全并且高效的一种容器,我们就需要研究一下ConcurrentHashMap为什么既能够保证线程安全,又可以保证高效的操作。 为什么使用ConcurrentHashMap,我们就需要和HashMap以及HashTable进行比较&#xff1f; HashMap是线程不安全的&…

唐朔飞计组 第六章运算方法简单复习

在计算机中参与运算的数有两类&#xff1a;有符号数和无符号数 int 和unsigned unsigned可以看成是正数或者绝对值。 有符号数分为原码反码和补码 原码和反码的表示范围是相同的 但是补码由于将-0的位置换成2^n所以补码表示范围比原码和反码要多一位&#xff0c; 判断溢出比较…

诚邀社区开发者参与DeepBook测试和集成

DeepBook是Sui的基础流动性层&#xff0c;Sui基金会诚挚邀请社区开发者参与其测试和集成。 DeepBook为Sui的原生中央订单簿&#xff08;Central Limit Order Book&#xff0c;CLOB&#xff09;和基础流动性层&#xff0c;将会在未来数周准备完成&#xff0c;我们邀请大家参与测…