【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 拦截器可以…

彻底讲透:如何写sql能够有效的使用到复合索引?

在MySQL中&#xff0c;有效的使用复合索引需要确保查询条件按照索引定义的列顺序进行。以下是一个具体的例子&#xff1a; 假设我们有一个sales表&#xff0c;它有四个字段&#xff1a;customer_id、product_category、sale_date和amount。为了优化包含这些字段查询的性能&…

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;读取应用…

ASP.NET中的GridView和DataList控件:功能、应用与比较

目录 一、引言 二、GridView控件 三、DataList控件 四、GridView与DataList的比较 五、结论 一、引言 ASP.NET是微软公司开发的一款强大的Web应用程序开发框架&#xff0c;它提供了丰富的控件库&#xff0c;使得开发人员能够更快速、更高效地构建功能强大的Web应用程序。…

【工具类】vscode 常用功能

1. vscode 常用功能 1. vscode 常用功能 1.1. 关闭右侧预览功能1.2. 快捷键(右键或者菜单栏多看看就记住了)1.3. 常用插件 1.1. 关闭右侧预览功能 点击文件-首选项-设置,搜索 “editor.minimap.enabled” ,默认值为打钩,我们只需要把钩去掉即可&#xff1b; 1.2. 快捷键(右…

上传日志到aws日志服务

安装包 <dependency><groupId>software.amazon.awssdk</groupId><artifactId>cloudwatchlogs</artifactId><version>2.16.60</version></dependency>使用 HashMap<String, Object> map new HashMap<>();map.put(…

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

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

如何正确关闭MySQL

一、介绍 MySQL是一个广泛使用的开源关系型数据库管理系统&#xff0c;由于其高性能、稳定性和可靠性&#xff0c;被广泛应用于互联网应用等领域。然而&#xff0c;当我们需要停止或关闭MySQL实例时&#xff0c;很多人并不清楚如何做到正确、安全地关闭MySQL&#xff0c;这将会…

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

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

AWS Sagemaker详解

Sagemaker各个组件的介绍 Ground Truth Sagemaker Ground Truth Labeling platform。图片语义分析 Amazon SageMaker Ground Truth semantic segmentation labeling taskGround Truth Active Learning will require human labelling only when needed, works well with small…

如何画好架构图

什么是架构图&#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…

列表(list)篇(二)

文章目录 2.10 insert()函数2.11 list()函数2.12 pop() 函数2.13 remove()函数2.14 reverse()函数2.15 sort()函数2.16 sorted()函数2.17 sum()函数 2.10 insert()函数 在Python中&#xff0c;list.insert()是一个列表方法&#xff0c;用于在指定索引位置插入一个元素。这个方…

【鸿蒙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…