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">[email protected]</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背景圖定位等知識來佈局，主流佈局。