HTML表格

最新推荐文章于 2024-11-12 11:19:19 发布
最新推荐文章于 2024-11-12 11:19:19 发布
阅读量90 收藏
点赞数 1
分类专栏： 笔记整理 文章标签： 前端 html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woiyuan/article/details/138661572
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML表格</title>
	</head>
	<body>
		<!-- HTML的表格
			1.表格标签为<table>,每个表格均有若干行用<tr>，每行被分割为若干单元格用<td>。
			2.<td>元素指表格的单元格内容，其内容可以是文本、图片、列表、段落、表单、水平线、表格等
			3.表格的边框属性为border，不定义时将不显示边框
			4.表格的表头使用<th>标签进行定义（文本一般会被粗体居中）
			5.单元格内无内容时不会显示该单元格边框（常用空格占位符&nbsp解决） -->
		<h1>HTML的表单</h1>
			<p>没有边框的表格</p>
			<table>
				<tr>
					<td>老大</td>
					<td>伊藤润二</td>
				</tr>
				<tr>
					<td>张三</td>
					<td>李四</td>
				</tr>
			</table>
			<p>带有标题的列表</p>
			<table border="2">
				<caption>名单</caption><!-- 表单标题标签 -->
				<th>一班</th><th>二班</th>
				<tr>
					<td>老大</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>张三</td>
					<td>李四</td>
				</tr>
			</table>
			<table border="1">
				<caption>横跨俩列的单元格标签</caption>
				<th>姓名</th>
				<th colspan="2">电话</th><!-- colspan水平合并单元格 -->
				<tr>
					<td>傻鸟</td>
					<td>108874</td>
					<td>15157</td>
				</tr>
			</table>
			<table border="1">
				<caption>横跨俩行的单元格</caption>
				<tr>
					<th>姓名</th>
					<td>傻鸟</td></tr>
				<tr>
					<th rowspan="2">电话</th><!-- rowspan垂直合并单元格 -->
					<td>18874</td>
				</tr>
				<tr>
					<td>15157</td>
				</tr>
			</table>
			<table border="1">
				<caption>表格单元格内容多样</caption>
				<tr>
					<td>
						<p>这是一个段</p>
						<p>这是另一个段</p>
					</td>
				
				<td>
					<p>这里包含了另一个表格</p>
					<table border="1">
						<tr>
							<td>A</td>
							<td>B</td>
						</tr>
						<tr>
							<td>C</td>
							<td>D</td>
						</tr>
					</table>
				</td>
				</tr>
				<tr>
					<td>
						<ul>
							<p>这是一个列表</p>
							<li>苹果</li>
							<li>香蕉</li>
							<li>菠萝</li>
						</ul>
					</td>
					<td>
						HELLO
					</td>
				</tr>
			</table>
			<table border="1" cellpadding="20"><!-- cellpadding单元格内边距设置属性 -->
				<caption>单元格边距</caption>
				<tr>
					<td>老大</td>
					<td>伊藤润二</td>
				</tr>
				<tr>
					<td>张三</td>
					<td>李四</td>
				</tr>
			</table>
			<table border="1" cellspacing="10"><!-- cellspacing单元格间距属性 -->
				<caption>单元格间距</caption>
				<tr>
					<td>老大</td>
					<td>伊藤润二</td>
				</tr>
				<tr>
					<td>张三</td>
					<td>李四</td>
				</tr>
			</table>
			<table border="1" bgcolor="red">
				<caption>表格背景颜色</caption>
				<tr>
					<td background="img/绿.gif">单元格的设置同理</td>
					<td>伊藤润二</td>
				</tr>
				<tr>
					<td>张三</td>
					<td>李四</td>
				</tr>
			</table>
			<table border="1" background="img/绿.gif">
				<caption>表格图像背景设置</caption>
				<tr>
					<td > 单元格的设置同理</td>
					<td>伊藤润二</td>
				</tr>
				<tr>
					<td bgcolor="red">张三</td>
					<td>李四</td>
				</tr>
			</table>
			<table border="1" width="400">
				<caption>单元格内文本排列</caption>
				<tr>
					<th align="left">消费项目...</th>
					<th align="right">一月</th>
					<th align="right">二月</th>
				</tr>
				<tr>
					<td align="left">衣服</td>
					<td align="right">￥241.10</td>
					<td align="right">￥50.20</td>
				</tr>
				<tr>
					<td align="left">化妆品</td>
					<td align="right">￥30.00</td>
					<td align="right">￥44.45</td>
				</tr>
				<tr>
					<td align="left">食物</td>
					<td align="right">￥730.40</td>
					<td align="right">￥650.00</td>
				</tr>
				<tr>
					<th align="left">总计</th>
					<th align="right">￥1001.50</th>
					<th align="right">￥744.65</th>
				</tr>
			</table>
			<p>框架属性frame，在IE浏览器中无法正确显示</p>
			<p>外边框</p>
			<table frame="box">
				<tr>
					<th>month</th>
					<th>Savings</th>
				</tr>
				<tr>
					<td>January</td>
					<td>$100</td>
				</tr>
			</table><br />
			<p>上边框</p>
			<table frame="above">
				<tr>
					<th>month</th>
					<th>Savings</th>
				</tr>
				<tr>
					<td>January</td>
					<td>$100</td>
				</tr>
			</table><br />
			<p>下边框</p>
			<table frame="below">
				<tr>
					<th>month</th>
					<th>Savings</th>
				</tr>
				<tr>
					<td>January</td>
					<td>$100</td>
				</tr>
			</table><br />
			<p>上下边框</p>
			<table frame="hsides">
				<tr>
					<th>month</th>
					<th>Savings</th>
				</tr>
				<tr>
					<td>January</td>
					<td>$100</td>
				</tr>
			</table><br />
			<p>左右边框</p>
			<table frame="vsides">
				<tr>
					<th>month</th>
					<th>Savings</th>
				</tr>
				<tr>
					<td>January</td>
					<td>$100</td>
				</tr>
			</table><br />
			<br />
			<a href="6.HTML列表.html" style="text-decoration:none">上一节</a>
			<a href="8.HTML的表单.html" style="text-decoration:none">&nbsp;下一节</a>
	</body>
</html>

妧徽
关注
专栏目录
HTML 表格
木木木森林
12-04 1万+
目录1. 创建表格2. 表格属性3. 表头单元格标签th4. 表格标题caption5. 合并单元格(难点)5.1 合并单元格2种方式5.2 合并单元格顺序5.3 合并单元格三步曲6. 总结表格7. 拓展阅读@ 1. 创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。 创建表格的基本语法： <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table&gt
HTML表格样式
ZYX13721846745的博客
10-08 8134
9675人阅读 行跟列背景颜色的选择，合并等 列的颜色选择代码 <colgroup span="1" bgcolor="lightgreen"></colgroup> <colgroup span="1" bgcolor="lightyellow"></colgroup> <colgroup span="2" bgcolor="lightgreen"> <col bgcolor="lightgray"> <col&
HTML表格（HTML 表格的使用，收藏这一篇就够了）
热门推荐
weixin_47139649的博客
10-15 7万+
HTML基础之表格 文章目录HTML基础之表格1. 表格的定义2. 表格的标签3. 单元格边框(border)4. 合并单元格4.1 合并行单元格(colspan)4.2 合并列单元格(rowspan)5. 表格格式设置5.1 单元格的对齐（align）（居中，左对齐，右对齐）5.2. 背景色&图片（bgcolor & background）5.2.1 单元格背景色&图片5.2.2 表格背景色&图片5.3 单元格的边距（cellpadding）5.4 单元格间的距离(cel
HTML表格制作
哇塞
06-11 4万+
HTML中制作表格有两种方法： （1）先把最原始的表格画出来，每一个都是单个单元格，然后再根据要求进行行合并或列合并，有的表格需要行列都合并，则也是把它分为两步做，先合并行再合并列（或者先合并列再合并行），若进行了colspan和rowspan的合并，则将之后同一行或同一列的单元格删除，但这种方法较麻烦，容易搞混。 （2）直接根据最终要生成的表格来操作，将每个合并的单元格看做一个小的单元格，不...
HTML表格标签
weixin_52629158的博客
10-23 2235
HTML表格标签
html表格
wqeqwr的博客
09-10 138
表格和表单 表格属性 标题 属性名 含义 常用属性值 border 设置表格的边框（默认border="0"是无边...
html 表格比较宽溢出的解决方法
09-28
在网页设计中，HTML表格是用于展示数据的常用元素，其结构清晰、易于理解。但是，如果表格宽度设置不当，可能会导致在页面上显示不正常，即溢出到其他容器元素或者超出了预定的布局区域。针对这种情况，我们可以采用...
前端 Flex 布局语法详解
ning的博客
11-10 1107
Flex是Flexible Box的缩写，意为“弹性布局”。它允许容器内的项目（子元素）自动调整大小，以适应不同屏幕尺寸和布局需求。如果需要行内Flex布局，可以使用Flex布局提供了一种强大而灵活的方式来创建响应式布局。通过理解并应用上述属性，你可以轻松地创建出复杂且适应不同屏幕尺寸的布局。随着现代浏览器对Flex布局的广泛支持，它已经成为前端开发中不可或缺的一部分。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSDN - Flex布局详解菜鸟教程 - Flex 布局语法教程。
蓝凌OA-EKP hrStaffWebService 任意文件读取漏洞
iSee857的博客
11-12 471
它集成了流程管理、知识管理、会议管理、公文管理、合同管理、费用管控等多个模块，旨在帮助企业解决基础OA应用、系统集成、开发平台和创新业务定制等长期扩展需求，推动企业实现管理在线化、知识赋能化、运营数字化和人机智能化‌。漏洞，未经身份验证攻击者可通过该漏洞读取系统重要文件（如数据库配置文件、系统配置文件）、数据库配置文件等等，导致网站处于极度不安全状态。在处理客户端输入的参数时，进行严格的验证和过滤，防止未授权的文件访问。返回数据经过base64编码 解码后可得读取数据。
Vue中的常用指令
最新发布
m0_62388400的博客
11-12 971
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
@RestController 源码解读：解决 Web 开发中 REST 服务的疑难杂症
狼堡灰太狼的博客
11-11 965
这里可以理解成，注解MyInterface2的value属性重写了注解MyInterface1的value属性，但重新的属性的返回类型必须相同。可以看出对于value这个属性来说，@Configuration注解中的值会重写@Component的value属性值，这有点像类之间的继承，子类可以重父类的方法。达到 @MyInterface1(value2="number1") 和 @MyInterface1(value1="number1") 的效果相同。JDK 17 引入 records 新特性。
在 .NET 6.0 中创建用于 CRUD 操作的 Web API
csdn_aspnet的专栏
11-09 890
为了保持代码库的简洁高效，建议从 ProductDBContext.cs 中删除 OnConfiguring() 方法，因为它包含数据库连接字符串，为了更好地组织，应该以不同的方式管理它。NET 6 Web API 是一个先进的框架，一个精心设计的创新框架，用于构建针对 Web 应用程序个性化的弹性应用程序编程接口。为了适应 .NET 6 中引入的更改，现在在 Program.cs 文件中进行了配置调整，因为 Startup.cs 不再用于配置。CRUD 是创建、读取、更新和删除的首字母缩写词。
JavaScript 实现文本转语音功能
bjjgff的博客
11-08 523
通过这篇教程，我们使用 HTML、CSS 和 JavaScript 构建了一个简单的文本转语音应用。该项目不仅展示了 Web Speech API 的强大功能，同时也展示了如何将前端技术结合起来实现有趣的功能。希望这篇文章对你有所帮助，如果有任何问题或改进建议，欢迎在评论区留言！相关文章你从未见过的 10 个令人惊叹的 JavaScript 技巧HTML+CSS+JS 实现动态模态超级英雄卡片效果使用 HTML 和 CSS 创建 3D 菜单效果。
SpringBoot 实战：文件上传之秒传、断点续传、分片上传
江南一点雨的专栏
11-12 437
好了，以上就是关于文件上传中秒传、断点续传和分片上传的实战分享。通过这些技术的应用，我们可以极大地提升文件上传的效率和稳定性，改善用户体验。希望各位小伙伴在自己的项目中也能灵活运用这些技巧，解决实际问题。
ArkTS--应用状态
qq_63946637的博客
11-10 640
本文旨在帮助大家学习鸿蒙中的LocalStorage和AppStorage
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值