html表格

news2024/11/28 14:45:48

1.基本标签

标签名说明
table表示整体,用于包裹多个tr
tr表格每行,用于包裹td
td表格单元格,用于包裹内容

注意点:
表格嵌套关系:table>tr>td

表格table的常见属性:
在这里插入图片描述
修饰table属性的标签 需要写道table里面
border="1"边框 cellpadding="4"字与单元格之间的距离
cellspacing=“0” 取消单元格之间的距离

<table align="center" border="1" cellpadding="40" cellspacing="10">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>李旭亮</td>
            <td></td>
            <td>22</td>
        </tr>
        <tr>
            <td>饭桶</td>
            <td>未知</td>
            <td>20</td>
        </tr>
        <tr>
            <td>张三</td>
            <td></td>
            <td>-18</td>
        </tr>
    </table>

在这里插入图片描述

2.其他标签:

在这里插入图片描述
在这里插入图片描述
表格结构标签

标签名名称
thead表格头部
tbody表格主体
tfoot表格底部
<table align="center" border="1" cellspacing="0" width="300">
        <caption>学生成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>张三</td>
                <td>44</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>66</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>100</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>总结</td>
                <td>210</td>
            </tr>
        </tfoot>
    </table>

在这里插入图片描述

3.合并单元格

一:合并单元格步骤:
1、明确合并哪几个单元格
2、通过左上原则,确定保留谁,删除谁
上下合并–只保留最上的,删除其他
左右合并–只保留最左的,删除其他
3、给保留的单元格设置:
跨行合并–rowspan
跨列合并–colspan

注意点:
只有同一个结构标签的单元格才能合并,不能跨结构标签合并
(不能跨:thead、tbody、tfoot)

<table border="1" cellspacing="0" width="300" height="500">
        <thead>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>4</td>
                <td colspan="2"></td>
               
            </tr>
            <tr>
                <!-- 710合并,先把10删除,再在7所在的位置上添加rowspan -->
                <td rowspan="2">7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                
                <td>11</td>
                <td>12</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
            <!--1314合并,需要先把14删除。
            再把13的位置上添加colspan -->
                <td colspan="2">13</td>
               <td>15</td>
            </tr>
        </tfoot>
    </table>

在这里插入图片描述

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

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

相关文章

【FA-GAN:超分辨率MRI图像】

FA-GAN: Fused attentive generative adversarial networks for MRI image super-resolution &#xff08;FA-GAN&#xff1a;融合注意生成对抗网络的MRI图像超分辨率&#xff09; 高分辨率磁共振图像可以提供细粒度的解剖信息&#xff0c;但是获取这样的数据需要长的扫描时间…

UVA11426 - GCD - Extreme (II)(数论,欧拉函数)

题目链接&#xff1a;GCD - Extreme (II) - UVA 11426 - Virtual Judge (vjudge.net)​​​​​ 题意 给一个数N&#xff0c;求&#xff1a; ​​​​​​​ 其中&#xff0c;多组输入&#xff0c;输入以0结束&#xff0c;保证答案在long long范围内。 思路 很好的一道题…

移动web主轴设置和flex总结

移动web主轴设置和flex总结设置主轴方向修改主轴经常的使用场景&#xff1a;弹性盒子换行设置侧轴对齐方式flex 总结梳理主轴排列方式侧轴对齐方式-单行对齐侧轴对齐方式-多行弹性盒子换行设置主轴方向伸缩比设置主轴方向 主轴默认是水平方向, 侧轴默认是垂直方向 修改主轴方…

Linux常用命令——semanage命令

在线Linux命令查询工具(http://www.lzltool.com/LinuxCommand) semanage 默认目录的安全上下文查询与修改 补充说明 semanage命令是用来查询与修改SELinux默认目录的安全上下文。SELinux的策略与规则管理相关命令&#xff1a;seinfo命令、sesearch命令、getsebool命令、set…

天地图矢量注记图坑

http://lbs.tianditu.gov.cn/server/MapService.html瓦片图案例见下文&#xff0c;注意其中的LAYER:&#xff0c;记住口诀&#xff0c;地址里用什么&#xff0c;这个layer就用什么。比如影像注记里&#xff0c;地址用了cia_w&#xff0c;那么这个layer后面必须是cia_w&#xff…

别总写代码,这130个网站比涨工资都重要

今天推荐一些学习资源给大家&#xff0c;当然大家可以留言评论自己发现的优秀资源地址 搞学习 找书籍 冷知识 / 黑科技 写代码 资源搜索 小工具 导航页&#xff08;工具集&#xff09; 看视频 学设计 搞文档 找图片 搞学习 TED&#xff08;最优质的演讲&#xff09;&#xff1…

解析JVM类加载器

文章目录1、何为类加载器2、三层类加载器3、双亲委派模型参考资料&#xff1a;《深入理解Java虚拟机》 1、何为类加载器 类加载过程中&#xff0c;加载阶段第一步操作就是通过一个类的全限定名获取此类的二进制字节流。实现这个动作的代码就是类加载器。 任意一个类都必须由加…

mybatis-plus1(前言技术)

目录 一、Mybatis-plus入门 1.什么是mybatis-plus 2.初体验 ① 准备数据库脚本 ② 初始化工程 ③ 编码 ④ 开始使用 3.日志 二、Mybatis-plus主键生成策略 1.更新 三、Mybatis-plus自动填充 1&#xff1a;通过数据库完成自动填充 2&#xff1a;使用程序完成自…

gensim中的word2vec使用

介绍 一句话&#xff0c;GensimGensimGensim中的word2vec类就是用来训练词向量的&#xff0c;这个类实现了词向量训练的两种基本模型skip−gramskip-gramskip−gram和CBOWCBOWCBOW,可以通过后面的参数设置来选择&#xff0c;。但是&#xff0c;在Gensim这个模块中训练词向量的…

什么是盒子模型?

什么是盒子模型&#xff1f; 盒子模型组成有 4 部分,分别为:内容 内边距 外边距(一般不计入盒子实际宽度) 边框 盒子模型有 2 种:标准盒子模型与怪异盒子模型 标准盒子模型content(内容)border(边框)padding(内边距) 怪异盒子模型content(内容)(已经包含了 padding 和 border) …

随手查——Lumerical

Lumerical小白学习的一些记录&#xff0c;以防自己忘记&#xff0c;持续更。。。 快速导航1、如何设置网格2、关于窗口的一些操作&#xff08;1&#xff09;窗口的最大化与复原&#xff08;2&#xff09;窗口的关闭与开启1、如何设置网格 【View】→【Drawing grid】→【Edit …

ctfshow代码审计篇

文章目录web301-SQL注入web302- sql写shellweb303- insertweb304- 报错注入web305- 反序列化蚁剑连接数据库web306- 反序列化web307- shell_exce()web308- ssrf打mysqlweb309- ssrf打fastcgiweb310- ssrffastcfgi写shellweb301-SQL注入 check.php $username$_POST[userid]; $u…

php实现短链接系统

依据第二种算法&#xff0c;URL长连接转短连接实现方法如下&#xff1a; 语言&#xff1a;PHP5.6 服务器环境&#xff1a;LNMP 假设&#xff1a;长连接地址&#xff1a;http://www.test.com/index.php 短连接地址&#xff1a;http://t.test.com/六位code码 第一步&#xff…

Ubuntu18上安装搜狗输入法

一、说明 在ubuntu上安装中文输入法会经常遇到问题。本文是作者经过历次艰苦卓绝的努力后&#xff0c;安装成功的总结。这里稍作记录&#xff0c;以便日后安装时查询。 二、版本选择 注意&#xff1a;目前的搜狗和ubuntu版本是有个配套问题&#xff0c;如下表所列&#xff1a; …

【Typescript学习】使用 React 和 TypeScript 构建web应用(一)预览成品、初始化react项目、常见类型

教程来自freecodeCamp&#xff1a;【英字】使用 React 和 TypeScript 构建应用程序 跟做&#xff0c;仅记录用 其他资料&#xff1a;https://www.freecodecamp.org/chinese/news/learn-typescript-beginners-guide/ 第一天 1 学习目标&#xff08;我个人的&#xff09; 入门 …

开启前端CSS学习之路-css001

&#x1f60a;博主页面&#xff1a;鱿年年 &#x1f449;博主推荐专栏&#xff1a;《WEB前端》&#x1f448; ​&#x1f493;博主格言&#xff1a;追风赶月莫停留&#xff0c;平芜尽处是春山❤️ 目录 前言 一、CSS简介 1.HTML的局限性 2.CSS-网页美容师 3.CSS语法规范…

ccflow 代码

java 工作流的开发框架目录概述需求&#xff1a;设计思路实现思路分析1.工作流参考资料和推荐阅读Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a better result,wait for change,challenge S…

十大常见排序算法(java编写)

日升时奋斗&#xff0c;日落时自省 目录 1、插入排序 2、希尔排序 3、选择排序 4、堆排序 5、冒泡排序 6、快速排序 6.1、Hoare法找基准值 6.2、挖坑法找基准值 6.3、快慢指针找中间值 6.4、优化 6.5、非递归排序 7、归并排序 7.1、递归实现 7.2、非递归实现 7.…

车载通信协议-列车实时数据协议(TRDP)

TCNOPEN是一个铁路行业相关的合作伙伴创建的开源的倡议&#xff0c;其目的是建立一些新的或即将出台的铁路标准的关键部分&#xff0c;通常以TCN命名。TCN&#xff08;列车通信网络&#xff09;是IEC&#xff08;国际电工委员会&#xff09;第43工作组制定的一系列国际标准&…

C++学习/温习:新型源码学编程(一)

写在前面 本文约15页&#xff0c;如觉得文章过长请通过左侧边栏或知识点概览目录浏览食用面向初学者撰写专栏&#xff0c;个人原创的学习C/C笔记&#xff08;干货&#xff09;编程练习所作源代码输出内容为中文&#xff0c;便于理解如有错误之处请各位读者指正请读者评论回复、…