HTML入门——常用标签之表格标签

于 2023-07-21 21:42:55 发布
阅读量543 收藏 4
点赞数 1
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73887605/article/details/131860628
版权

 表格标签也是一种复合标签。

由：table,tr,td,th,thead,tbody组合，由行和列组合成，行和列交叉的地方就是单元格。

表格相关属性：

  • table:

  1. border:边框

  2. width:宽度

  3. height:高度

  4. align:整个表格的排版 left,center,right

  5. bgcolor:作用于整个表的背景颜色

  • tr:行

  1. height:行高

  2. bgcolor:作用于一整行的背景色

  3. align:作用于一整行的内容的水平排版 left,center,right

  4. valign:作用于一整行的内容的垂直排版 top,middle,bottom

  • td:列

  1. width:列宽

  2. bgcolor:作用于单元格的背景色

  3. align:作用于单元格的内容的水平排版 left,center,right

  4. valign:作用于单元格的内容的垂直排版 top,middle,bottom

<table>

<tr>

<td>数据</td>

<td>数据</td>

</tr>

<tr>

<td>数据</td>

<td>数据</td>

</tr>

</table>

 示例：

<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="utf-8"> 
		<title></title>
	</head>
	<body>
	<table border="1px" width="800px" align="center">
	<!--border是边框的意思-->
		<tr>
			<td>姓名</td>
			<td>性别</td>
			<td>年龄</td>
			<td>地址</td>
		</tr>
		<tr>
			<td>jack</td>
			<td>boy</td>
			<td>20</td>
			<td>成都</td>
		</tr>
		<tr>
			<td>rose</td>
			<td>girl</td>
			<td>18</td>
			<td>绵阳</td>
		</tr>
	</table>
	
	</body>
</html>

<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="utf-8"> 
		<title></title>
	</head>
	<body>
	<table border="1px" width="800px" align="center">
	<!--border是边框的意思-->
		<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>地址</th>
		</tr>
		<tr>
			<td>jack</td>
			<td>boy</td>
			<td>20</td>
			<td>成都</td>
		</tr>
		<tr>
			<td>rose</td>
			<td>girl</td>
			<td>18</td>
			<td>绵阳</td>
		</tr>
	</table>
	
	</body>
</html>

 

 

<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="utf-8"> 
		<title></title>
	</head>
	<body>
	<table border="1px" width="800px" align="center">
	<!--border是边框的意思-->
		<tr height="60px">
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>地址</th>
		</tr>
		<tr height="40px">
			<td>jack</td>
			<td>boy</td>
			<td>20</td>
			<td>成都</td>
		</tr>
		<tr height="40px">
			<td>rose</td>
			<td>girl</td>
			<td>18</td>
			<td>绵阳</td>
		</tr>
	</table>
	
	</body>
</html>

<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="utf-8"> 
		<title></title>
	</head>
	<body>
	<table border="1px" width="800px" align="center">
	<!--border是边框的意思-->
		<tr height="60px">
			<th width="100px">姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>地址</th>
		</tr>
		<tr height="40px">
			<td>jack</td>
			<td>boy</td>
			<td>20</td>
			<td>成都</td>
		</tr>
		<tr height="40px">
			<td>rose</td>
			<td>girl</td>
			<td>18</td>
			<td>绵阳</td>
		</tr>
	</table>
	
	</body>
</html>

 

 

<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="utf-8"> 
		<title></title>
	</head>
	<body>
	<table border="1px" width="800px" align="center">
	<!--border是边框的意思-->
		<tr height="60px">
			<th width="100px">姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>地址</th>
		</tr>
		<tr height="40px" align="center">
			<td>jack</td>
			<td>boy</td>
			<td>20</td>
			<td>成都</td>
		</tr>
		<tr height="40px" align="center">
			<td>rose</td>
			<td>girl</td>
			<td>18</td>
			<td>绵阳</td>
		</tr>
	</table>
	</body>
</html>

<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="utf-8"> 
		<title></title>
	</head>
	<body>
	<table border="1px" width="800px" align="center">
	<!--border是边框的意思-->
		<tr height="60px">
			<th width="100px">姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>地址</th>
		</tr>
		<tr height="50px" align="center">
			<td>jack</td>
			<td>boy</td>
			<td>20</td>
			<td>成都</td>
		</tr>
		<tr height="50px" align="center">
			<td>rose</td>
			<td>girl</td>
			<td>18</td>
			<td align="rigtht">绵阳</td>
		</tr>
	</table>
	</body>
</html>

 

<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="utf-8"> 
		<title></title>
	</head>
	<body>
	<table border="1px" width="800px" align="center">
	<!--border是边框的意思-->
		<tr height="60px">
			<th width="100px">姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>地址</th>
		</tr>
		<tr height="50px" align="center">
			<td>jack</td>
			<td>boy</td>
			<td>20</td>
			<td>成都</td>
		</tr>
		<tr height="50px" align="center">
			<td>rose</td>
			<td>girl</td>
			<td>18</td>
			<td align="rigtht" valign="top">绵阳</td>
		</tr>
	</table>
	</body>
</html>

 

<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="utf-8"> 
		<title></title>
	</head>
	<body>
	<table border="1px" width="800px" align="center">
	<!--border是边框的意思-->
		<tr height="60px">
			<th width="100px">姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>地址</th>
		</tr>
		<tr height="50px" align="center">
			<td>jack</td>
			<td>boy</td>
			<td>20</td>
			<td>成都</td>
		</tr>
		<tr height="50px" align="center">
			<td>rose</td>
			<td>girl</td>
			<td>18</td>
			<td align="rigtht" valign="bottom">绵阳</td>
		</tr>
	</table>
	</body>
</html>

 

<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="utf-8"> 
		<title></title>
	</head>
	<body>
	<table border="1px" width="800px" align="center">
	<!--border是边框的意思-->
		<tr height="60px" bgcolor="blue">
			<th width="100px">姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>地址</th>
		</tr>
		<tr height="50px" align="center">
			<td>jack</td>
			<td>boy</td>
			<td>20</td>
			<td>成都</td>
		</tr>
		<tr height="50px" align="center">
			<td>rose</td>
			<td>girl</td>
			<td>18</td>
			<td align="rigtht" valign="bottom">绵阳</td>
		</tr>
	</table>
	</body>
</html>

 

 

<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="utf-8"> 
		<title></title>
	</head>
	<body>
	<table border="1px" width="800px" align="center">
	<!--border是边框的意思-->
		<tr height="60px" bgcolor="yellow">
			<th width="100px">姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>地址</th>
		</tr>
		<tr height="50px" align="center">
			<td>jack</td>
			<td>boy</td>
			<td>20</td>
			<td>成都</td>
		</tr>
		<tr height="50px" align="center">
			<td>rose</td>
			<td>girl</td>
			<td>18</td>
			<td align="rigtht" valign="bottom">绵阳</td>
		</tr>
	</table>
	</body>
</html>


<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="utf-8"> 
		<title></title>
	</head>
	<body>
	<table border="1px" width="800px" align="center"  bgcolor="pink">
	<!--border是边框的意思-->
		<tr height="60px">
			<th width="100px">姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>地址</th>
		</tr>
		<tr height="50px" align="center">
			<td>jack</td>
			<td>boy</td>
			<td>20</td>
			<td>成都</td>
		</tr>
		<tr height="50px" align="center">
			<td>rose</td>
			<td>girl</td>
			<td>18</td>
			<td align="rigtht" valign="bottom">绵阳</td>
		</tr>
	</table>
	</body>
</html>

<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="utf-8"> 
		<title></title>
	</head>
	<body>
	<table border="1px" width="800px" align="center"  bgcolor="pink">
	<!--border是边框的意思-->
		<tr height="60px" bgcolor="grey">
			<th width="100px">姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>地址</th>
		</tr>
		<tr height="50px" align="center">
			<td>jack</td>
			<td>boy</td>
			<td>20</td>
			<td>成都</td>
		</tr>
		<tr height="50px" align="center">
			<td>rose</td>
			<td>girl</td>
			<td>18</td>
			<td align="rigtht" valign="bottom">绵阳</td>
		</tr>
	</table>
	</body>
</html>

 

 

<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="utf-8"> 
		<title></title>
	</head>
	<body>
	<table border="1px" width="800px" align="center"  bgcolor="pink">
	<!--border是边框的意思-->
		<tr height="60px" bgcolor="grey">
			<th width="100px">姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>地址</th>
		</tr>
		<tr height="50px" align="center">
			<td>jack</td>
			<td>boy</td>
			<td>20</td>
			<td>成都</td>
		</tr>
		<tr height="50px" align="center">
			<td>rose</td>
			<td>girl</td>
			<td>18</td>
			<td align="rigtht" valign="bottom" bgcolor="green">绵阳</td>
		</tr>
	</table>
	</body>
</html>

 

<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="utf-8"> 
		<title></title>
	</head>
	<body>
	<table border="1px" width="800px" align="center">
		<tr height="60px" bgcolor="grey">
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>省份</th>
			<th>城市</th>
		</tr>
		<tr height="50px" align="center">
			<td>jack</td>
			<td>boy</td>
			<td>20</td>
			<td>四川</td>
			<td>成都</td>
		</tr>
		<tr height="50px" align="center">
			<td>rose</td>
			<td>girl</td>
			<td>18</td>
			<td>四川</td>
			<td>绵阳</td>
		</tr>
	</table>
	</body>
</html>

 

 

<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="utf-8"> 
		<title></title>
	</head>
	<body>
	<table border="1px" width="800px" align="center" cellspacing="0px">
		<tr height="60px" bgcolor="grey">
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>省份</th>
			<th>城市</th>
		</tr>
		<tr height="50px" align="center">
			<td>jack</td>
			<td>boy</td>
			<td>20</td>
			<td>四川</td>
			<td>成都</td>
		</tr>
		<tr height="50px" align="center">
			<td>rose</td>
			<td>girl</td>
			<td>18</td>
			<td>四川</td>
			<td>绵阳</td>
		</tr>
	</table>
	</body>
</html>

 

表格的合并：

行列合并都作用于td/th

列合并：colspan="n",表示合并n列

行合并：rowspan="n",表示合并n行

行合并：

<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="utf-8"> 
		<title></title>
	</head>
	<body>
	<table border="1px" width="800px" align="center" cellspacing="0px">
		<tr height="60px" bgcolor="grey">
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th colspan="2">地址</th>
		</tr>
		<tr height="50px" align="center">
			<td>jack</td>
			<td>boy</td>
			<td>20</td>
			<td>四川</td>
			<td>成都</td>
		</tr>
		<tr height="50px" align="center">
			<td>rose</td>
			<td>girl</td>
			<td>18</td>
			<td>四川</td>
			<td>绵阳</td>
		</tr>
	</table>
	</body>
</html>

 列合并：

<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="utf-8"> 
		<title></title>
	</head>
	<body>
	<table border="1px" width="800px" align="center" cellspacing="0px">
		<tr height="60px" bgcolor="grey">
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th colspan="2">地址</th>
		</tr>
		<tr height="50px" align="center">
			<td>jack</td>
			<td>boy</td>
			<td>20</td>
			<td rowspan="2">四川</td>
			<td>成都</td>
		</tr>
		<tr height="50px" align="center">
			<td>rose</td>
			<td>girl</td>
			<td>18</td>
			<td>绵阳</td>
		</tr>
	</table>
	</body>
</html>

 

小李网安
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
＜table＞＜/table＞表格标签的基本概念和基本属性
qq_51490348的博客
06-02 1836
学习目标： 掌握<table></table>的使用和基本属性 学习内容： 标签是用来创建 HTML 表格的 简单的 HTML 表格由 table 元素以及一个或多个 tr（定义行）、th（定义表头） 或 td（定义表格单元） 组成。 <table border="1"> <tr> <th>第一行第一列</th> <th>第一行第二列</th> </tr> <tr&
html table th分层,html中 table的结构 彻底搞清 caption th thead等
weixin_29009501的博客
06-24 895
正因为有太多 随意 称呼的 教法, 所以 感到很困惑, 如, 很多人把th叫标题. 那人家 caption怎么想, th只是一个跟td一样的角色, 只是对他进行加粗 加黑了而已, 用于某些单元格的内容 具有 "总起, 总领, 总结, 总计 "之类的语义时...在html中写table的时候,要注意它的结构, 和所包含的 标签层次.要得到 一个 空的 单元格, 直接写 就好了, 或许可以加 ...
(礼拜一log)前端开发：<td> 标签的 colspan 属性 & 两个div并排、一个宽度固定的实现方法
YuqiRealm.com
05-09 2214
td标签的colspan属性 两个div并排，一个宽度固定的实现方法
【黑马前端—HTML标签】表格标签、列表标签、表单标签
学习如逆水行舟，不进则退
08-25 374
表格标签 表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据 的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 表格不是用来布局页面的,而是用来展示数据的. 表格的基本语法 <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> <table< </table
头歌：HTML——表格：第2关：表格的属性——宽、高
m0_61690708的博客
11-03 1788
头歌：HTML——表格：第2关：表格的属性——宽、高
HTML中的table表格
small_by的博客
11-28 1438
table:定义表格 tr:定义行 td:定义列 //先有行，后有列 th:多用于表头，
html中table标签、tr标签、th标签、td标签的基础知识
TNANDXYF的博客
01-27 3万+
html表格标签——表格的基本结构表格的结构表格的基本标签表格标签的基本属性table标签的基本属性tr标签的基本属性th和td标签的基本属性 表格的结构 在基本表格结构中，表格标题、项目表头和数据资料构成了表格基本结构三个要素。 例如下图所示的表格中，表格标题为“通讯录”，表格第一行单元格中的内容基本不变，称作项目表头，表格第二行后单元格的内容通常会动态改变，称作数据资料。 基本表格 表格的基本标签 HTML表格由table标签以及一个或多个tr、th或td标签组成： table标签：定义一个表格 ca
使用html在网页中制作表格/对应的标签用法与属性/＜table＞标签/＜tr＞标签/＜td＞标签/＜th标签＞/学习笔记
No1banana的博客
02-10 8176
一、创建表格 学会使用html的<table>标签在网页中插入表格 基本语法格式 <table> <tr> <td></td> </tr> tr标签定义行，td标签定义列 </table> 1.案例演示 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>创建表格</ti
10、HTML表格（table 、th、tr、td、合并单元格）的简单认识
qq_43535992的博客
02-01 1万+
1、表格的定义 表格的定义是通过 table 标签来定义的，当然了，如果只是写一个 table 标签，是看不见任何内容的，一个表格是由行和列组成，而在HTML中，行的定义又是由 tr 标签来定义的，列是由 td 标签来定义的。 例如： <table > <tr> <td>1-1</td> <td>1-2</t...
前端笔记04 - 表格标签
kukudeqi的博客
09-10 281
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>st
HTML中的常用标签
09-18
包含HTML中的常用标签写法和详解，适合入门或转行的朋友
XHTML入门学习教程:表格标签的应用
01-19
表格是XHTML中处境尴尬的一个标签，本节只做了解即可. 关于表格 在CSS流行之前，table被广泛应用于定位。在XHTML中，table不被推荐用来定位，W3C希望CSS可以取代在定位方面的地位。不过事实上由于利用CSS布局常常...
严澜：数据挖掘入门——分词
01-30
这里，严澜将带我们逐渐开启这座金山——从“分词”开始挖掘数据。谷歌4亿英镑收购人工智能公司DeepMind，百度目前正推进“百度大脑”项目，腾讯、阿里等各大巨头也在积极布局深度学习。随着社会化数据大量产生，...
XHTML入门学习教程:XHTML常用标签
09-28
就像一篇文章一样，我们的网页也要段落分明，也需要重要程度不同的标题。本节就将介绍XHTML中实现标题、段落等功能的常用签..标题标签到定义标题，我们可以使用从到这几个标签，它们对应的终止标签分别为到</
入门：HTML的基本标签和属性简单介绍
01-19
HTML是由标志和属性构成的，它们一起被用来告诉浏览器应该如何显示一页文档。标志用来引用一段文字或是一幅图片等文档部件，属性是标志的选项，在标志中修饰，如颜色，对齐方式，高度和宽度等... ———-表示该文件为HT
HTML <td> 标签的 colspan 属性
weixin_30602505的博客
09-03 223
HTML <td> 标签的 colspan 属性 实例 表格单元横跨两列的表格： 浏览器支持 所以浏览器都支持 colspan 属性。 没有浏览器支持 colspan="0"，这个值有特殊的意义。（参见属性值表格中的描述） 语法 <td colspan="value"> 属性值 值描述 number 设置单元格可横跨的列数...
HTML 中的Table标签
AI_dkx的博客
06-30 3634
Table标签如何使用，Table页面布局，Table属性介绍
HTML中的table标签属性
热门推荐
My_liuying0901
05-17 7万+
表格 表格是由行和列排列而成的一种结构 HTML表格由table标签以及一个或多个tr、th或td标签组成： table标签用来定义表格，整个表格包含在<table>和</table>标签中； tr标签用来定义表格中一个行，它是单元格的容器，每行可以包含有多个单元格，由<tr>和</tr>标签表示； td标签和th标签用来定义单元...
html表格
weixin_53475254的博客
11-08 1401
html表格html表格初始表格的宽高表格的属性——cellpadding表格的属性——cellspacing表格的标题表格——\ 标签的 rowspan 属性表格——\标签的colspan属性文本对齐方式 html表格 初始 HTML表格由行和列组成，这里我们就用HTML标签写一个表格。标签用来创建表格，<tr>标签用来创建行，<td>标签用来创建列。这里先创建一个两行两列的表格。代码如下： <table border="2"> <tr>
程序设计入门——C语言
最新发布
07-27
很高兴回答你关于C语言的问题！作为程序设计的入门语言，C语言是一个非常重要的选择。它是一种通用的、高级的编程语言，广泛应用于系统软件、嵌入式系统和游戏开发等领域。 C语言具有简洁、高效、可移植等特点，它提供了丰富的库函数和强大的控制结构，使得开发者能够灵活地进行编程。同时，C语言也是很多其他编程语言的基础，学习好C语言可以为你打下坚实的编程基础。 对于初学者来说，建议从基础开始学习C语言的语法和基本概念，如变量、数据类型、运算符、条件语句、循环结构等。掌握这些基础知识后，可以深入学习函数、指针、数组、结构体等更高级的内容。 在学习过程中，可以通过练习编写简单的程序来提高自己的编程能力，例如实现一些常见的算法和数据结构。同时，阅读一些经典的C语言书籍也是非常有帮助的。 希望这些信息对你有所帮助！如果还有其他问题，欢迎继续提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值