H5（11表格案例：小說排行榜）
阿新 • • 發佈：2020-09-10
案例：小說排行榜
素材：
up.jpg
dowm.jpg
案例成果：
案例實現，以及vscode快捷操作：
由於是一個 八行六列的表格，第一行是th表頭，後面的是普通td單元格：
我們可以這樣進行快捷操作：
按下tab 鍵後：成功生成如下標籤
除了第一行是表頭單元格，剩下的7行，都是普通的td單元格，現在你知道如何快捷生成了吧~！
沒錯就是這樣：很簡單的數學邏輯，配上特殊符號 >
tab 鍵生成後：一個八行六列的表格就生成了，接下來就是補齊內容了
接下來為表格新增對應內容：
表頭，及第一行內容
預覽：
剩下的繼續補齊：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table> <tr> <th>排名</th> <th>關鍵詞</th> <th>趨勢</th> <th>今日搜尋</th> <th>最近七日</th> <th>相關連結</th> </tr><tr> <td>1</td> <td>鬼吹燈</td> <td> <img src="down.jpg" alt=""> </td> <td>345</td> <td>123</td> <td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td> </tr> <tr> <td>2</td> <td>盜墓筆記</td> <td> <img src="down.jpg" alt=""> </td> <td>124</td> <td>675432</td> <td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td> </tr> <tr> <td>3</td> <td>西遊記</td> <td> <img src="up.jpg" alt=""> </td> <td>212</td> <td>7654</td> <td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td> </tr> <tr> <td>4</td> <td>東遊記</td> <td> <img src="up.jpg" alt=""> </td> <td>23</td> <td>75645</td> <td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td> </tr> <tr> <td>5</td> <td>甄嬛傳</td> <td> <img src="down.jpg" alt=""> </td> <td>121</td> <td>7676</td> <td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td> </tr> <tr> <td>6</td> <td>水滸傳</td> <td> <img src="up.jpg" alt=""> </td> <td>576576</td> <td>1231421</td> <td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td> </tr> <tr> <td>7</td> <td>三國演義</td> <td> <img src="up.jpg" alt=""> </td> <td>234</td> <td>7686</td> <td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td> </tr> </table> </body> </html>
預覽：已經有點感覺了，然後再補齊表格樣式
樣式屬性複習：（詳細可以翻閱上一篇筆記：https://www.cnblogs.com/czh333/p/13607199.html）
我們為表格增加：
border = “1” 設定表格單元格邊框
width= “500” 設定表格寬度為 500畫素
align= center 讓其居中對齊
cellspacing = 0 消除單元格間之間的間隔
完成：
附上完整程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table border="1" width="500" align="center" cellspacing="0"> <tr> <th>排名</th> <th>關鍵詞</th> <th>趨勢</th> <th>今日搜尋</th> <th>最近七日</th> <th>相關連結</th> </tr> <tr> <td>1</td> <td>鬼吹燈</td> <td> <img src="down.jpg" alt=""> </td> <td>345</td> <td>123</td> <td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td> </tr> <tr> <td>2</td> <td>盜墓筆記</td> <td> <img src="down.jpg" alt=""> </td> <td>124</td> <td>675432</td> <td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td> </tr> <tr> <td>3</td> <td>西遊記</td> <td> <img src="up.jpg" alt=""> </td> <td>212</td> <td>7654</td> <td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td> </tr> <tr> <td>4</td> <td>東遊記</td> <td> <img src="up.jpg" alt=""> </td> <td>23</td> <td>75645</td> <td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td> </tr> <tr> <td>5</td> <td>甄嬛傳</td> <td> <img src="down.jpg" alt=""> </td> <td>121</td> <td>7676</td> <td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td> </tr> <tr> <td>6</td> <td>水滸傳</td> <td> <img src="up.jpg" alt=""> </td> <td>576576</td> <td>1231421</td> <td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td> </tr> <tr> <td>7</td> <td>三國演義</td> <td> <img src="up.jpg" alt=""> </td> <td>234</td> <td>7686</td> <td> <a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a> </td> </tr> </table> </body> </html>
每天打氣：萬丈高樓平地起，地基還得自己起，剛開始的繁瑣簡單，會為成就未來的你