1、表格標簽： border設置邊框，align設置位置(居中等)，bgcolor設置背景顏色，cellspacing設置邊框之間的空隙，cellpadding設置邊框與里面內容的間距。
table表，tr行，td單元格
<table border="" width="" height="" align="" bgcolor="" cellpadding="" cellspacing="">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<tr></tr>里面也能設置相應屬性，且比<table></table>優先級高。
2、跨行跨列操作（針對單元格，寫在td里面）
跨行：rowspan
跨列：colspan
3、下面實現網站首頁顯示頁面（事先准備若干照片）
首先分析步驟：
1）創建一個七一列的表格
2）實現第一行（嵌套一個一行三列的表格，然后分別對單元格的內容進行填充）
3）實現第二行（暫時使用字體標簽結合超鏈接完成導航欄，需要設置當前單元格的背景顏色為黑色）
4）實現第三行（直接放置一張廣告圖片）
5）實現第四行（嵌套一個三行七列的表格）
6）實現第五行（放置一張廣告圖片）
7）實現第六行（放置一張廣告圖片）
8）實現第七行（使用字體標簽和超鏈接完成友情鏈接和版權信息）
然后寫代碼：
注意代碼中<a href="#" ></a>表示頁面不發生跳轉。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>商城首頁</title> 6 </head> 7 <body> 8 <!--1.創建一個八行一列的表格--> 9 <table border="1px" width="1300px" align="center" cellpadding="0px" cellspacing="0px"> 10 <!--2.logo部分--> 11 <tr> 12 <td> 13 <!--嵌套一個一行三列的表格--> 14 <table border="1px" width="100%"> 15 <tr height="50px"> 16 <td width="33.3%"> 17 <img src="../img/logo2.png" height="47px" /> 18 </td> 19 <td width="33.3%"> 20 <img src="../img/header.png" height="47px"/> 21 </td> 22 <td width="33.3%"> 23 <a href="#">登錄</a> 24 <a href="#">注冊</a> 25 <a href="#">購物車</a> 26 </td> 27 </tr> 28 </table> 29 </td> 30 </tr> 31 32 <!--3.導航欄--> 33 <tr height="50px" > 34 <td bgcolor="black"> 35 <a href="#"><font size="3" color="white">首頁</font></a> 36 <a href="#"><font color="white">手機數碼</font></a> 37 <a href="#"><font color="white">電腦辦公</font></a> 38 <a href="#"><font color="white">鞋靴箱包</font></a> 39 <a href="#"><font color="white">家用電器</font></a> 40 </td> 41 </tr> 42 43 <!--4.輪播圖--> 44 <tr> 45 <td> 46 <img src="../img/1.jpg" width="100%" /> 47 </td> 48 </tr> 49 <!--5.最新商品--> 50 <tr> 51 <td> 52 <!--嵌套一個三行七列的表格--> 53 <table border="1px" width="100%"> 54 <tr height="50px"> 55 <td colspan="7"> 56 <font size="5">最新商品</font> 57 <img src="../img/title2.jpg" /> 58 </td> 59 </tr> 60 61 <tr> 62 <td rowspan="2" width="190px" height="500px"> 63 <img src="../img/big01.jpg" width="100%" height="100%"/> 64 </td> 65 66 <td colspan="3" width="555px" height="250px"> 67 <a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a> 68 </td> 69 70 <td width="185px" height="250px" align="center"> 71 <a href="#"><img src="../img/small03.jpg" /></a><br /> 72 <a href="#"><font color="gray">鍋</font></a><br /><br /> 73 <font color="red">399</font> 74 </td> 75 76 <td width="185px" height="250px" align="center"> 77 <a href="#"><img src="../img/small01.jpg" /></a><br /> 78 <a href="#"><font color="gray">榨汁機</font></a><br /><br /> 79 <font color="red">599</font> 80 </td> 81 82 <td width="185px" height="250px" align="center"> 83 <a href="#"><img src="../img/small02.jpg" /></a><br /> 84 <a href="#"><font color="gray">電視</font></a><br /><br /> 85 <font color="red">2500</font> 86 </td> 87 </tr> 88 <tr> 89 <td width="185px" height="250px" align="center"> 90 <a href="#"><img src="../img/small06.jpg" /></a><br /> 91 <a href="#"><font color="gray">洗衣機</font></a><br /><br /> 92 <font color="red">1800</font> 93 </td> 94 <td width="185px" height="250px" align="center"> 95 <a href="#"><img src="../img/small08.jpg" /></a><br /> 96 <a href="#"><font color="gray">壓力鍋</font></a><br /><br /> 97 <font color="red">499</font> 98 </td> 99 <td width="185px" height="250px" align="center"> 100 <a href="#"><img src="../img/small09.jpg" /></a><br /> 101 <a href="#"><font color="gray">微波爐</font></a><br /><br /> 102 <font color="red">499</font> 103 </td> 104 <td width="185px" height="250px" align="center"> 105 <a href="#"><img src="../img/small07.jpg" /></a><br /> 106 <a href="#"><font color="gray">掃地機器人</font></a><br /><br /> 107 <font color="red">1500</font> 108 </td> 109 <td width="185px" height="250px" align="center"> 110 <a href="#"><img src="../img/small04.jpg" /></a><br /> 111 <a href="#"><font color="gray">面包機</font></a><br /><br /> 112 <font color="red">800</font> 113 </td> 114 <td width="185px" height="250px" align="center"> 115 <a href="#"><img src="../img/small05.jpg" /></a><br /> 116 <a href="#"><font color="gray">咖啡機</font></a><br /><br /> 117 <font color="red">1000</font> 118 </td> 119 </tr> 120 </table> 121 </td> 122 </tr> 123 124 <!--6.廣告圖片--> 125 <tr> 126 <td> 127 <img src="../img/ad.jpg" width="100%" /> 128 </td> 129 </tr> 130 131 <!--7.廣告圖片--> 132 <tr> 133 <td> 134 <img src="../img/footer.jpg" width="100%"/> 135 </td> 136 </tr> 137 138 <!--8.友情鏈接和版權信息--> 139 <tr> 140 <td align="center"> 141 <a href="#"><font>關於我們</font></a> 142 <a href="#"><font>聯系我們</font></a> 143 <a href="#"><font>招賢納士</font></a> 144 <a href="#"><font>法律聲明</font></a> 145 <a href="#"><font>友情鏈接</font></a> 146 <a href="#"><font>支付方式</font></a> 147 <a href="#"><font>配送方式</font></a> 148 <a href="#"><font>服務聲明</font></a> 149 <a href="#"><font>廣告聲明</font></a> 150 <p> 151 Copyright © 2005-2016 hh商城 版權所有 152 </p> 153 </td> 154 </tr> 155 </table> 156 </body> 157 </html>
在瀏覽器中運行，就能顯示網站首頁。