1.table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格边框，实现布局。也叫传统布局，主要用于广告邮件的页面，不是主流。

（1）按照设计图的尺寸设置表格的宽高以及单元格的宽高

（2）将表格border，cellpadding，cellspacing全设置为0，表格的边框和间距就不占页面空间，它只起到划分空间的作用。

（3）针对局部复杂的布局，可以在单元格里面嵌套表格，嵌套表格划分局部的空间。

（4）单元格中的元素或者嵌套的表格用align和valign设置对齐方式

（5）通过属性或者CSS样式设置单元格中元素的样式

<body topmargin="0">

<table width="800" height="800" border="1" cellpadding="0" cellspacing="0" align="center"> <tr> <td width="260" valign="top" bgcolor="#F2F2F2"> <table width="200" border="0" align="center"> <tr><td height="100"></td></tr> <tr> <td align="center"><img src="image/路飞1.jpg" alt="证件照"></td> </tr> <tr> <td align="right">小小雄</td> </tr> <tr> <td align="right">13621553248</td> </tr> <tr> <td align="right">126421@qq.com</td> </tr> </table> </td> <td width="30"></td> <td width="480" valign="top"> <table width="480" border="0" cellpadding="0" cellspacing="0" > <tr> <td height="80"></td> </tr> <tr> <td align="right"><img src="image/简历图标.jpg" alt="标题"></td> </tr> </table > <br /> <hr /> <table width="480" height="200" border="0" 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>亚特兰蒂斯</td> </tr> <tr> <td><b>电话：</b>13597894221</td> <td><b>地址：</b>大荒漠</td> </tr> <tr> <td><b>身高：</b>200cm</td> <td><b>体重：</b>100kg</td> </tr> <tr> <td><b>爱好：</b>打猎</td> <td><b>个性：</b>调皮</td> </tr> </table> <br /> <table width="480" height="100" border="0" cellpadding="0" cellspacing="0"> <tr> <td><b>教育基本情况</b></td> </tr> <tr> <td>2000-2010：骑射剑</td> </tr> <tr> <td>2011-2018：琴书画</td> </tr> </table> <br /> <table width="480" height="100" border="0" cellpadding="0" cellspacing="0"> <tr> <td><b>所获证书</b></td> </tr> <tr> <td>2005年黄金骑士</td> </tr> <tr> <td>2016诗仙</td> </tr> </table> </td> <td width="30"></td> </tr></table>

</body>

2.HTML+CSS布局（DIV+CSS）:主要通过CSS样式设置来布局文字或图片等元素，需要用到CSS盒子模型，盒子类型，CSS浮动，CSS定位，CSS背景图定位等知识来布局，主流布局。