HTML学习之路-03HTML表格、table布局

已于 2022-10-28 20:00:18 修改
阅读量3.1k 收藏 18
点赞数 1
分类专栏： HTML学习 文章标签： html 学习 前端
于 2022-08-20 16:16:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63204687/article/details/126187874
版权

目录

一、HTML表格

a.基本知识

1.table标签

2.tr标签

3.td和th标签

 b.练习

1.代码

2.运行

3.分析

4.感悟

c.案例

1. 效果：

2.分析

注意：以上tr正确写法应该<tr>,以此类推。

一、HTML表格

a.基本知识

1.table标签

声明一个表格（关于表格的代码全部放在这个标签里面），它的常用属性如下：

  • border属性 定义表格的边框，设置值是数值
  • cellpadding属性 定义单元格内容与边框的距离，设置值是数值（内间距）
  • cellspacing属性 定义单元格与单元格之间的距离，设置值是数值（外间距）
  • align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right默认左对齐
  • height设置高度
  • width设置宽度
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1px" width=500px height=300px align="center" >
			
		</table>
	</body>
</html>

 以上代码只是用table定义了一个表格，其中边框为1像素，宽高，水平居中。

 

2.tr标签

定义表格中的一行

3.td和th标签

定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：

align 设置单元格中内容的水平对齐方式,设置值有：left | center | right

valign 设置单元格中内容的垂直对齐方式 top | middle | bottom

colspan 设置单元格水平合并，设置值是数值

rowspan 设置单元格垂直合并，设置值是数值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1px" width=500px height=300px align="center">
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		<h1>表格</h1>
		<table border="1px" width=300px height=200px align="center">
		<!-- 声明一个表格由其开头和结尾border设置边框像素,
		里面的高宽是设置总的高宽 
		align设置水平方向对齐方式默认先左对齐
		属性之间隔开空格就行
		-->
			<tr><!-- 声明一行h -->
				<td align="center">1</td><!-- 画格子 -->
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<!-- 声明一行h， valign设置垂直对齐-->
				<td valign="top" align="center">1</td><!-- 画格子 -->
				<td>2</td>
				<td>3</td>
			</tr>
			<tr><!-- 声明一行h -->
				<th>1</th><!-- th标签表头：默认水平垂直居中加粗 -->
				<th>2</th>
				<th>3</th>
			</tr>
		</table>
	</body>
</html>
<!-- 想要在页面画表格 -->

 b.练习

1.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
	</head>
	<body>
		<table border="1" height='300' width="700" align="center">
			<tr>
				<td colspan="5" align="center" >基本情况</td><!-- colspan="5"水平合并 -->
			</tr>
			<tr>
				<td width="15%"></td>
				<td width="25%"></td>
				<td width="15%"></td>
				<td width="25%"></td>
				<td rowspan="5" width="20%"><img src="../../../images/person.png" alt="人物图片"></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>

			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>

			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>

			</tr>
		</table>
	</body>
</html>

2.运行

3.分析

从运行结果来看表格一共有6行每行有5列

所以大致的思路是6个tr标签每一个tr包5个td

而本代码思路是在第一行的时候定义5列其余代码可以只定义4列

4.感悟

当我们在第一行定义了格子3列时，后面只要定义一行就自动是三列，无需进行再定义

c.案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人简历</title>
	</head>
	<body topmargin="0"><!-- 顶格 -->
		<table align="center" height="800" width="800" border="0" cellpadding="0" cellspacing="0"><!-- 实现边界消失 -->
			<!--  cellpadding="20" cellspacing="20" -->
			<!-- cellpadding:表格中格子里面的内容离格子本身各边线的距离 -->
			<!-- 格子与格子之间的距离cellspacing -->
			<tr>
				<td width="260" valign="top" bgcolor="#f2f2f2">
					<table width="200" border="0" cellpadding="0" cellspacing="0" align="center">
						<tr>
							<td height="100"></td>
						</tr>
						<tr>
							<td align="right"><img src="../../../images/person.png" alt="人物图片"></td>
						</tr>
						<tr>
							<td align="right"> 张达山</td>
						</tr>
						<tr>
							<td align="right">13326489976</td>
						</tr>
						<tr>
							<td align="right">5642316548@qq.com</td>
						</tr>
					</table>
				</td>
				<td width="30"></td>
				<td width="480" valign="top">
					<table width="480" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td height="80"></td>
						</tr>
						<tr>
							<td align="right"><img src="../../../images/resume.png" alt="个人简历背景"></td>
						</tr>
					</table>
					<br>
					<hr>
					<br>
					<table width="480" height="200" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td colspan="2" ><b>个人基本情况</b></td>
						</tr>
						<tr>
							<td><b>姓 名：</b>张达山</td>
							<td><b>籍 贯：</b>北京昌平</td>
						</tr>
						<tr>
							<td><b>性 别：</b>男 </td>
							<td><b>身 高：</b>175cm</td>
						</tr>
						<tr>
							<td><b>民 族：</b>汉</td>
							<td><b>体 重：</b>70kg</td>
						</tr>
						<tr>
							<td><b>出生日期</b>：1992.03.28</td>
							<td><b>电 话：</b>18210898888</td>
						</tr>
						<tr>
							<td><b>现居住地</b>：昌平天通苑</td>
							<td><b>专 业：</b>工业设计</td>
						</tr>
					</table>
					<br>
					<br>
					<table width="480" height="80" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td><b>教育背景及工作经历</b></td>
						</tr>
						<tr>
							<td><b>2008.09-2011.06</b>北京邮电大学 工业设计专业</td>
						</tr>
						<tr>
							<td><b>2011.06-2012.09</b>北京微创信息科技有限公司 任前端开发工程师</td>
						</tr>
					</table>
					
					
					<br>
					<br>
					<table width="480" height="80" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td><b>所获证书</b></td>
						</tr>
						<tr>
							<td><b>2009年：</b>荣获“高级美术设计师”证书</td>
						</tr>
						<tr>
							<td><b>2009年：</b>荣获“优秀班干部”证书</td>
						</tr>
					</table>
				</td>
				<td width="30"></td>
			</tr>
		</table>
	</body>
</html>
<!-- 
布局的两个方式：
1.table布局---传统布局
2.html+css布局(DIV+CSS)
 -->

1. 效果：

2.分析

图1

 从图1可知代码并没有给这一行的每一个设置高度，其默认高度是文字或图片自然撑开的。

br标签实现换行

hr标签实现水平线的绘制

二、总结

学习了table表格其中

1.<table width="" height="" align="" border=""  ></table>

2.</br> </hr>

3.tr定义一行 td定义一列 th定义主列 <b></b>标签加粗

『Knight』
关注
  • 1
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML 自动伸缩的表格Table js实现
10-30
在开发的过程中，表格Table有个缺陷，如果一行中某个单元格的超过一行，表格就不够美观了。
HTML-表格布局
zhaxideilei的博客
05-28 3200
1.0table标签 1.1table标签是表格布局标签，可以通过表格之间的嵌套合并来实现多所需要的表格。 <table>表格标签 <tr>行标签 <th>表头标 <td>列标签 <thead>定义表头 <tbody> 元素用于对 HTML 表格中的主体内容进行分组 <tfoot> 元素用于对 HTML 表格中的表注（页脚） 通过如图方式实现 <!DOCTYPE html>..
【Web应用技术基础】HTML(3)——表格
m0_74164458的博客
03-20 480
注意： 要在HTML中设置表格文本水平居中，可以使用CSS样式。具体操作如下： 1. 在标签内添加标签，用于编写CSS样式。 2. 在标签内，为表格的标签设置text-align属性为center。
CSS display属性的table表格布局
01-19
项目改造中遇到DIV+CSS实现的table，新需求需要在表格使用单元格合并，网上调查返现CSS display:table实现的table表格，没有单元格的属性和样式，经过一番思考，曲折现实了单元格的合并，即采用正行嵌套一个单独的display:table的DIV，然后在嵌套的表格DIV内部通过控制行列数和行列的高度，实现单元格合并。个人建议全新实现使用 HTML标签即可 一、CSS display属性的表格布局相关属性的解释： table    此元素会作为块级表格来显示（类似 ），表格前后带有换行符。table-row-group    此元素会作为一个或多个
HTML表格布局实例讲解
12-13
HTML 文档中的元素是一个接着一个排列的，只是简单地在在块级元素的前后加上拆行，是一种流水布局。但是，我们所见到的 Web 页面按照一定的规则布局排版的（通常是多列的），所以就要借助一定的方法来实现这种布局，通常的解决方案是：使用区块元素 <div> 或 表格（<table>）来布局 Web 页面的内容。 使用表格进行布局，是一种较老的布局解决方案。并不推荐使用，我们应该总是使用表格来显示表格化的数据。 HTML 文档 CSS Code复制内容到剪贴板 <!DOCTYPE html>    <html lang="en">    <head>        <
HTML之table布局
YeLang
03-08 851
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>table布局</title> </head> <body topmargin="0"><!--topmargin参数设置0，是将内容上面顶格，不留空隙。--> &l...
【HTML】HTML 表格总结 ★★★ ( 表格标签 | 行标签 | 单元格标签 | 表格标签属性 | 表头单元格标签 | 表格标题标签 | 合并单元格 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-18 7607
一、表格标签组成 ( 表格标签 | 行标签 | 单元格标签 ) 二、table 表格属性 ( border 属性 | align 属性 | width 属性 | height 属性 ) 三、表头单元格标签 四、表格标题标签 五、合并单元格 1、合并单元格方式 2、合并单元格顺序 3、合并单元格流程 六、合并单元格示例 1、原始表格 2、跨行合并单元格 3、跨列合并单元格
HTML第二章 “表格”详解 （附带详细代码与解释）！！！
a2499797637的博客
09-30 7900
1.表格的语法、2. 表格的可选标记、3. 表格的属性、4. 不规则的表格、5. 表格的大小
HTML——表格
三三木木七的博客
05-19 1万+
🌳🌳🌳前言：本文总结了HTML表格的基础知识点 目录 🍄表格——创建 🍄表格——border 🍥表格——border 🍄表格——设置表格的宽、高 🌰举个例子——设置表格的宽、高 🍥表格——width 🍥表格——height 🍄表格——cellpadding 🌰举个例子——cellpadding 🍥表格——cellpadding 🍄表格——cellspacing 🌰举个例子——cellpadding 🍥表格——cellspacing 🍄表格——表格的标题 🌰举个例子...
HTML—表格
Ywyyy231128的博客
11-14 4411
此外，thead、tbody和tfoot标签除了可以使代码更具有语义，还有另外一个重要作用 ：方便分块来控制表格的CSS样式。在HTML中，单元格其实有两种：一种是“表头单元格”，使用的是th标签；另一种是“表行单元格”，使用的是td标签。***一个表格只能有一个标题，也就是只能有一个caption标签。***分析：在默认情况下，表格是没有边框的。***说明：th和td在本质上都是单元格，但是并不代表两者可以互换，它们具有以下区别。***说明：在表格中，有多少组“",就表示有多少行。
HTML中的表格和表单（含有示例代码）
热门推荐
weixin_57197500的博客
05-20 4万+
表格 表格的基本构成标签 table标签：表格标签 caption标签：表格标题 tr标签：表格中的行 th标签:表格的表头 td标签：表格单元格 表格的基本结构 <table>定义表格 <caption>表格标题</caption> <tr>定义表行 <th>定义表头</th> </tr> <tr&g...
HTML表格布局实际使用详解
12-14
现在，表格<table>一般不再用于网页整体的布局。不过，在面对某些特定的设计，如表单输入、数据呈现时，表格则可能是最恰当的选择。 关于表格的直观印象，就是由多个单元格（cell）整齐排列而成的元素，可以明确看...
table表格布局网页
07-24
博客引用的table布局小例子，没有办法设置为0积分，请见谅
基于display:table的CSS布局让HTML元素和像table一样
12-13
最终，使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。 网页元素应用上那些与表格相关的display属性值后，能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大...
HTML中的文档声明
小卡酷谋的博客
04-22 1173
浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。书写文档声明原因是不同版本所支持的 HTML 元素类型是不同的，我需要告诉浏览器以哪一种文档类型方式来解析当前的这个 HTML 文件。模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的。
HTML中meta标签属性详解
最新发布
猫老板的豆
04-25 851
meta>标签是一种用于在 HTML 文档头部提供元数据的标签。它通常位于标签内，用于向浏览器和搜索引擎提供关于网页的信息，而不是直接展示给用户是HTML标记head区的一个关键标签，用于描述一个HTML网页文档的属性，提供有关页面的元信息。它并不会显示在页面上，但对于机器是可读的，可用于浏览器（如何显示内容或重新加载页面）、搜索引擎（SEO）或其他web服务。
前端三剑客 HTML+CSS+JavaScript ⑤ HTML文本标签
m0_73983707的博客
04-24 462
1.这些不常用的文本标签，编码时不必过于纠结(酌情而定，不用也行)2.blockquote和address是块级元素，其他的文本标签，都是行内元素3.有些语义感不强的标签，很少使用，例如：重要的、语义感强的标签即可；
HTML随机点名程序
m0_65992344的博客
04-22 467
HTML随机点名程序
用html写一个旋转菜单
liulang68的博客
04-24 745
【代码】用html写一个旋转菜单。
html表格
05-27
HTML表格是一种用于展示数据的标准化格式，可以使用HTML的<table>、<tr>、<td>等标签来创建表格。 以下是一个简单的HTML表格示例： ```html <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>张三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> </tr> </table> ``` 在上面的示例中，<table>标签定义了一个表格，<tr>标签定义了表格中的行，<td>标签定义了行中的单元格，<th>标签定义了表头单元格。通过使用这些标签，可以创建出一个包含多行和多列的表格。 HTML表格还支持合并单元格、添加边框、设置单元格宽度等操作，可以根据需要进行调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

『Knight』

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值