程序员经验分享-hwhale

HTML表格嵌套、合并表格

2023-11-17

一、表格元素< table>

table常用属性

border：边框像素 
width，height：表格宽度/高度 
bordercolor：表格边框颜色 
bgcolor：表格背景颜色

二、tr，th，td元素

th和td元素是在tr中的 
一组tr代表一行 
一组th或td代表一列

<table border="1" width="800" bordercolor="#777777" bgcolor="#5f9ea0"> <tr> <th>asa</th> </tr> <tr> <td>hahha</td> </tr> </table>

效果 
这里写图片描述

从以上效果和代码可以看出，th表示表头，会自动居中，td表示普通内容

三、合并单元格(重点)

合并单元格在表格中是最重要的，需要两个属性colspan和rowspan 
1.colspan：合并的是该行的单元格，就是同一行不同列的单元格合并，比如colspan=”2”则需要删除该行一个单元格，否则超出格子 
2.rowspan：合并的是该列的单元格，同列不同行，与colspan一样若要rowspan=”2”将删除下一列的一个td或th标签，（不管删除下一列的哪一个，这一行被合并，其他元素都是在后面的，除了该列以前元素）

<table border="1" width="70" bordercolor="#777777" bgcolor="#5f9ea0"> <tr> <th>asa</th><th>asas</th><th>as</th> </tr> <tr> <td rowspan="2">hahha</td><td>hahha</td><td>hahha</td> </tr> <!-- rowspan合并该列的两个单元格，所以它的下一列将删除一个单元格--> <tr> <td colspan="2">hahha</td> </tr> <!--colspan合并该行的2个单元格，所以该行删除一个标签--> <tr> <td>hahha</td><td>hahha</td><td>hahha</td> </tr> </table>

效果 
这里写图片描述

四、表格嵌套

- 在某个th或td中加table 
- 最好在嵌套表格的地方用合并单元格（就是把嵌套的表格放入合并的单元格）

<table border="1" width="800" bordercolor="blue"> <caption><h1>阿水的阿里blog</h1></caption> <tr> <th>name</th> <th>password</th> <th>goal</th> </tr> <tr> <th>xlj</th><th colspan="2">001</th> </tr> <tr> <th>asa</th><th rowspan="2"><table border="1" width="800" bordercolor="blue"> <caption><h1>阿水的阿里blog</h1></caption> <tr> <th>name</th><th>password</th><th>goal</th> </tr> <tr> <th>xlj</th><th colspan="2">001</th> </tr> <tr> <th>asa</th><th rowspan="2">002</th><th>88</th> </tr> <tr> <th>add</th><th>76</th> </tr> </table></th><th>88</th> </tr> <tr> <th>add</th><th>76</th> </tr> </table>

五、表格练习代码

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>阿水的阿里</title> </head> <body> <table border="1" width="800" bordercolor="blue"> <caption><h1>阿水的阿里blog</h1></caption> <tr> <th>name</th> <th>password</th> <th>goal</th> </tr> <tr> <th>xlj</th><th colspan="2">001</th> </tr> <tr> <th>asa</th><th rowspan="2"><table border="1" width="800" bordercolor="blue"> <caption><h1>阿水的阿里blog</h1></caption> <tr> <th>name</th><th>password</th><th>goal</th> </tr> <tr> <th>xlj</th><th colspan="2">001</th> </tr> <tr> <th>asa</th><th rowspan="2">002</th><th>88</th> </tr> <tr> <th>add</th><th>76</th> </tr> </table></th><th>88</th> </tr> <tr> <th>add</th><th>76</th> </tr> </table> </body> </html>

效果 
这里写图片描述

以上的表格标题在table中写：

< caption>< h1>阿水的阿里blog< /h1>< /caption> 
caption是表格标题居中，并且一直跟着表格，不管表格怎么移动

转载于:https://www.cnblogs.com/robinunix/p/9172881.html

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

HTML表格嵌套、合并表格 的相关文章

随机推荐

  • Kubernetes 功能简述

    1 功能 1 1 主要功能 Kubernetes 是一个开源的容器编排平台 它提供了一系列功能来管理和部署容器化应用程序 以下是 Kubernetes 的一些主要功能 容器编排 Kubernetes 可以自动管理容器的部署 扩展和收缩 以满

  • 私有云不是真正的云计算！

    大数据产业创新服务媒体 聚焦数据 改变商业 中国云计算遇到困境 IaaS层面 阿里云 腾讯云等增长乏力 SaaS没有发展起来 反观美国 整个云计算蓬勃发展 AWS 微软云 谷歌云体量更大 增速却不低 SaaS已经高度发达 有不少市值几百亿美

  • 外包三年半，人废了一半

    如果不是女朋友和我提分手 我估计现在还没醒悟 大专生 18年通过校招进入湖南某软件公司 干了3年多的CRUD 今年年初 感觉自己不能够在这样下去了 长时间呆在一个舒适的环境会让一个人堕落 而我已经在一个企业干了3年的CRUD 已经让我变得不

  • C/C++ 课题解答（1）

    随机产生100个字符 a z 数组arrayOfChar 输入字符c 计算字符c在数组中出现的次数和位置 include

  • n的阶乘的两种方式

    n的阶乘的两种方式 递归与非递归 n 1 2 3 n 在n的阶乘中加入运行的时间 可以判断递归与非递归的运行效率 include

  • [vue-router] uncaught error during route navigation

    vue路由在加载组件之前会执行一些逻辑 尤其是生命周期的钩子函数 如果你在以上的钩子函数中 写了自己的逻辑 并报错了 就会触发 vue router uncaught error during route navigation这个错误 原因

  • 基于upload-labs的文件上传漏洞总结

    普通的前端绕过 1 抓包 2 上传jpg等格式的木马文件 3 bp上改回php后缀即可 普通绕过 1 抓包 2 上传jpg等格式的木马文件 3 bp上改后缀名为将后缀改为 php3 php4 php5 phtml等等 大小写绕过 即后缀名改

  • minikube命令

    Basic Commands 0minikube version查看版本 1minikube start启动一个集群 minikube start vm driver none image repository registry cn ha

  • ei计算机投稿 知乎,知乎热议：科研有很水的idea应该发表出来吗？

    原标题 知乎热议 科研有很水的idea应该发表出来吗 科研有很水的idea应该发表出来吗 来源 https www zhihu com question 372648294 小伙伴们 对于只能发EI 水会 OA SCI期刊那种 自己看到都觉

  • k8s基本命令

    k8s命令 https kubernetes io zh docs tutorials kubernetes basics 官网地址 基本命令 查看节点服务器 kubectl get nodes 查看命名空间 kubectl get ns

  • kettle（一）kettle介绍

    kettle介绍及组成 一 kettle 是什么 kettle 是一个ETL工具 ETL Extract Transform Load 数据抽取 转换 装载 kettle 是java编写 绿色无需安装 抽取高效稳定 kettle 主要用来对

  • 【零知ESP8266教程】快速入门5-使用按键来控制你的灯

    上节课 我们已经学习了如何制作一个简易交通灯 那么如何去控制一个LED的亮或者灭呢 此次试验采用按键来控制我们的LED 实现LED的简单控制 一 工具原料 电脑 windows系统 ESP8266开发板 micro usb线 LED灯一个

  • (模板)多项式乘法对任意数取模

    多项式乘法 系数对MOD 1000000007取模 常数巨大 慎用 只要选的K个素数乘积大于MOD MOD N 理论上MOD可以任取 define MOD 1000000007 define K 3 const int m K 100453

  • ajax怎么渲染数据,ajax数据请求渲染

    JQuery引入 html JS function var url https api douban com v2 movie search q E4 B8 89 E4 BD 93 count 1 ajax method get url d

  • 数据结构——第五章树（详细知识点总结）

    知识框架 5 1 树的基本概念 5 1 1 树的定义 树是n n gt 0 个节点的有限集 当n 0时 称为空树 在任意一棵非空树中应满足 有且仅有一个特定的称为根 Root 的结点 当n gt 1时 其余结点可分为m m gt 0 个互不

  • ArcGIS Maritime Server 开发教程（八）ArcGIS Bathymetry 扩展模块

    ArcGIS Maritime Server 开发教程 八 ArcGIS Bathymetry 扩展模块 本章导读 ArcGIS Bathymetry 扩展是 ArcGIS Maritime 解决方案中用于管理水深的重要模块 与传统的离散点

  • 内网穿透FRP详细教程

    简介 frp 是一个专注于内网穿透的高性能的反向代理应用 支持 TCP UDP HTTP HTTPS 等多种协议 可以将内网服务以安全 便捷的方式通过具有公网 IP 节点的中转暴露到公网 通过在具有公网 IP 的节点上部署 frp 服务端

  • 【笔记】构造函数的私有、公有、特权、静态成员

    根据书 javascript DOM高级程序设计 一书整理的笔记 var Myconstuctor function name 特权成员 与私有方法不同 特权方法能够被公开访问 而且还能够访问私有成员 特权方法是指在构造函数的作用域中使用t

  • 玩转wsl2之环境搭建

    Windows是市场占有率最高的桌面操作系统 很多开发人员还是习惯于在Windows系统中进行开发工作 但服务器领域多采用Linux操作系统 因此开发人员在开发过程中 经常会遇到windows系统开发的软件难以部署到Linux系统的问题 W

  • HTML表格嵌套、合并表格

    一 表格元素 lt table gt table常用属性 border 边框像素 width height 表格宽度 高度 bordercolor 表格边框颜色 bgcolor 表格背景颜色 二 tr th td元素 th和td元素是在tr

热门标签