传统布局：使用table来做整体页面的布局
总结：这种方式来制作页面现在也不是很多了，感觉并不是很高效。
需要先用photoshop量出页面布局具体的尺寸位置，再将其划分为表格，对每个格子进行编辑。
每个格子可以嵌套表格，这样有时候写着写着还有点迷糊，要重新找到编辑位置属于哪一个表格的哪个位置，通常会将表格的border设置为1，方便检查
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>简历</title></head><body> ???<table width="800" height="800" border="0" cellpadding="0" cellspacing="0" align="center"> ???????<tr> ???????????<td width="260" valign="top" bgcolor="#f2f2f2"> ???????????????<table width="260" border="0"> ???????????????????<tr height="100"> ???????????????????????<td></td> ???????????????????????<td></td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td width="230"align="right"><img src="images/0032.jpg" alt="小动物"></td> ???????????????????????<td width="30"></td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td align="right">高圈圈</td> ???????????????????????<td></td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td align="right">17612341234</td> ???????????????????????<td></td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td align="right">18812341234@163.com</td> ???????????????????????<td></td> ???????????????????</tr> ???????????????</table> ???????????</td> ???????????<td width="30"></td> ???????????<td width="480" valign="top"> ???????????????<table border="0" cellspacing="0" cellpadding="=0" width="480"> ???????????????????<tr height="75"></tr> ???????????????????<td></td> ???????????????????<tr> ???????????????????????<td align="right"> ???????????????????????????<img src="images/resume.jpg"> ???????????????????????</td> ???????????????????</tr> ???????????????</table> ???????????????????????????????<hr /> ???????????????????????????????<table border="0" cellspacing="0" cellpadding="=0" width="480" height="180"> ???????????????????<tr> ???????????????????????<td colspan="2"><b>个人基本情况</b></td> ???????????????????</tr> ???????????????????<tr height="10"> ???????????????????????<td></td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td width="50%">姓名：高圈圈</td> ???????????????????????<td width="50%">籍贯：外太空</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>性别：女</td> ???????????????????????<td>民族：汉族</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>身高：168</td> ???????????????????????<td>体重：100</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>出生日期：2017.1.1</td> ???????????????????????<td>电话：17610101010</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>专业：啥都学！</td> ???????????????????????<td>现居住地：北京</td> ???????????????????</tr> ???????????????</table> ???????????????????????????????<br /> ???????????????????????????????<table border="0" cellspacing="0" cellpadding="=0" width="480" height="100"> ???????????????????<tr> ???????????????????????<td><b>教育背景及工作经历</b></td></tr> ???????????????????<tr> ???????????????????????<td>2013-2017 吉林大学 光通信专业</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>2017-至今 北京邮电大学 电子科学与技术专业</td> ???????????????????</tr> ???????????????</table> ???????????????????????????????<br /> ???????????????????????????????<table> ???????????????????<tr> ???????????????????????<td><b>专业技能</b></td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>小仙女都是有超能力的！我啥都可能会哦！</td> ???????????????????</tr> ???????????????</table> ???????????????????????????????<br /> ???????????????????????????????<table> ???????????????????<tr> ???????????????????????<td><b>获奖情况</b></td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>2013—2014 学年度：二等奖学金</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>2014—2015 学年度：二等奖学金、院优秀学生干部</td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>2015—2016 学年度：二等奖学金</td> ???????????????????</tr> ???????????????</table> ???????????</td> ???????????????????????<td width="30"></td> ???????</tr> ???</table></body></html>
贴一张效果图：
还没学样式，所以这个页面的样式还很朴素！
要继续学！不能这么朴素！
HTML——传统布局的使用
原文地址：https://www.cnblogs.com/gaoquanquan/p/9129723.html