HTML5 Table 佈局實現 商品列表
阿新 • • 發佈：2018-12-16
執行結果如上。。。。
下面說說設計過程：
一開始試探的做的時候，是建立了一個table，這個table裡面放一本圖書的資訊。然後建立了一個列，然後建立了個td，td裡面放圖片，td那個表格多佔幾列，然後再建一個tr放圖書資訊，這樣做了之後發現，tr那一列直接放到圖書下面去了，然後很懵逼，然後調整表格的寬度，高度，表格的佔列數啥的，然後發現還是不行，然後問了問小組長，發現表格中嵌入圖片之後，表格的預設高度已經確認下來了，然後想了想，決定再開一個td，在td中再建立一個table，再在table中寫書的介紹啥的，這樣做確實出現在了圖書的右面了，但是發現寫出的介紹居中，然後發現呼叫td中的valign屬性就可以實現介紹自上而下排列。
然後設定table中的tr中的td的width來實現對錶格寬度的控制。然後發現了一個問題，發現各個表格的寬度是以各個列中最長的表格寬度決定的。因此，在寫比較長的文字介紹時，需要新建一個table，重新設定寬度來實現頁面佈局的合理性。寫購買和收藏的時候也是新建了個table，為了兩個表格間有空隙，想了些餿主意，一個是將一個表格設的長一些，這樣看起來有縫隙，另一個是直接新建一個空的表格，設定寬度，反正都是很餿的主意...
然後在那個表格加上了個隨便的超連結...
然後按照上面的方法建立了6個表格，然後發現並不居中，想讓它們都居中，然後發現單個設不行，然後請教了下別人，然後發現還要建一個大的table，table裡面有6個表格，然後那個大table 設為居中，就可以實現居中了...合的時候想在原來的檔案上合，然後合著合著就迷糊了，只好又新建了一個檔案，先建了一個大table，然後再將6個表格合進去...
最後終於是合完了...
總結：
建網頁的時候一定要將整體佈局先想好，不要寫一點想一點。。。
做不出來的原因還是由於自己的基礎知識掌握的不行，還有就是不會靈活變通，太死板。。。
Table中的border在做的表格的時候不置0真的很重要，能很快的找出問題所在。。。
參考程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>噹噹網</title> </head> <body> <table align="center" border="0"> <tr> <td> <table border="0"> <tr> <td><img src="24003581-1_b_5.jpg"></td> <td valign="top"> <table border="0"> <tr> <td width="250"><font color="blue">HTML CSS JavaScript基礎教程 </font></td> <td width="100"><font color="#dc143c">Web前端開發</font></td> <td width="350"><font color="blue">web前端開發教程 講透HTML5 H5 CSS3 JS核心</font></td> </tr> <tr valign="top"> <td ><font color="#dc143c" size="5">現價 48.60</font> <font color="#a9a9a9" size="1">定價: </font><SPAN style="TEXT-DECORATION: line-through">69.00</SPAN><font color="#a9a9a9" size="1">(7.05折) </font></td> </tr> <tr> <td ><font color="blue">就是我</font><font color="#a9a9a9">/2017-08-01/</font><font color="blue">人民郵電出版社</font></td> </tr> <tr> <td><font color="blue"> 666評論</font></td> </tr> <tr> <td><img src="hot1.png"></td> </tr> <table border="0" width="725"> <tr> <td>初學入門 入門經典 針對前端新手全面打造,一本書搞定HTML CSS JavaScript 精品呈現 通俗易懂 語言輕鬆幽默 講解亦真見血 全形度剖析開發核心技術</td> </tr> </table> <table border="0"> <tr> <!--<td bgcolor="#dc143c" width="120" align="center"><font color="#f0ffff">加入購物車</font></td>--> <td bgcolor="#dc143c" align="center" width="80"><a href="http://product.dangdang.com/25160597.html" >購買</a></td> <td width="25"></td> <td bgcolor="#ffb6c1" width="80" align="center"><font color="#dc143c">收藏</font></td> </tr> </table> </td> </tr> </table> </td> </tr> <!--2--> <tr> <td> <table border="0"> <tr> <td><img src="25108304-1_b_5.jpg"></td> <td valign="top"> <table border="0"> <tr> <td width="350" ><font color="#dc143c">Web前端開發</font><font color="blue">例項教程--HTML5+CSS3+JavaScript</font></td> </tr> <tr> <td><font color="#dc143c" size="5">現價: 31.40 </font><font color="#a9a9a9" size="3">定價: </font><SPAN style="TEXT-DECORATION: line-through">39.80</SPAN><font color="#a9a9a9" size="1">(7.89折)</font></td> </tr> <tr> <td ><font color="blue" size="3">我就是 </font><font color="#a9a9a9" size="2">等主編 /2017-09-01/</font><font color="blue" size="3">電子工業出版社</font></td> </tr> <tr> <td><font color="blue"> 123評論</font></td> </tr> <tr> <td><img src="QQ截圖20181020153425.png"></td> </tr> <tr height="60"><td></td></tr> </table> <table border="0" valign="bottom"> <tr> <td bgcolor="red" width="80" align="center"><a href="http://product.dangdang.com/25168143.html" >購買</a></td> <td width="25"></td> <td bgcolor="#ffb6c1" align="center" width="80"><font color="red" size="3">收藏</font></td> </tr> </table> </td> </tr> </table> </td> </tr> <!--3--> <tr> <td> <table border="0"> <tr> <td><img src="410260224-1_b_3.jpg"></td> <td valign="top"> <table border="0"> <tr> <td width="580"><font color="blue" size="3">移動</font><font color="red" size="3">Web前端</font><font color="blue" size="3">高效</font> <font color="red" size="3">開發</font><font color="blue" size="3">實戰: HTML5+CSS3+JavaScript+Webpack+ReactNative+Vue</font></td> </tr> <tr> <td><font color="red" size="5">現價: 59.21</font></td> </tr> <tr> <td><font color="blue" size="2"> iKcamp </font><font color="#a9a9a9" size="2">/2017-09-01/</font><font color="blue" size="2">電子工業出版社</font></td> </tr> <tr> <td><font color="blue"> 0評論</font></td> </tr> </table> <table border="0"> <tr> <td><img src="QQ截圖20181020153425.png"><img src="電子書.png"><img src="滿2件6折.png"></td> </tr> </table> <table border="0"> <tr> <td width="580"><font>移動Web前端高效實戰 HTML5 CSS3 JavaScript Webpack React Native Vue.js Node.js梳理了移動前端和Native客戶端技術體系 涵蓋了移動Web前端各個關鍵技術環節。</font></td> </tr> </table> <table border="0"> <tr> <td bgcolor="red" width="80" align="center"><a href="http://e.dangdang.com/products/1901084153.html" >購買</a></td> <td width="25"></td> <td bgcolor="#ffb6c1" align="center" width="80"><font color="red" size="3">收藏</font></td> </tr> </table> </td> </tr> </table> </td> </tr> <!--4--> <tr> <td> <table border="0"> <tr> <td><img src="410260226-1_b_2.jpg"></td> <td valign="top"> <table border="0"> <tr> <td width="800"><font color="red" size="3">Web前端開發</font><font color="blue" size="3">從學到用完美實踐--HTML5+CSS3+JavaScript+jQuery+AJAX+AngularJ 著名前端大牛阮曉老師力薦</font></td> </tr> <tr> <td><font size="5" color="red">現價: 69.50 </font><font color="#a9a9a9" size="2">定價： </font><SPAN style="TEXT-DECORATION: line-through">39.80</SPAN><font color="#a9a9a9" size="2">(7.9折)</font></td> </tr> <tr> <td><font color="blue" size="2">阮曉龍 </font><font color="#a9a9a9" size="2">著/2018-08-23/</font><font color="blue" size="2">水利水電出版社</font></td> </tr> <tr> <td><font color="blue"> 0評論</font></td> </tr> <tr> <td><img src="QQ截圖20181020153425.png"></td> </tr> </table> <table border="0"> <tr> <td width="800">貨真料足：著名一線前端開發專家阮曉龍老師多年學習，研究，授課及實戰經驗的結晶 內容系統全面：一站式解決HTML5 CSS3 JavaScript jQuery AJAX AngularJS 學習</td> </tr> </table> <table border="0"> <tr> <td bgcolor="red" width="80" align="center"><a href="http://e.dangdang.com/products/1901084153.html" >購買</a></td> <td width="25"></td> <td bgcolor="#ffb6c1" align="center" width="80"><font color="red" size="3">收藏</font></td> </tr> </table> </td> </tr> </table> </td> </tr> <!--5--> <tr> <td> <table border="0"> <tr> <td><img src="25160597-1_b_3.jpg"></td> <td valign="top"> <table border="0"> <tr> <td width="600"><font color="red" size="3">web前端</font><font color="blue" size="3">基礎</font><font color="red" size="3">開發</font> <font color="blue" size="3">祕籍: HTML5 CSS3 JavaScript Dreamweaver CC網頁設計與製作</font></td> </tr> <tr> <td><font color="red" size="5">現價: 79.80 </font><font color="#a9a9a9" size="2"> 定價:</font> <SPAN style="TEXT-DECORATION: line-through">159.60</SPAN><font color="#a9a9a9" size="2">(5折)</font></td> </tr> <tr> <td><font color="blue" size="2">未來科技 </font><font color="#a9a9a9" size="2">/2017-08-31</font></td> </tr> <tr> <td><font color="blue"> 32評論</font></td> </tr> <tr> <td><img src="QQ截圖20181020153425.png"><font> </font><img src="限時搶.png"></td> </tr> </table> <table border="0"> <tr> <td width="600">10萬 讀者檢驗，暢銷書全面升級；10年開發教學經驗，一線講師半生心血。同屬於HTML CSS JavaScript HTML5移動開發 HTML5實戰 HTML5 APP</td> </tr> </table> <table border="0"> <tr> <td bgcolor="red" width="80" align="center"><a href="http://product.dangdang.com/410260225.html" >購買</a></td> <td width="25"></td> <td bgcolor="#ffb6c1" align="center" width="80"><font color="red" size="3">收藏</font></td> </tr> </table> </td> </tr> </table> </td> </tr> <!--6--> <tr> <td> <table border="0"> <tr> <td><img src="1312533142-1_b_14.jpg"></td> <td valign="top"> <table border="0"> <tr> <td width="700"><font color="blue" size="3">HTML5 Canvas開發詳解 </font><font color="red" size="3">Web前端開發</font> <font color="blue" size="3">精品課全綵印刷! 全面透徹介紹HTML5 Canvas開發核心知識</font></td> </tr> </table> <table border="0"> <tr> <td width="300"><font color="red" size="5">現價： 56.80 </font><font color="#a9a9a9"size="2">定價：</font> <SPAN style="TEXT-DECORATION: line-through">79.00</SPAN><font color="#a9a9a9" size="2">(7.19折) </font></td> <td bgcolor="#4169e1" width="100" align="center"><font color="white" size="5">電子書:</font></td> <td><font color="blue" size="5"> 50.56</font></td> </tr> <tr> <td><font color="blue" size="2">莫振杰</font><font color="#a9a9a9" size="2">/2017-03-01/</font><font color="blue" size="2">人民郵電出版社</font></td> </tr> <tr> <td><font color="blue"> 278評論</font></td> </tr> <tr> <td><img src="QQ截圖20181020153425.png"></td> </tr> </table> <table border="0"> <tr> <td width="650">含金量高 前端精品內容薈萃，強化基礎提升實戰技能。 通俗易懂 語言風格輕鬆幽默，形象生動講解枯燥知識。 系統學習 掌握前端高階技巧， 清晰流暢學習進階內容。</td> </tr> </table> <table border="0"> <tr> <td bgcolor="red" width="100" align="center"><a href="http://product.dangdang.com/25065629.html">購買紙質書</a></td> <td width="25"></td> <td bgcolor="red" width="100" align="center"><a href="http://e.dangdang.com/products/1900783222.html">購買電子書</a></td> <td width="25"></td> <td bgcolor="#ffb6c1" align="center" width="80"><font color="red" size="3">收藏</font></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>