HTML的表格元素

最新推荐文章于 2024-06-27 17:33:49 发布

YuanYWRS

最新推荐文章于 2024-06-27 17:33:49 发布

阅读量651

点赞数

分类专栏： web前端初级文章标签：表格元素

本文链接：https://blog.csdn.net/yuanYW7556/article/details/124344252

版权

web前端初级专栏收录该内容

12 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type"content="text/html;charset=utf-8">
		<title>个人资料</title>
	</head>
	<body>
		<table border="1" cellpadding="10" cellspacing="10" width="100" height="100"><!-- 用table进行表格标签定义,border表示边框宽度，cellpadding表示内边框的大小，cellspacing表示设置外边距的大小， -->
			<caption>个人资料</caption><!-- 用caption进行表格标题定义 -->
			<tr><!-- 用tr将表格每行分成若干单元格 -->
				<th>姓名</th><!-- 用td定义标签，如表示单元格的表头，用th -->
				<th>学校</th>
				<th>专业</th>
			</tr>
			<tr>
			<td>张三三</td>
			<td>斯坦福大学</td>
			<td>GIS专业</td>
			<tr>
			<tr>
			<td>张四四</td>
			<td>普林斯顿大学</td>
			<td>RS专业</td>
			<tr>
			<tr>
			<td>张五五</td>
			<td>约翰霍普金斯大学</td>
			<td>测绘专业</td>
			<tr>
		</table>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type"content="text/html;charset=utf-8">
		<title>表格</title>
	</head>
	<body>
		<table border="1" cellpadding="0" cellspacing="0" width="300" height="300"><!-- 用table进行表格标签定义,border表示边框宽度，cellpadding表示内边框的大小，cellspacing表示设置外边距的大小， -->
			<caption>个人资料</caption><!-- 用caption进行表格标题定义 -->
			<tr><!-- 用tr将表格每行分成若干单元格 -->
				<td colspan="2"></td><!-- colspan用于定义单元格跨行 -->
				<td rowspan="2"></td><!-- rowspan用于定义单元格跨列 -->
			</tr>
			<tr>
				<td rowspan="2"></td>
				<td></td>
			</tr>
			<tr>
				<td colspan="2"></td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type"content="text/html;charset=utf-8">
		<title>表格</title>
	</head>
	<body>
		<table border="1" cellpadding="0" cellspacing="0" width="100" height="100">
		<thead><!-- 当需要构建表格的头部、主体、底部时，需要使用thead、tbody\tfoot表示 -->
		</tbody>
			<tr>
				<td></td>
				<td>收入</td>
				<td>支出</td>
				<td>余额</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>父亲</td>
				<td>5万美元</td>
				<td>1万美元</td>
				<td>4万美元</td>
			</tr>
			<tr>
				<td>母亲</td>
				<td>5万美元</td>
				<td>1万美元</td>
				<td>4万美元</td>
			</tr>
		</tbody>
		</table>
	</body>
</html>

在这里插入图片描述