html的表格标签

previewfile_2509430104

html的表格标签

  • table标签:表示整个表格
  • tr:表示表格的一行
  • td:表示一个单元格
  • th:表示表头单元格.会居中加粗
  • thead:表格的头部区域 (注意和th区分,范围是比th要大的).
  • tbody:表格得到主体区域.

table包含tr , tr包含td或者th.

表格标签有一些属性,可以用于设置大小边框等,但是一般使用CSS方式来设置,这些属性都要放到 table标签中.

  • . align是表格相对于周围元素的对齐方式. align="center"(不是内部元素的对齐方式)
  • border表示动框。1表示有边框(数字越大,边框越粗),""表示没边框.
  • cellpadding:内容距离边框的距离,默认1像素
  • cellspacing:单元格之间的距离,默认为2像素
  • width / height:设置尺寸.

注意,这几个属性, vscode都提示不出来.

样例如下

姓名性别年龄
张三13
李四14
王五15

用html代码实现上述的表格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1" width="500" height="300" cellspacing ="0" cellpadding = "80" align="center"><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td></td><td>13</td></tr><tr><td>李四</td><td></td><td>14</td></tr><tr><td>王五</td><td></td><td>15</td></tr></table>
</body>
</html>

代码在浏览器运行效果

image-20240215223026763

thead里面的内容居中并且加粗展示

image-20240215231503695

image-20240215231830400

对表头进行代码改进

通常情况下,我们把表头相关的信息放在thead中,表格内容相关的信息放在tbody

image-20240215232835606

运行效果
image-20240215233010289

进行单元格合并

代码

image-20240215233807414

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1" width="500" height="300" cellspacing ="0" cellpadding = "80" align="center"><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td>张三</td><td rowspan="2"></td><td>13</td></tr><tr><td>李四</td><!-- <td>男</td> --><td>14</td></tr><tr><td colspan="2">王五/女</td><!-- <td>女</td> --><td>15</td></tr></tbody></table>
</body>
</html>

最终运行效果

image-20240215233919088

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

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

相关文章

Codeforces Round 920 (Div. 3)

D. Very Different Array&#xff08;贪心双指针/前缀和&#xff09; 思路&#xff1a;绝对值就是线段-->让线段最长&#xff08;肯定是越在最短端找最右端的 越最右端找最左端的&#xff09;-->判断怎么连哪段最长(采用双指针的策略去判断&#xff09; &#xff08;左红…

七天爆肝flink笔记

一.flink整体介绍及wordcount案例代码 1.1整体介绍 从上到下包含有界无界流 支持状态 特点 与spark对比 应用场景 架构分层 1.2示例代码 了解了后就整个demo吧 数据源准备 这里直接用的文本文件 gradle中的主要配置 group com.example version 0.0.1-SNAPSHOTjava {sour…

通过`ssh`同步`tmux`剪贴板内容

通过ssh同步tmux剪贴板内容 通过ssh连接远程服务器时&#xff0c;可以通过xclip同步tmux剪贴板内容。这需要在服务器上安装xclip&#xff0c;且需要在ssh远程连接时开启X11。 此处附tmux剪贴板调用xclip的配置&#xff1a; # Copy the current buffer to the system clipboa…

网络爬虫实战 | 上传以及下载处理后的文件

以实现爬虫一个简单的&#xff08;SimFIR (doctrp.top)&#xff09;网址为例&#xff0c;需要遵循几个步骤&#xff1a; 1. 分析网页结构 首先&#xff0c;需要分析该网页的结构&#xff0c;了解图片是如何存储和组织的。这通常涉及查看网页的HTML源代码&#xff0c;可能还包…

[Python进阶] 使用__import__函数动态导入模块

2.16 使用__import__函数动态导入模块 在Python中&#xff0c;__import__是一个内置函数&#xff0c;用于动态导入模块。它的语法如下&#xff1a; import(name, globalsNone, localsNone, fromlist(), level0) 其中&#xff0c;name是要导入的模块名称&#xff0c;globals和l…

基于FPGA的ECG信号滤波与心率计算verilog实现,包含testbench

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 ECG信号的特点与噪声 4.2 FPGA在ECG信号处理中的应用 4.3 ECG信号滤波原理 4.4 心率计算原理 4.5 FPGA在ECG信号处理中的优势 5.算法完整程序工程 1.算法运行效果图预览 其RTL结构如…

C++集群聊天服务器 muduo+nginx+redis+mysql数据库连接池 笔记 (下)

C集群聊天服务器 网络模块业务模块CMake构建项目 笔记 &#xff08;上&#xff09;-CSDN博客https://blog.csdn.net/weixin_41987016/article/details/135991635?spm1001.2014.3001.5501C集群聊天服务器 数据模块业务模块CMake构建项目 笔记 &#xff08;上&#xff09;-CSDN博…

QT-通信编码格式问题

这里写目录标题 一、项目场景1.QT客户端与服务端通信时&#xff0c;转化步骤如下&#xff1a;2.原数据示例3.转化后数据 二、问题描述1.采用Soap协议2.采用HTTP协议 三、原因分析四、解决方案 一、项目场景 1.QT客户端与服务端通信时&#xff0c;转化步骤如下&#xff1a; 1&…

free pascal:fpwebview 组件通过JSBridge调用本机TTS

从 https://github.com/PierceNg/fpwebview 下载 fpwebview-master.zip 简单易用。 先请看 \fpwebview-master\README.md cd \lazarus\projects\fpwebview-master\demo\js_bidir 学习 js_bidir.lpr &#xff0c;编写 js_bind_speak.lpr 如下&#xff0c;通过JSBridge调用本机…

【软件设计模式之命令模式】

文章目录 一、命令模式简介1. 定义2. 核心概念a. 命令&#xff08;Command&#xff09;b. 接收者&#xff08;Receiver&#xff09;c. 调用者&#xff08;Invoker&#xff09;d. 客户端&#xff08;Client&#xff09; 二、命令模式的实际应用1. 命令模式的优点a. 解耦发起者和…

协调尺度:特征缩放在机器学习中的重要作用

目录 一、介绍 二、背景知识 三、了解功能缩放 四、特征缩放方法 五、特征缩放的重要性 六、实际意义 七、代码 八、结论 一、介绍 特征缩放是机器学习和数据分析预处理阶段的关键步骤&#xff0c;在优化各种算法的性能和效率方面起着至关重要的作用。本文深入探讨了特征缩放的…

什么是内存对齐?如何计算结构体类型的大小?

结构体内存对齐与结构体类型的大小 运行这样一段代码 我们想要计算这两个结构体类型的大小&#xff0c;而这个结构体类型里面成员变量有一个int类型和两个char类型&#xff0c;大小加起来应该是六个字节&#xff0c;但是我们打印出来发现&#xff0c;结果居然是12和8&#xff…

4.5 用qml实现横向滑动的多个页面

一、效果展示 带上main.qml&#xff0c;一共4个page。第4个page上面有一个按钮&#xff0c;点击则会直接返回的到首页&#xff0c;也就是第1个page。 二、main.qml中的代码 import QtQuick import QtQuick.Controls //若要使用控件&#xff0c;则导入该包ApplicationWindow …

记录 | ubuntu pyqt5 pycharm配置

Ubuntu16.04pycharmpyqt5安装与配置_ubuntu pycharm pyqt5-CSDN博客pycharm激活码 6ZUMD7WWWU-eyJsaWNlbnNlSWQiOiI2WlVNRDdXV1dVIiwibGljZW5zZWVOYW1lIjoiSmV0cyBHcm91cCIsImFzc2lnbmVlTmFtZSI6IiIsImFzc2lnbmVlRW1haWwiOiIiLCJsaWNlbnNlUmVzdHJpY3Rpb24iOiIiLCJjaGVja0NvbmN…

Apache httpd 换行解析漏洞复现(CVE-2017-15715)

Web页面&#xff1a; 新建一个一句话木马&#xff1a; 0.php <?php system($_GET[0]); ?> 上传木马&#xff0c; burpsuite 抓包。 直接上传是回显 bad file。 我们查看数据包的二进制内容&#xff08;hex&#xff09;&#xff0c;内容是以16进制显示的&#xff0c;…

【Go语言】第一个Go程序

第一个 Go 程序 1 安装 Go Go语言官网&#xff1a;Download and install - The Go Programming Language&#xff0c;提供了安装包以及引导流程。 以 Windows 为例&#xff0c;进入windows安装包下载地址&#xff1a;All releases - The Go Programming Language&#xff0c…

指针和句柄的区别和联系

句柄&#xff08;Handle&#xff09;和指针&#xff08;Pointer&#xff09;都是在计算机编程中用于引用内存地址的概念&#xff0c;但它们有一些关键的区别和联系。 区别&#xff1a; 指向对象的类型&#xff1a; 指针&#xff1a; 指针是直接存储一个变量或对象的内存地址的…

unity的重中之重:组件

检查器&#xff08;Hierarchy&#xff09;面板中的所有东西都是组件。日后多数工作都是和组件打交道&#xff0c;包括调参、自定义脚本组件。 文章目录 12 游戏的灵魂&#xff0c;脚本组件13 玩转脚本组件14 尽职的一生&#xff0c;了解组件的生命周期15 不能插队&#xff01;…

(力扣记录)1448. 统计二叉树中好节点的数目

数据结构&#xff1a;树&#x1f332; 时间复杂度&#xff1a;O(n) 空间复杂度&#xff1a;O(n) 代码实现&#xff1a; class Solution:def goodNodes(self, root: TreeNode) -> int:counter [0]def dfs(root, val):if not root: returnnext_val valif root.val > …

【蓝桥杯单片机入门记录】LED灯(附多个例程)

目录 一、LED灯概述 1.1 LED发光原理 1.2电路原理图 1.3电路实物图 1.4 开发板LED灯原理图 1.4.1共阳极LED灯操控原理&#xff08;本开发板&#xff09; &#xff08;非实际原理图&#xff0c;便于理解版本&#xff09;由图可以看出&#xff0c;每个LED灯的左边&#xf…