使用html在网页中制作表格/对应的标签用法与属性/＜table＞标签/＜tr＞标签/＜td＞标签/＜th标签＞/学习笔记

本文链接：https://blog.csdn.net/No1banana/article/details/122866829

本文详细介绍了如何使用HTML创建表格，包括table、tr、td和th标签的使用及属性。通过案例演示，展示了如何设置表格样式，如背景颜色、宽度等，并强调了各标签的特性及其相互影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、创建表格

学会使用html的<table>标签在网页中插入表格

基本语法格式

<table>
  <tr>
    <td></td>
  </tr>
  tr标签定义行，td标签定义列
</table>

1.案例演示

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>创建表格</title>
</head>
<body>
	<table border="4">
		<!--给表格添加边框-->
		<tr>
			<td>学生名称</td>
			<td>竞赛学科</td>
			<td>分数</td>
		</tr>
		<tr></tr>
			<td>赵欣</td>
			<td>数学</td>
			<td>100</td>
		<tr></tr>
			<td>小明</td>
			<td>英语</td>
			<td>28</td>
		<tr>
			<td>小花</td>
			<td>物理</td>
			<td>78</td>
		</tr>
	</table>
</body>
</html>

效果图片

在这里插入图片描述

二、table标签的属性

table标签有如下几种属性，具体用法如<table border="4">

属性	描述	属性值
border	表格边框	像素值
width	表格宽度	像素值
height	表格高度	像素值
align	表格在网页中水平对齐方式	left、center、right
cellspacing *	单元格与边框之间的空白间距	像素值（默认2像素）
cellpadding *	单元格内容与单元格边框之间的空白距离	像素值（默认1像素）
bgcolor	背景颜色	#颜色值

还有背景颜色、背景图片等属性，略。

基本语法格式

<table border="4" cellspacing="20px" align="center" width="500px" bgcolor="#eee">

三、tr标签的属性

利用tr标签的属性可以为表格中的行设置不同的样式

属性	描述	常用属性值
height	行高	像素值
aligh	设置一行内容的水平对齐方式	left、center、right
valign	设置行内容的垂直对齐方式	top、middle、bottom
bgcolor *	行的背景颜色	#颜色值
background	行背景图像	url（图像地址）

注意：如果table标签给出宽度，tr标签会自适应表格宽度，所以tr标签不能width属性

1.案例演示

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>tr标签属性</title>
</head>
<body>
	<table border="2" width="500px" height="200px" align="center">
		<tr height="50px" align="center" valign="bottom" bgcolor="#CFA725">
			<td>姓名</td>
			<td>性别</td>
			<td>电话</td>
			<td>地址</td>
		</tr>
				<tr align="center">
			<td>小王</td>
			<td>男</td>
			<td>110</td>
			<td>北京</td>
		</tr>
				<tr align="center">
			<td>小李</td>
			<td>男</td>
			<td>120</td>
			<td>上海</td>
		</tr>
			<tr align="center">
			<td>amy</td>
			<td>女</td>
			<td>911</td>
			<td>美国</td>
		</tr>
	</table>
</body>
</html>

效果图片
在这里插入图片描述

四、td标签的属性

熟悉td标签的属性可以为表格中的单元格设置样式

属性名	含义	属性值
width	单元格宽度	像素值
height	单元格高度	像素值
colspan *	单元格的水平方向合并	正整数
rowspan *	单元格的竖直方向合并	正整数

注意：td标签的其它属性同tr标签，其他属性均可使用css样式替代，重点学习单元格的合并。

此外，当某一个td单元格设置科宽度属性后，该列中的所有单元格都会以当前设置的宽度显示。

基本语法格式

		</tr>
				<tr align="center">
			<td bgcolor="#00FFFF" width="200px">小王</td>
			<td>男</td>
			<td>110</td>
			<td>北京</td>
		</tr>

1.案例演示

<html>
<head>
<meta charset="UTF-8">
<title>tr标签属性</title>
</head>
<body>
	<table border="2" width="500px" height="200px" align="center">
		<tr height="50px" align="center" valign="bottom" bgcolor="#CFA725">
			<td>姓名</td>
			<td>性别</td>
			<td>电话</td>
			<td>地址</td>
		</tr>
				<tr align="center">
			<td bgcolor="#00FFFF" width="200px">小王</td>
			<td>男</td>
			<td>110</td>
			<td rowspan="3">北京</td>
		</tr>
				<tr align="center">
			<td>小李</td>
			<td>男</td>
			<td>120</td>
		</tr>
			<tr align="center">
			<td>amy</td>
			<td>女</td>
			<td>911</td>
		</tr>
	</table>
</body>
</html>

效果图片
在这里插入图片描述

五、th标签的属性

<th></th>标签可以用来设置表头，默认为加粗居中显示

使用方式和属性与td标签是一样的，把需要修改的表头的<td>标签更改为<th>即可。

//欢迎加我VX进群交流
vx账号：-Sep07