文章列表、博文列表，一般是有文章名字和時間構成的，文章名字后面是時間，點擊文章的名字，可進入該文章。
為了美觀，一般文章名字都有一定的最大字數限制，長寬對齊，等長寬的統一格式比較美觀，這種用表格來做比較簡單，更新時值需要加表格行就行了。
1.本文的頁面效果，網頁主體采用了三部分，上部分是標題欄導航欄，中間是內容欄，下邊有個網頁底部。（三部分，相關博文：HTML布局排版4三部分測試圖片頁面、）
2.導航欄和標題欄布滿整個瀏覽器寬度，寬度自適用，導航欄采用的是點擊導航欄上的鏈接進行跳轉的方法，此外，也可以是塊狀鏈接，由於本人喜歡點導航條的文字，點着習慣，所以采用不塊狀的方法。（導航條，相關博文：HTML布局水平導航條2制作、）
3.中間的主體部分，用的是table布局，中間是平鋪條，這樣不管中間有多少內容，都會自動自適應，便於以后增刪文章。（相關博文：HTML用table布局排版 padding清零、）
4.主體里面內部文字和時間用table進行格式一下，中間平鋪的單元格里嵌套了一個table用來設置文章和時間格式。
之前的博文里有制作的介紹，這里把前面的內容整合了一下，組成了一個頁面，並在3主體里加了個嵌套表格，用來格式文章列表樣式。
1.2.3都有相關博文，介紹樣式，這里介紹表格嵌套。由於表格嵌套表格，所以代碼看起來雜亂，一般是通過縮進進行區分，嵌套在大table的單元格里的table縮進一下，格式化代碼，看出沒對table標簽的區域，這里用注釋標注出來嵌套的表格。
大致結構：大主體表格，分為三行，第一行是頂部的圖片，第二行中嵌套了表格，第三行是底部的圖片。
第二行是平鋪，不設置高度，所以嵌套的表格可以高度自適應，之后可以隨意增加內容。
PS：之前的博文有的是介紹div的，有的是表格的，上面的相關博文是這里用到的排版方式。
頁面代碼：共空行分開了代碼 區域，第一區域就是標題條，第二區域是導航，第三區域是內容，第四區域是頁腳。
<body id="bodyA1"> <div id="header"> <div id="head1"></div> </div> <div id="d"> <ul> <li><a href="">簡短問答</a></li> <li><a href="bloglistindex.html">博文備份</a></li> <li><a href="">測試用</a></li> <li><a href="">關於</a></li> </ul> </div> <div id="t1"> <table width="900px"> <tr> <td colspan=2 width="900px" height="165px" class="td_top"></td> </tr> <tr> <td class="td_mid" width="900px"> <!--嵌套的表格開始--> <table> <tr> <td width="600px" ><a href="./blogbacklist/b220.html">[簡短問答]如何用虛擬打印機測試，虛擬打印機相關</a></td> <td width="300px" >2019-09-23 14:30</td> </tr> <tr> <td width="600px"><a href="./blogbacklist/b209.html">LODOP紙張/打印機/份數/打印方向/雙面打印 簡短問答</a></td> <td width="300px">2019-09-23 14:36</td> </tr> 省略。。。。。。。。。。。。多個tr行 </table> <!--嵌套的表格結束--> </td> </tr> <tr> <td colspan=2 width="900px" height="75px" class="td_bottom"></td> </tr> </table> </div> <div id="footer"><img src="./images/huaxie.png"></div> </body>
嵌套表格的樣式代碼：（頁面其余部分樣式代碼再上面鏈接的相關博文中有介紹）
table{margin:auto;border-collapse:collapse;} td{padding:0px;} .td_top{background-image:url(../images/top.png);} .td_mid{background-image:url(../images/mid.png);padding-left:50px;line-height:30px;} .td_bottom{#8ea5e0;background-image:url(../images/bottom.png);} #t1{font-size:14px;} #t1 a{text-decoration:none;color:blue;}
圖示：
