前端开发--HTML--表格_html 前端表格开发-优快云博客

本文链接：https://blog.youkuaiyun.com/sundanping_123/article/details/94547203

本文详细介绍了HTML中表格的创建和布局技巧，包括如何使用table、tr、th和td元素，以及border、width、height等属性进行单元格的样式设置和合并。通过实例展示了如何构建复杂的表格结构。

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

在这里插入图片描述

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>表格</title>
</head>
<body>
	<h1>表格</h1>
<!--  table属性:    border 表格边框的粗度，width 单元格的宽度，height 单元格的宽度 ， align 水平对齐方式：left center right，-->
	<table border='1' width='500' height='300' align='center'>
		<tr>
			<th>表头1</th>
			<th>表头1</th>
			<th>表头1</th>
		</tr>
		<tr>
<!-- td 属性：align水平对齐方式，valign垂直对齐方式：top middle bottom ,colspan 设置单元格水平合并，rowspan设置单元格垂直合并-->
			<td align='center'>1</td>
			<td >2</td>
			<td  rowspan='3'>3</td>
		</tr>

		<tr>
			<td valign='top' align='center'>1</td>
			<td>2</td>
			
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			
		</tr>
	</table>
</body>
</html>

在这里插入图片描述

首先分析，最多的格子，6行5列。然后在考虑合并的问题。

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>表格</title>
</head>
<body>
	<!--  table>(tr>td*5)*6-->
	<table border='1'  width='1500' height='300' align='center'>
		<tr>
			<td height='100' colspan='5'><b>个人情况</b></td>
		</tr>
		<tr>
			<td >姓名</td>
			<td width='300'></td>
			<td >性别</td>
			<td width='300'></td>
			<td width='300' rowspan='5'>[外链图片转存失败(img-MZNw9dMF-1562121053591)(https://mp.youkuaiyun.com/mdeditor/images/12.jpg)]</td>
		</tr>
		<tr>
			<td>民族</td>
			<td></td>
			<td>出生日期</td>
			<td></td>
		</tr>
		<tr>
			<td>政治面貌</td>
			<td></td>
			<td>健康情况</td>
			<td></td>
		</tr>
		<tr>
			<td>籍贯</td>
			<td></td>
			<td>学历</td>
			<td></td>
		</tr>
		<tr>
			<td>电子信箱</td>
			<td></td>
			<td>联系电话</td>
			<td></td>
		</tr>
	</table>
</body>
</html>

在这里插入图片描述