HTML中表格标签

最新推荐文章于 2024-07-12 00:07:26 发布
最新推荐文章于 2024-07-12 00:07:26 发布
阅读量426 收藏
点赞数 1
文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zzze0101/article/details/90295616
版权

table

  • border
    设定围绕表格的边框的宽度
    设定方式在table双标签的第一个标签内：<table border=“1px”>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border=“1px”>
			<tr>
				<td>姓名</td><td>地址</td><td>身份证号</td>
			</tr>
			<tr>
				<td>Tom</td><td>中国北京</td><td>123456789</td>
			</tr>
			<tr>
				<td>Lucy</td><td>中国上海</td><td>123456789</td>
			</tr>
		</table>
	</body>
</html>

结果如下：
在这里插入图片描述
注意：border标签属性不仅设置围绕表格边框的宽度，还为每个单元格添加宽度为1px的边框，并且实际开发中不建议使用border标签属性实现边框效果，建议通过为table、td 设置border css样式属性实现，如下代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				border: 1px solid black;
			}
			td{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table >
			<tr>
				<td>姓名</td><td>地址</td><td>身份证号</td>
			</tr>
			<tr>
				<td>Tom</td><td>中国北京</td><td>123456789</td>
			</tr>
			<tr>
				<td>Lucy</td><td>中国上海</td><td>123456789</td>
			</tr>
		</table>
	</body>
</html>

执行结果与第一种设置方法一致。

  • width
    设定表格的宽度
    设定方式，在table双标签的第一个标签内：<table width=“70%” >
    不建议通过width标签属性设置表格宽度，建议向table标签添加width样式属性进行设置，如下代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				border: 1px solid black;
				width: 70%;
			}
			td{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table >
			<tr>
				<td>姓名</td><td>地址</td><td>身份证号</td>
			</tr>
			<tr>
				<td>Tom</td><td>中国北京</td><td>123456789</td>
			</tr>
			<tr>
				<td>Lucy</td><td>中国上海</td><td>123456789</td>
			</tr>
		</table>
	</body>
</html>

结果如下，表格占据浏览器的70%
在这里插入图片描述

  • align
    指定表格相对于周围标签的对齐方式。属性值有left，right，center分别对应左对齐表格，右对齐表格，中间对齐表格。
    设定方式：<table align=“center” >
    不建议通过align标签属性设置表格相对于周围标签的对齐方式，建议向table标签添加样式属性进行设置，如下代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				border: 1px solid black;
				width: 70%;
				margin: 0 auto;
			}
			td{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table >
			<tr>
				<td>姓名</td><td>地址</td><td>身份证号</td>
			</tr>
			<tr>
				<td>Tom</td><td>中国北京</td><td>123456789</td>
			</tr>
			<tr>
				<td>Lucy</td><td>中国上海</td><td>123456789</td>
			</tr>
		</table>
	</body>
</html>

结果表格位于浏览器中间显示。

  • cellspacing
    设定单元格之间的间距。
    设定方式：<table cellspacing=“0” >
    不建议通过cellspacing标签属性设置单元格之间的间距，建议向table标签添加border-spacing样式属性进行设置，如下代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				border: 1px solid black;
				width: 70%;
				margin: 0 auto;
				border-spacing: 0;
			}
			td{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table >
			<tr>
				<td>姓名</td><td>地址</td><td>身份证号</td>
			</tr>
			<tr>
				<td>Tom</td><td>中国北京</td><td>123456789</td>
			</tr>
			<tr>
				<td>Lucy</td><td>中国上海</td><td>123456789</td>
			</tr>
		</table>
	</body>
</html>

结果如下：

在这里插入图片描述
表格中间没有间隙

  • cellpadding
    设定单元边沿与单元内容之间的间距。
    设定方式：<table cellpadding=“10px”>
    不建议通过cellpadding标签属性设置单元边沿与单元内容之间的间距，建议向td或th标签添加padding样式属性来实现，如下代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				border: 1px solid black;
				width: 70%;
				margin: 0 auto;
				border-spacing: 0;
			}
			td{
				padding: 10px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table >
			<tr>
				<td>姓名</td><td>地址</td><td>身份证号</td>
			</tr>
			<tr>
				<td>Tom</td><td>中国北京</td><td>123456789</td>
			</tr>
			<tr>
				<td>Lucy</td><td>中国上海</td><td>123456789</td>
			</tr>
		</table>
	</body>
</html>

结果如下：
在这里插入图片描述

  • bgcolor
    设置表格背景颜色。
    设定方式：<table bgcolor=“blue” >
    不建议通过bgcolor标签属性设置表格背景颜色，建议向table标签添加background-color样式属性实现这一效果，如下代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				border: 1px solid black;
				width: 70%;
				margin: 0 auto;
				border-spacing: 0;
				background-color: blue;
			}
			td{
				padding: 10px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table >
			<tr>
				<td>姓名</td><td>地址</td><td>身份证号</td>
			</tr>
			<tr>
				<td>Tom</td><td>中国北京</td><td>123456789</td>
			</tr>
			<tr>
				<td>Lucy</td><td>中国上海</td><td>123456789</td>
			</tr>
		</table>
	</body>
</html>

结果如下：
在这里插入图片描述

tr标签属性

  • align
    设置表格行中单元格内容的水平对齐方式，该标签属性有多个值：
    在这里插入图片描述
    设定方式：<tr align=“center”>
    不建议通过align设置表格行中单元格内容的水平对齐方式，建议向tr标签添加text-align样式属性实现这一效果，如下代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				border: 1px solid black;
				width: 70%;
				margin: 0 auto;
				border-spacing: 0;
				background-color: blue;
			}
			tr{
				text-align: center;
			}
			td{
				padding: 10px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table >
			<tr align="center">
				<td>姓名</td><td>地址</td><td>身份证号</td>
			</tr>
			<tr>
				<td>Tom</td><td>中国北京</td><td>123456789</td>
			</tr>
			<tr>
				<td>Lucy</td><td>中国上海</td><td>123456789</td>
			</tr>
		</table>
	</body>
</html>

结果如下：
在这里插入图片描述
表格内文字内容居中。

  • valign
    设置表格行中单元格内容的垂直对齐方式，该标签属性有多个值：
    在这里插入图片描述
    设定方式：<tr valign=“top”>
    不建议通过valign设置表格行中单元格内容的垂直对齐方式，建议向tr标签添加vertical-align样式属性实现这一效果，如下代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				border: 1px solid black;
				width: 70%;
				margin: 0 auto;
				border-spacing: 0;
				background-color: blue;
			}
			tr{
				height: 80px;
				vertical-align: top;
				text-align: center;
			}
			td{
				padding: 10px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table >
			<tr >
				<td>姓名</td><td>地址</td><td>身份证号</td>
			</tr>
			<tr>
				<td>Tom</td><td>中国北京</td><td>123456789</td>
			</tr>
			<tr>
				<td>Lucy</td><td>中国上海</td><td>123456789</td>
			</tr>
		</table>
	</body>
</html>

结果如下：
在这里插入图片描述
文字紧贴表格上方。

  • bgcolor
    该属性设置方法与table标签的bgcolor属性的设置方法一致。

th和td标签属性

  • width与height
    设定单元格的宽度和高度。
    设定方式：<td height=“50px”>
    不建议通过height设置单元格的高度，建议向td标签添加height样式属性实现这一效果，如下代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				border: 1px solid black;
				width: 70%;
				margin: 0 auto;
				border-spacing: 0;
				background-color: blue;
			}
			tr{
	
				vertical-align: top;
				text-align: center;
			}
			td{
				height: 50px;
				padding: 10px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table >
			<tr >
				<td>姓名</td><td>地址</td><td>身份证号</td>
			</tr>
			<tr>
				<td>Tom</td><td>中国北京</td><td>123456789</td>
			</tr>
			<tr>
				<td>Lucy</td><td>中国上海</td><td>123456789</td>
			</tr>
		</table>
	</body>
</html>

结果如下：
在这里插入图片描述

  • colspan
    设置单元格横跨多少列。
    设定方式：<td colspan=“3”>个人信息</td>，如下代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				border: 1px solid black;
				width: 70%;
				margin: 0 auto;
				border-spacing: 0;
			}
			tr{
				text-align: center;
			}
			td{
				padding: 10px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table >
			<tr >
				<td colspan="3">个人信息</td>
			</tr>
			<tr >
				<td>姓名</td><td>地址</td><td>身份证号</td>
			</tr>
			<tr>
				<td>Tom</td><td>中国北京</td><td>123456789</td>
			</tr>
			<tr>
				<td>Lucy</td><td>中国上海</td><td>123456789</td>
			</tr>
		</table>
	</body>
</html>

结果如下：
在这里插入图片描述

  • rowspan
    设置单元格横跨多少行。
    设定方式：<td rowspan=“3”>个人信息</td>，如下代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				border: 1px solid black;
				width: 70%;
				margin: 0 auto;
				border-spacing: 0;
			}
			tr{
				text-align: center;
			}
			td{
				padding: 10px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table >
			<tr >
				<td rowspan="3">个人信息</td><td>姓名</td><td>地址</td><td>身份证号</td>
			</tr>
			<tr>
				<td>Tom</td><td>中国北京</td><td>123456789</td>
			</tr>
			<tr>
				<td>Lucy</td><td>中国上海</td><td>123456789</td>
			</tr>
		</table>
	</body>
</html>

结果如下：
在这里插入图片描述
th和td中也有valign，bgcolor，align属性，设置方法与table中一致。

Zzze0101
关注
HTML基础---表格标签
weixin_48055520的博客
04-15 1389
HTML--表格标签
HTML的表格标签
qianniao_yingmo的博客
03-30 3305
表格标签需要知道的的基础知识
58. python高级------html(2)
qq_40455733的博客
04-18 312
文章目录57. python高级------html(2)python修炼第十九天2019年 4月18日 晴1.列表标签1.无序列表2.有序列表2.表格标签 57. python高级------html(2) python修炼第十九天 2019年 4月18日 晴 1.列表标签 1.无序列表 <!-- ul标签定义无序列表 --> <ul> <!--...
HTML常见标签——表格＜table＞标签、表格标签常见的属性、表格的跨行合并和跨列合并
最新发布
weixin_64294248的博客
07-12 3161
HTML中的表格是用于用于统计、展示结构化数据的标记语言元素。表格标签是双标签，写作。每个表格分为表格标题（由 标签定义），以及表格单元格（由 标签定义），表格标题和表格身体中均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义），表格可以包含标题行（）用于定义列的标题，其中标题行（）会有默认加粗的效果。
HTML之表格标签
hmh520i的博客
12-19 2727
前端学习日记
html中的表格标签
weixin_51182359的博客
04-23 87
对于html中表格标签的简单介绍
HTML表格标签
weixin_52629158的博客
10-23 2159
HTML表格标签
HTML中table表格标签的基础学习教程
12-14
表格的标签组成HTML中的表格是由为主体标签，浏览器会将该标签解释为一个表格。表格中的行使用标签进行定义。标签为标签的子类，设置若干个标签可以将表格分割为若干个行。标签用于定义表格的列，标签为又是标签的...
2022年HTML相关知识点表格标签.pptx
11-02
HTML表格标签是HTML中一种基本的结构元素，用于组织和显示数据。下面是HTML表格标签的相关知识点： 表格的基本语法 在HTML中，表格的建立将运用、、、四个标签完成。 * 标签用于定义一个表格元素，一个表格元素，...
html表格标签
weixin_44992737的博客
06-06 5355
html表格标签详解
HTML——表格标签
m0_69059702的博客
05-09 642
1.使用场景：在网页中以行+列的单元格的方式整齐展示和数据，以让数据显示的非常的规整，可读性非常好。 2.表格的基本语法 <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> <table> </table> 是用于定义表格的标签。 <tr> </tr> 标签用于定义表格中的行，必须嵌套在 <ta.
html标签之表格标签，前端应用性能优化，【建议收藏】
m0_57472099的博客
03-19 1073
7）border-collapse样式属性：设置表格的边框是否被合并为一个单一的边框；
详解HTML中的表格标签
weixin_30689307的博客
07-23 119
详细代码如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表格制作</title> </head> <body> &...
『HTML系列』表格标签
老__L的博客
10-25 7574
本文主要介绍caption、col、colgroup、table、tbody、td、tfoot、th、thead、tr标签。 table 开始标签和结束标签不能省略；表格中由行中的单元格组成；表格中没有列元素，列的个数取决于行的单元格个数；caption 开始标签和结束标签都不能省略；当 table 标签是 caption 的父元素，caption 是 figure 元素的唯一后代的时候，
HTML表格标签、列表标签和表单标签
小何代码咖啡馆
04-16 923
</dl>标签用于定义描述列表（或定义列表），该标签会与<dt></dt>（定义项目/名字）和<dd></dd>（描述每一个项目/名字）一起使用。<dl>-- 列表名称 --><dt></dt>-- 列表描述 --><dd></dd><title>自定义列表</title>列表名称
html 表格的标签
weixin_43294560的博客
10-14 251
**表格标签(设置表格的宽高不能限定每个单元格大小都一样):** <table> <tr> //表示一行 <th></th> //表示一个单元格,一般用于表头格，默认居中加黑 <td></td> //表示一个单元格 </tr> </table&g...
HTML-表格标签
Tommy5553的博客
06-22 141
表格标签    可以对数据进行格式化，使数据显示更加清晰    &lt;table&gt;&lt;/table&gt;：表格的范围    在table里面 &lt;tr&gt;&lt;/tr&gt;表示一行        设置显示方法 align letf center right（设置居左，居中，居右）    在tr里面 &lt;td&gt;&lt;/td&gt;表示一个单元格    使用&lt...
HTML表格标签符入门教程
下面我们将深入探讨HTML中的表格标签符以及基础概念。 表格标签符在HTML中用于构建表格，主要由`<Table>`标签开启，以`</Table>`标签结束。以下是一些关键的表格属性： 1. `Width`属性：用于设定表格的宽度。它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值