前端开发--HTML--table布局

最新推荐文章于 2025-06-11 08:30:00 发布

小哦--

最新推荐文章于 2025-06-11 08:30:00 发布

阅读量559

点赞数

CC 4.0 BY-SA版权

分类专栏： html +css +javascript

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

html +css +javascript 专栏收录该内容

43 篇文章

订阅专栏

本文通过实例解析前端开发中HTML的table布局，详细介绍了如何利用table元素创建四列布局，具体尺寸分配为260px、30px、480px和30px，总计800px的简历页面。

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

在这里插入图片描述

做一个上图的简历，先分析，四列，分别是260 30 480 30 ，总共是800.

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>布局</title>
</head>
<body topmargin='0'>
	<table border='0' width='800' height='800' align='center' cellpadding='0' cellspacing='0'>
		<tr>
			<td width='260' valign='top' bgcolor='#f2f2f2'>
				<table border='0' width='230' cellpadding='0' cellspacing='0' align='center'>
					<tr>
						<td height='50'></td>
					</tr>
					<tr>
						<td align='right' >
							[外链图片转存失败(img-nEGR1bTf-1562138328379)(https://mp.youkuaiyun.com/mdeditor/images/1.jpg)]
						</td>
					</tr>
					<tr>
						<td align='right'>张大山</td>
					</tr>
					<tr>
						<td align='right'>11111111111</td>
					</tr>
					<tr>
						<td align='right'>zhangdashan@126.com</td>
					</tr>
				</table>
			</td>
			<td width='30'></td>
			<td width='480' valign='top'>
				<table border='0'  width='480' cellpadding='0' cellspacing='0'>
					<tr>
						<td align='right'>
							[外链图片转存失败(img-TxmV1RyL-1562138328379)(https://mp.youkuaiyun.com/mdeditor/images/jianli.jpg)]
						</td>
					</tr>
				</table>
				<hr />
				<br>
				<table border='0' width='480' height='200' cellpadding='0' cellspacing='0'>
					<tr>
						<td colspan='2'><b>个人基本情况</b></td>
					</tr>
					<tr>
						<td><b>姓名：</b>张大山</td>
						<td><b>籍贯：</b>山东省青岛市</td>
					</tr>
					<tr>
						<td><b>性别：</b>男</td>
						<td><b>身高：</b>180cm</td>
					</tr>
					<tr>
						<td><b>民族：</b>汉</td>
						<td><b>体重：</b>70kg</td>
					</tr>
					<tr>
						<td><b>出生日期：</b>1994.01.01</td>
						<td><b>电话：</b>11111111111</td>
					</tr>
					<tr>
						<td><b>现居住地址：</b>11路11号</td>
						<td><b>专业：</b>前端工程师</td>
					</tr>
				</table>
				<br>
				<table border='0' width='480' height='100' cellpadding='0' cellspacing='0'>
					<tr>
						<td colspan='3'><b>教育背景及经历</b></td>
					</tr>
					<tr>
						<td>2008.09-2011.09 </td>
						<td>北京大学</td>
						<td>计算机专业</td>
					</tr>
					<tr>
						<td>2011.09-至今</td>
						<td>北京科技有限公司</td>
						<td>前端开发工程师</td>
					</tr>
				</table>
				<br>
				<table border='0' width='480' height='100' cellpadding='0' cellspacing='0'>
					<tr>
						<td><b>所获证书</b></td>
					</tr>
					<tr>
						<td><b>2009年：</b>荣获‘高级网络设计师’称号 </td>
					</tr>
					<tr>
						<td><b>2010年：</b>荣获‘优秀班干部’称号</td>
					</tr>
				</table>
			</td>
			<td width='30'></td>
		</tr>
	</table>
</body>
</html>

在这里插入图片描述