HTML(七)表格

https://chatgai.lovepor.cn/

在HTML中,表格的标准形式如下:

<table></table>

使用上面的语言,就已经生成了一个表格,只不过这个表格什么都没有

那么,该如何让表格存在东西呢?

首先,我们需要使用到<tr> </tr> ,如下

<table><tr></tr>
</table>

这里的<tr> </tr> 就在表格中运用一行

 但是在表格中,一行我们也可以有很多列

这时候我们就需要用到<td></td> 或者<th> </th>

如下->:

<table><tr><td></td></tr><tr><th></th></tr>
</table>

每一对 td或者th 代表了一列

使用效果如下:

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>title</title>
</head><body><table  width="400px" height="500px"  bgcolor="pink">这里是设置表格宽度为400,高度为500,单位是px<tr><th>文具</th><th>橡皮</th></tr><tr><td>文具</td><td>橡皮</td></tr></table>
</body>
</html>

03212187fd894a7c9511b9b31190422f.png

在上图中,我们需要了解到

(注:上图大小不对,但你们自己可以重新试试,代码是对的)

 <td>表示一般单元格    默认居左,并以普通格式显示

<th>表示标题单元格     默认居中,并以加粗格式显示

但是这样还不够直观,所以我们需要运用到边框线,边框线需要在table位置更改

使用如下:

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>title</title>
</head><body><table border="3px" bordercolor="red" width="400px" height="500px"  bgcolor="pink"><tr><th>文具</th><th>橡皮</th></tr><tr><td>文具</td><td>橡皮</td></tr></table>
</body>
</html>

这里的border就是边缘线  bordercolor可以改变边缘线的颜色

 

使用效果如图:

9e6bb09cf06c4852832e63318c63b23d.png

 我们也可以让每一行表格都更改一下位置和表格大小

如下:

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>title</title>
</head><body><table border="3px" bordercolor="red" width="400px" height="500px"  bgcolor="pink" align="center" ><tr height="50px"><th>文具</th><th>橡皮</th></tr><tr align="center"><td>文具</td><td>橡皮</td></tr></table>
</body>
</html>

a358f4cef2764f06ba0215f66b03c22b.png

我们也可以更改表格内容的颜色,只需要在想更改的位置加上bgcolor即可


在表格中还有最后两种东西,一种为跨行--rowspan

另一种为跨列--colspan

说是跨,其实就是把一格的东西扩大成为N格

 


最后,我们写两个语言来整体实现

例子1:

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>title</title>
</head><body><table width="300px" height="500px" align="center" bgcolor="pink"  border="3px" bordercolor="green" ><tr height="100px"><th>文具</th>   <th>个数</th>   <th>价格</th></tr><tr align="center"><td bgcolor="green">铅笔</td><td>5</td><td>88</td></tr><tr align="center"><td>橡皮</td><td >6</td><td>99</td></tr><tr><th>总价格</th><td colspan="2" align="center">11</td></tr></table>
</body>
</html>

效果图:

900b4ef30cfe46be98236ec687773cf6.png

例题2:

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>title</title>
</head><body><table width="300px" height="500px" align="center" bgcolor="pink"  border="3px" bordercolor="green" ><tr height="100px"><th>文具</th>   <th>个数</th>   <th>价格</th><th>总价格</th></tr><tr align="center"><td bgcolor="green">铅笔</td><td>5</td><td>88</td><td rowspan="2">11</td></tr><tr align="center"><td>橡皮</td><td >6</td><td>99</td></tr></table>
</body>
</html>

 效果图:

824cff4997c0474f92cea30e333cfd08.png

 

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

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

相关文章

springboot 整合spring ai实现 基于知识库的客服问答

rag 需求产生的背景介绍&#xff1a; 在使用大模型时&#xff0c;常遇到的问题之一是模型可能产生幻觉&#xff0c;即生成的内容缺乏准确性。此外&#xff0c;由于大模型不直接访问企业的专有数据&#xff0c;其响应可能会显得泛泛而谈&#xff0c;不够精准或具体&#xff0c;…

基于YOLOv10的农场实时目标检测系统(python+pyside6界面+系统源码+可训练的数据集+也完成的训练模型)

摘要&#xff1a; 基于YOLOv10的农场实时目标检测系统&#xff0c;利用4393张图片&#xff08;3905张训练集&#xff0c;488张验证集&#xff09;进行模型训练&#xff0c;最终开发出一个高效的农场目标检测模型。为了方便用户操作和实时检测&#xff0c;本系统还开发了基于Pyt…

VSCode运行QT界面

VSCode用久了,感觉Qt Creator的写起代码来还是不如VSCode得心应手,虽然目前还是存在一些问题,先把目前实现的状况做个记录,后续有机会再进一步优化。 当前方式 通过QtCreator创建一个CMake项目,然后使用CMake的方式在VSCode中进行编译。 claude给出的建议 左上角的名字会…

30 天 Python 3 学习计划

30 天 Python 3 学习计划 https://www.runoob.com/python3/python3-tutorial.html 1. Python3 基础语法 2. Python3 基本数据类型 3. Python3 数据类型转换 4. Python3 解释器 5. Python3 注释 6. Python3 运算符 7. Python3 数字(Number) 8. Python3 字符串 …

SiLM27212 270V 4A/4A 支持高频信号输入 集成自举二极管的高低边门极驱动器

SiLM27212系列选型&#xff1a; SiLM27212LEK-DG SiLM27212EK-DG SiLM27212LCA-DG SiLM27212CA-DG SiLM27212LCB-DG SiLM27212CB-DG SiLM27212系列是一款支持高频信号输入的高低边N沟道MOSFET驱动器&#xff0c;有着优异的性能&#xff0c;广泛应用于各类模…

Linux查看下nginx及使用的配置文件

1、查到nginx进程 ps -aef | grep nginx2、通过进行pid查到nginx路径 pwdx <pid>3、根据路径得到配置文件 path***/nginx -t如下&#xff1a;

MacOS虚拟机安装Windows停滞在“让我们为你连接到网络”,如何解决?

1. 问题描述 MacOS在虚拟机安装win11过程中&#xff0c;停止在“让我们为你连接到网络”步骤&#xff0c;页面没有任何可以点击的按钮&#xff0c;进行下一步操作。 2. 解决方案&#xff08;亲测有效&#xff09; 到达该界面&#xff0c;按下ShiftF10&#xff08;Windows&…

【MySQL】入门篇—基本数据类型:使用ORDER BY进行排序

MySQL作为一种流行的关系数据库管理系统&#xff0c;提供了强大的数据查询功能&#xff0c;其中ORDER BY子句用于对查询结果进行排序。排序可以帮助用户更直观地查看数据&#xff0c;发现趋势或异常&#xff0c;尤其在处理大量数据时尤为重要。 应用场景&#xff1a; 用户管理…

【机器学习】深入浅出讲解贝叶斯分类算法

0. 前言 1.贝叶斯分类器介绍 贝叶斯分类是一类分类算法的总称&#xff0c;这类算法均以贝叶斯定理为基础&#xff0c;故统称为贝叶斯分类。而朴素贝叶斯&#xff08;Naive Bayes&#xff09;分类是贝叶斯分类中最简单&#xff0c;也是常见的一种分类方法。 一些很常见的分类…

整理—计算机网络

目录 网络OSI模型和TCP/IP模型 应用层有哪些协议 HTTP报文有哪些部分 HTTP常用的状态码 Http 502和 504 的区别 HTTP层请求的类型有哪些&#xff1f; GET和POST的使用场景&#xff0c;有哪些区别&#xff1f; HTTP的长连接 HTTP默认的端口是什么&#xff1f; HTTP1.1怎…

哪科竞赛含金量更高?五大学科竞赛含金量排名

2024年五大学科竞赛赛事已经渐渐拉开帷幕&#xff0c;本月底国内不少地区即将举行生物竞赛预赛的赛事。今天我们一起来看看五大学科竞赛哪科竞赛含金量更高。 高中五大学科竞赛&#xff08;数物化生信&#xff09;是升学路上的硬通货&#xff0c;比如说在强基破格中需要五大竞赛…

使用QueryWrapper中IN关键字超过1000个参数后如何处理

示例场景 假设我们有一个用户表 User&#xff0c;我们想根据用户 ID 查询用户信息。由于 ID 数量超过 1000&#xff0c;直接使用 IN 会导致错误。 方法一&#xff1a;分批查询 我们可以将 ID 列表分批处理&#xff0c;每批不超过 1000 个。 import com.baomidou.mybatisplu…

揭秘提升3DMAX效率的6款必备神级插件!

对于3DMax新手来说,掌握一些高效、实用的插件能够大大提升工作效率和创作质量。以下是6个不能错过的神级插件推荐: 第1个:3DMAX造山地形插件Mountain是一款专为3dMax设计的插件,旨在帮助用户轻松快速地创建逼真的山脉地形。以下是对该插件的详细介绍: 一、插件概述 Mou…

Xilinx远程固件升级(一)——QuickBoot方案

Xilinx 7系FPGA远程更新方案——QuickBoot方式远程更新bit 一、远程更新背景和架构 对于非ZYNQ系列的常规FPGA来说&#xff0c;对于bit的更新一般使用JTAG进行烧录。而作为商用产品&#xff0c;想要进行OTA升级时&#xff0c;使用JTAG的升级方式显然不适合&#xff0c;因此&a…

Server-Sent Events (SSE)

Server-Sent Events Spring Boot 中使用 SSE原理 有一个需求&#xff0c;这个需求希望如果用户触发了下单操作&#xff0c;就对b端的管理员发送一次弹窗&#xff0c;如果想让前端源源不断的接受到后端发送的实时数据&#xff0c;这种需求可以使用什么技术来实现 可以采用以下几…

数据分区(Data Partitioning)

数据分区&#xff08;Data Partitioning&#xff09; 数据分区是指将一个大规模的数据集按某种规则划分成多个子集&#xff0c;并将这些子集存储到不同的存储节点上。这种方式不仅能提高查询效率&#xff0c;还能减轻单一节点的负担&#xff0c;使系统更容易扩展。 数据分区的…

Java | Leetcode Java题解之第486题预测赢家

题目&#xff1a; 题解&#xff1a; class Solution {public boolean PredictTheWinner(int[] nums) {int length nums.length;int[] dp new int[length];for (int i 0; i < length; i) {dp[i] nums[i];}for (int i length - 2; i > 0; i--) {for (int j i 1; j …

计算机毕业设计Python动漫视频分析可视化 动漫影视可视化 动漫情感分析 动漫爬虫 机器学习 深度学习 Tensorflow PyTorch LSTM模型

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系名片 &#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系名片 &#xff01; 温馨提示&#xff1a;文末有SDN 平台官方提供的学长联系名片 &#xff01; 基于Python的B站排行榜大数据分析与可视化系统…

【微信小程序_15_下拉刷新与上拉触底】

摘要:本文介绍了微信小程序的两种页面事件 —— 下拉刷新事件和上拉触底事件,具体内容如下: (1)下拉刷新事件 概念:通过手指下拉屏幕重新加载页面数据。 启用方式:包括全局和局部开启,推荐局部开启。 配置样式:可通过backgroundColor和backgroundTextStyle配置下拉刷新…

参加CSP-J/S 认证,要学多久C++才能达到获奖水平?

CSP-J/S 2024 第一轮认证报名阶段&#xff0c;认证将于9月21日举行。从去年CSP-J/S 认证报名人数近15万人来看&#xff0c;今年的报名人数也不会少&#xff0c;那么&#xff0c;对于基础的学子来说&#xff0c;如果参加CSP-J/S 认证&#xff0c;要学多久C才能达到获奖水平&…