【Web应用技术基础】HTML(3)——表格

目录

题目1:原始表格

题目2:width、height

题目3: cellpadding

题目4:cellspacing、cellpadding

题目5:caption

题目6:rowspan

题目7:colspan

题目8:汇总题


题目1:原始表格

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><table border="5"><tr><td>姓名</td><td>语文</td><td>数学</td></tr><tr><td>李四</td><td>90</td><td>95</td></tr></table></body>
</html>

题目2:width、height

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><table border="1" width="100%" height="200"><tr><td>姓名</td><td>语文</td><td>数学</td><td>英语</td><td>合计</td>  </tr><tr><td>李四</td><td>90</td><td>95</td><td>80</td><td>265</td>  </tr></table></body>
</html>

题目3: cellpadding

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><table border="2" cellpadding="6"><tr><td>姓名</td><td>语文</td><td>数学</td><td>英语</td><td>合计</td></tr><tr><td>李四</td><td>90</td><td>95</td><td>80</td><td>265</td></tr></table></body>
</html>

题目4:cellspacing、cellpadding

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><table border="1" cellspacing="0" cellpadding="10"><tr><td>姓名</td><td>语文</td><td>数学</td><td>英语</td><td>合计</td></tr><tr><td>李四</td><td>90</td><td>95</td><td>80</td><td>265</td></tr>
</table></body>
</html>

题目5:caption

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><table border="1" cellpadding="10" cellspacing="0"><!-- ********* Begin ********* --><caption>科目成绩</caption><!-- ********* End ********* --><tr><td>姓名</td><td>语文</td><td>数学</td><td>英语</td><td>合计</td></tr><tr><td>李四</td><td>90</td><td>95</td><td>80</td><td>265</td></tr></table>
</body>
</html>

题目6:rowspan

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><table border="2" cellspacing="0" width="200"><tr><td>商品</td><td>数量</td><td>单价</td><td>备注</td></tr><tr><td>短袖</td><td>70</td><td>30</td><td rowspan="2">无</td></tr><tr><td>裤子</td><td>50</td><td>30</td></tr></table>
</body>
</html>

题目7:colspan

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><table border="2" cellspacing="0" width="200"><tr><td>商品</td><td>数量</td><td>单价</td></tr><tr><td>短袖</td><td>70</td><td>30</td></tr><tr><td>裤子</td><td>50</td><td>30</td></tr><tr><td>合计</td><td colspan="2">3600</td></tr></table>
</body>
</html>

题目8:汇总题

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><style>body{margin:30px;}table{/*居中对齐*/text-align:center;}</style><!--设置表格--><table border="2px" width="100%" cellspacing="0" cellpadding="6"> <caption>本周财政计划</caption><!-- 第1行 --><tr align="center"><td colspan="2" rowspan="2"> 项目</td><td colspan="2">本周发生</td><td rowspan="2">备注</td></tr><!-- 第2行 --><tr align="center" ><td>收入</td><td>支出</td></tr><!-- 第3行 --><tr align="center"><td rowspan="3">收入</td><td>贷款收回</td><td>8700</td><td>0</td><td></td></tr><!-- 第4行 --><tr align="center"><td>内部转款</td><td>6000</td><td>0</td><td></td></tr><!-- 第5行 --><tr align="center"><td>收入合计</td><td>14700</td><td>0</td><td></td></tr><!-- 第6行 --><tr align="center"><td rowspan="3">支出</td><td>采购支出</td><td>0</td><td>5000</td><td></td></tr><!-- 第7行 --><tr align="center"><td>工资支出</td><td>0</td><td>7000</td><td></td></tr><!-- 第8行 --><tr align="center"><td>支出合计</td><td>0</td><td>12000</td><td></td></tr></table></body>
</html>

 注意:

要在HTML中设置表格文本水平居中,可以使用CSS样式。具体操作如下:

1. 在<head>标签内添加<style>标签,用于编写CSS样式。
2. 在<style>标签内,为表格的<td>标签设置text-align属性为center。

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

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

相关文章

从零到一构建短链接系统(八)

1.git上传远程仓库&#xff08;现在才想起来&#xff09; git init git add . git commit -m "first commit" git remote add origin OLiyscxm/shortlink git push -u origin "master" 2.开发全局异常拦截器之后就可以简化UserController 拦截器可以…

Maxwell监听mysql的binlog日志变化写入kafka消费者

一. 环境&#xff1a; maxwell:v1.29.2 (从1.30开始maxwell停止了对java8的使用&#xff0c;改为为11) maxwell1.29.2这个版本对mysql8.0以后的缺少utf8mb3字符的解码问题&#xff0c;需要对原码中加上一个部分内容 &#xff1a;具体也给大家做了总结 &#xff1a; 关于v1.…

【Godot4.2】随机数入门指南

概述 计算机程序是精确的艺术&#xff0c;现实生活却充满了随机性。如果你的游戏缺乏了随机性&#xff0c;也就缺乏了最基础的乐趣。 我们在很多场景下需要使用随机数&#xff0c;来为已经非常刻意和规整的设计带来一些变化和趣味。 比如打怪、打完Boss或开宝箱后随机掉落不…

在MongoDB建模1对N关系的基本方法

“我在 SQL 和规范化数据库方面拥有丰富的经验&#xff0c;但我只是 MongoDB 的初学者。如何建立一对 N 关系模型&#xff1f;” 这是我从参加 MongoDB 分享日活动的用户那里得到的最常见问题之一。 我对这个问题没有简短的答案&#xff0c;因为方法不只有一种&#xff0c;还有…

软件系统开发设计的基本流程

一、前言 经过年的工程实践软件系统开发的流程演变有很多种&#xff0c;但是最基本的还是瀑布模型。但是由于近几年演变了很多种模型&#xff0c;现在很多公司的研发流程并不遵循瀑布模型。主要原因是无法满足市场竞争的需求。比如在哪某个节日需要敏捷上线活动等这样的场景。没…

ASP .Net Core 配置集合 IConfiguration 的使用

&#x1f433;简介 IConfiguration 是 ASP.NET Core 中的一个接口&#xff0c;用于表示配置集合。以下是关于 IConfiguration 的详细介绍&#xff1a; 作用&#xff1a;IConfiguration 允许开发人员从各种来源&#xff08;如文件、环境变量、命令行参数等&#xff09;读取应用…

inner join,left join,right join,outer join的区别

INNER JOIN&#xff1a;内连接是最常见的连接操作&#xff0c;它返回两个表中满足连接条件的交集。即只返回条件匹配的记录。 LEFT JOIN&#xff1a;左连接返回左表记录和右表记录匹配后组成的记录。以及左表中未与右表匹配的记录&#xff0c;右边用null显示。 RIGHT JOIN&…

好就业三种专业#信息安全#云计算#网络工程

一、信息安全专业 根据2021年网络安全宣传周白皮书的观察结果&#xff0c;网络安全产业对于人才的需求正以高速增长的趋势呈现&#xff0c;当前网络安全行业存在着巨大的人才缺口&#xff0c;平均供求比例约为1:2。这一现象导致了资深人才的储备不足&#xff0c;并且新人才的培…

如何画好架构图

什么是架构图&#xff1f; 架构图 架构的表达 架构在不同抽象角度和不同抽象层次的表达 架构可以从很多个角度去看&#xff0c;比如&#xff1a;业务架构、应用架构、技术架构、代码架构、数据架构等。 从架构级别来分类&#xff0c;使用金字塔的说明&#xff0c;上层级别…

图像分割论文阅读:Adaptive Context Selection for Polyp Segmentation

这篇论文的主要内容是关于一种用于息肉分割的自适应上下文选择网络&#xff08;Adaptive Context Selection Network&#xff0c;简称ACSNet&#xff09; 1&#xff0c;模型的整体结构 模型的整体结构基于编码器-解码器框架&#xff0c;并且包含了三个关键模块&#xff1a;局部…

贵州省二级分类土地利用数据(矢量)

贵州省&#xff0c;地处中国西南腹地&#xff0c;地貌属于中国西南部高原山地&#xff0c;境内地势西高东低&#xff0c;自中部向北、东、南三面倾斜&#xff0c;平均海拔在1100米左右。贵州高原山地居多&#xff0c;素有“八山一水一分田”之说。全省地貌可概括分为&#xff1…

【鸿蒙HarmonyOS开发笔记】通知模块之为通知添加行为意图

概述 WantAgent提供了封装行为意图的能力&#xff0c;这里所说的行为意图主要是指拉起指定的应用组件及发布公共事件等能力。HarmonyOS支持以通知的形式&#xff0c;将WantAgent从发布方传递至接收方&#xff0c;从而在接收方触发WantAgent中指定的意图。例如&#xff0c;在通…

RK3568平台开发系列讲解(pinctrl篇)引脚的复用关系的设置

🚀返回专栏总目录 文章目录 一、调用pinctrl_bind_pins二、dev_pin_info结构体沉淀、分享、成长,让自己和他人都能有所收获!😄 引脚的复用关系是在什么时候被设置的。 一、调用pinctrl_bind_pins 在内核源码目录下的 “drivers/base/dd.c” 文件中 static int really_p…

Java项目:67 ssm家政服务网站设计+jsp

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 家政服务网站&#xff0c;主要的模块包括查看 管理员&#xff1b;个人中心、用户管理、服务类型管理、家政类型管理、家政评价管理、家政资讯…

Cesium for UE-01-虚幻引擎的下载安装及插件配置

学习Cesium for UE的过程笔记 下载UE 下载 下载完成后&#xff0c;点击运行&#xff0c;执行安装 安装完成后需要下载epic game 下载完成&#xff0c;需要登录 没有账号的自行注册&#xff0c;或者选一个有账号的平台登录即可 选择虚幻引擎&#xff0c;再点击库 可以看到下…

课时70:流程控制_for循环_嵌套循环

2.4.4 嵌套循环 学习目标 这一节&#xff0c;我们从 基础知识、简单实践、小结 三个方面来学习。 基础知识 简介 这里的嵌套实践&#xff0c;与选择语句的嵌套实践基本一致&#xff0c;只不过组合的方式发生了一些变化。常见的组合样式如下&#xff1a;for嵌套for语句for …

【工具使用】VScode配置gcc开发环境

一&#xff0c;简介 本文主要介绍如何在VScode中配置gcc环境&#xff0c;方便开发调试。 二&#xff0c;配置步骤 2.1 gcc环境配置 2.1.1 安装gcc环境 这里我使用的是msys2&#xff0c;具体安装步骤可以参考我另外一篇文章《史上最全msys2下载配置操作步骤》&#xff0c;这…

SpringCloud-Feign远程调用

使用Feign替代RestTemplate进行远程服务调用&#xff1a; 远程调用配置 1. 引入依赖 我们在order-service服务的pom文件中引入feign的依赖&#xff1a; <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starte…

计算机三级——网络技术(综合题第二题)

路由器工作模式 用户模式 当通过Console或Telnet方式登录到路由器时&#xff0c;只要输入的密码正确&#xff0c;路由器就直接进入了用户模式。在该模式下&#xff0c;系统提示符为一个尖括号(>)。如果用户以前为路由器输入过名称&#xff0c;则该名称将会显示在尖指号的前…

idea2022中修改护眼主题色和注释颜色

背景&#xff1a;重装了2022版本idea&#xff0c;想改idea的颜色 背景修改 效果如下。护眼模式好了 修改注释