HTML表格标签

最新推荐文章于 2022-06-06 22:08:58 发布
最新推荐文章于 2022-06-06 22:08:58 发布
阅读量886 收藏 4
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41532872/article/details/86318265
版权

基本表格


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--border:定义表格的边框属性
			cellspacing:单元格之间的距离，设置为0则只有1条边框了
			cellpadding:单元格的内容到边框之间的距离
		-->
		<table border="1" cellspacing="0" cellpadding="10">
			<!--  第一行 -->
			<tr>
				<td>第1行第1列</td>
				<td>第1行第2列</td>
			</tr>
			<!--  第二行 -->
			<tr>
				<td>第2行第1列</td>
				<td>第2行第2列</td>
			</tr>
		</table>
	</body>

</html>

在这里插入图片描述

带表头和标题的表格


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body background="../img/gz/binfensaoe01.gif">
		<!--
			 表头：表格中的第一行，用来显示列标题的，使用th定义表头的每一列，把里面的内容加粗居中显示
			 通常，第一行是表头行，从第二行开始就是数据行(显示具体的数据),使用td表示数据行每一列
			 表格的align="center"：让表格整体居中显示
			 tr的align="center"：让行里面的内容居中显示
			 caption：定义表格的标题，会相当于表格居中
		-->
		<table border="1" cellspacing="0" cellpadding="10" align="center" width="400">
			<!--设置表格标题-->
			<caption>优秀演员代表作</caption>
			  <tr>
			  	  <th>演员</th>
			  	  <th>代表作品</th>
			  </tr>
			   <tr align="center">
			   	  <td>成龙</td> 
			   	  <td>警察故事</td>
			   </tr>
			     <tr align="center">
			   	  <td>周星驰</td> 
			   	  <td>大话西游</td>
			   </tr>
			     <tr align="center">
			   	  <td>李连杰</td> 
			   	  <td>少林寺</td>
			   </tr>
		</table>
	</body>

</html>

在这里插入图片描述

跨行和跨列的表格


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--
			 colspan:跨列，即在水平方向上合并单元格，值是要合并的单元格数目
			 rowspan:跨行，即在竖直方向上合并单元格，值是要合并的单元格数目
		-->
		<table border="1" cellspacing="0" cellpadding="10" align="center" width="400">
			<caption>跨2列的表格</caption>
			<tr>
				<th>姓名</th>	
				 <th colspan="2">手机号</th>		
			</tr>
			<tr>
			  <td>张三</td>
				<td>13718882216</td>
				<td>15918882219</td>
			</tr>
			<tr>
			  <td>李四</td>
				<td>13718882216</td>
				<td>15918882219</td>
			</tr>
		</table>
		<hr color="red">
		<table border="1" cellspacing="0" cellpadding="10" align="center" width="400">
				<caption>跨2行的表格</caption>
			<tr>
				<th>姓名</th>	
				<td>张三</td>
				<td>李四</td>
			</tr>
			<tr>
			  <td rowspan="2">手机号</td>
				<td>13718882216</td>
				<td>15918882219</td>
			</tr>
			<tr>
				<td>13718882216</td>
				<td>15918882219</td>
			</tr>
		</table>
	</body>

</html>

在这里插入图片描述

司天宏
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
H5表格、表单、框架.ppt
04-27
H5表格、表单、框架.ppt，包含介绍和例子，ppt！H5表格、表单、框架.ppt，包含介绍和例子，ppt！
html标签之表格标签，疯狂膜拜，2024大厂面试合集
最新发布
weixin_57992300的博客
03-19 901
好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。
html table标签 用法
aojiu2682的博客
10-10 170
创建表格的四个元素： table、tbody、tr、th、td 1、…：整个表格以标记开始、标记结束。 2、…：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。 3、…：表格的一行，所以有几对tr 表格就有几行。 4、…：表格的一个单元格，一行中包含几对…，说明一行中就有几列。...
html表格标签
weixin_44992737的博客
06-06 5134
html表格标签详解
【html】表格标签
倒霉娃不要倒霉的博客
08-08 271
表格标签 表格的主要作用 Pink老师总结: 表格不是用来布局页面的,而是用来展示数据的 表格的基本语法 <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> < table > < /table > 是用于定义表格的标签。 < tr > < /tr > 标签用于定义表格中的行，必须嵌套在 < table
04-HTML表格标签.html
01-08
04-HTML表格标签.html
表格标签.html
09-17
表格标签
HTML基础重点_一般标签、常用标签和表格
09-28
下面小编就为大家带来一篇HTML基础重点_一般标签、常用标签和表格。小编觉得挺不错的， 现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML中table表格标签的基础学习教程
09-28
用table标签在Web上显示表格内容是HTML所具有的最基本功能之一,这里我们就来看一下HTML中table表格标签的基础学习教程,需要的朋友可以参考下
详解HTML表格|l-639642.pdf
11-20
作用：数据的展示，表格应用场景. ...表格结构标签：加载一部分 显示一部分 更加便利. 划分三部分：表头（thead），主体（tbody），脚注（tfoot）这三个标签不能影响布局 　<caption>...</caption>
深入解析HTML的table表格标签与相关的换行问题
09-28
主要介绍了HTML的table表格标签与相关的换行问题,文中给出了强制换行和强制不换行的解决方案,需要的朋友可以参考下
HTML5标签大全
12-14
不允许写结束标记的标签：area(定义图像映射中的区域)、base(为页面上的所有链接规定默认地址或默认目标)、br、col(为表格中一个或多个列定义属性值)、embed(定义嵌入的内容，比如插件–5)、hr、img、input、keygen...
HTML 表格
12-13
每个表格均有若干行（由标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 ...
2022年HTML相关知识点表格标签.pptx
11-02
2022年HTML相关知识点表格标签.pptx
1_表格标签.html
10-31
1_表格标签.html
HTML 表格标签
CodeDoraemon的博客
01-23 712
1. 表格标签 学习目标 2. 表格标签的基本使用 表格的作用 表格主要用于显示、展示数据，可以使得数据显示的非常的规整，有较好的可读性，一个好的表格使得繁杂的数据显示的十分合理，网页中的例子如下所示： 表格不是用来布局页面的，而是用来展示数据的 表格的基本语法 3. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi
html table 表格标签
小白前端
08-16 258
刚开始学习前端的,看老师非常轻而易举的就能写出一个表格的架构,然后对表格的边框、间距、背景色等进行非常熟练的操作。自己羡慕的同时,翻阅html的文档,刚开始也看的云里雾里。但后面自己多加练习也能做到了得心应手的地步,特此记录下各个标签的用法: 首先我们看下html文档对<table> 标签定义 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。 tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。 更复杂的 HTML ...
HTML入门学习笔记--表格标签(4)
qq_孤小狼的博客
01-06 672
其实在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的代表1.什么是表格标签?表格标签作用: 用来给一堆数据添加表格语义 其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式2.表格标签格式:<table> <tr> <td>需要显示的内容</td> </tr> </table>其实表格标签中的
html适合表格标题的标签
06-12
在HTML中，适合表格标题的标签有 `<th>` 和 `<caption>`。 1. `<th>` 标签： `<th>` 标签用于定义表格中的表头单元格，通常用于第一行或第一列，可以使用 `scope` 属性指定表头属于哪一列或哪一行，并且 `<th>` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值