HTML4.01超文本标记语言-HTML表格标签

最新推荐文章于 2025-05-15 20:09:56 发布

来聊前端

最新推荐文章于 2025-05-15 20:09:56 发布

阅读量84

点赞数

分类专栏： HTML 文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/qq_36893834/article/details/131700020

版权

HTML 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了HTML中的表格标签，包括表格的基本语法、常用属性如width、height、border、bordercolor、bgcolor等，以及对齐方式和单元格间距的设置。示例展示了如何创建具有特定宽度、边框样式和颜色的表格，以及如何进行单元格的合并。

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

HTML表格标签

学习目标

在这里插入图片描述

表格标签的语法

表格的属性和描述

属性	描述
th属性	元素定义表头
tr属性	元素定义表格行
td属性	元素定义表格列
width属性	设置表格宽度
height属性	设置表格高度
border	设置表格线的宽度
bordercolor属性	设置表格边框颜色
bgcolor属性	设置表格的背景颜色
align/valign属性	设置表格对齐方式
cellspacing属性	设置单元格间距
cellpadding属性	设置单元格行距
colspan属性	表示该单元格向右跨越的列数
rowspan属性	表示该单元格向下跨越的列数

表格标签的使用方法

在网页中定义了宽度为400像素的表格，边框粗细为1像素，颜色为蓝色，第一行第一个单元格的宽度为200像素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格标签</title>
	</head>
	<body>
		<!--表格-->
		<table border="1"cellspacing="0" cellpadding="0" width="400" height="400" bordercolor="red" align="center">	
			<caption>
				<h4>学生信息表</h4>
			</caption>	
			<tr bgcolor="green">
				<td align="center" valign="top">姓名</td>
				<td align="right" valign="bottom">性别</td>
				<td align="right" valign="bottom">年龄</td>
			</tr>
			<tr>
				<td align="left" valign="middle">张三</td>
				<td>男</td>
				<td>20</td>
			</tr>
			<tr>
				<td align="left" valign="middle">李四</td>
				<td>25</td>
				<td>女</td>
			</tr>
			<tr>
				<td align="left" valign="middle">王五</td>
				<td>36</td>
				<td>男</td>
			</tr>
		</table>

表格合并演示：

<table border="1" cellspacing="0" cellpadding="0" width="400" height="400" align="center">
			<caption>
				<h1>表格合并</h1>
			</caption>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td colspan="3"></td>
				
			</tr>
		</table>