簡單網頁設計之表格版
<html>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<title>2012</title>
<style> //之間是字的大小，什麼字體，顏色
*{margin: 0 auto;}
.zt_j{ margin-top:10px;}
.zt{ font:宋體 12px; color:#000;text-align:center;}
.zt a:link {
color:#000;
text-decoration:underline;}
</style>
<body style=" background-color: #9FF"> //背景是藍色的
<div style="text-align:center; ">
<h1>2012年</h1>
<table class="taglist img" style="width:380px;; text-align:center;"> //這是一個表格式的：<table>是<tr>的上層標籤<tr>必須在一個<table></table>裏面,它不能單獨使用,相當於<table>的屬性標籤. <table>標示一個表格,<tr>標示這個表格中間的一個行 <td>標示行中的一個列,需要嵌套在<tr></tr>中間。
//（例如：具體格式是：兩行兩列)
<table>
<tr>
<td></td>
<td></td>
</tr>
</teble>）
<tr> //<tr>是一行裏有幾張圖片
<td> //<td> 是一列裏有幾張圖片
<a href="./2012-12-26/1.JPG" target="_blank">
<img src="./2012-12-26/zoom/1.JPG" width="80px" （圖片長）height="100px"（圖片寬） style="margin-right:20px;（圖片間左右距離） margin-top:20px;（圖片間上下距離）"/>
</a>
</td>
<td>
<a href="./2012-12-26/2.JPG" target="_blank">
<img src="./2012-12-26/zoom/2.JPG" width="80px" height="100px" style="margin-right:20px; margin-top:20px"/>
</a>
</td>
<td>
<a href="./2012-12-26/3.JPG" target="_blank">
<img src="./2012-12-26/zoom/3.JPG" width="80px" height="100px" style="margin-right:20px; margin-top:20px"/>
</a>
</td>
</tr>
<tr> //<tr>是一行裏有幾張圖片
<td> //<td> 是一列裏有幾張圖片
<a href="./2012-12-26/1.JPG" target="_blank">
<img src="./2012-12-26/zoom/1.JPG" width="80px" height="100px" style="margin-right:20px; margin-top:20px;"/>
</a>
</td>
<td>
<a href="./2012-12-26/2.JPG" target="_blank">
<img src="./2012-12-26/zoom/2.JPG" width="80px" height="100px" style="margin-right:20px; margin-top:20px"/>
</a>
</td>
<td>
<a href="./2012-12-26/3.JPG" target="_blank">
<img src="./2012-12-26/zoom/3.JPG" width="80px" height="100px" style="margin-right:20px; margin-top:20px"/>
</a>
</td>
</tr>
</table>
</div>
<div class="zt zt_j">
上一頁
<a href="02.html">下一頁</a> //鏈接到“下一頁"的 "02.html"圖片。點下一頁就鏈接到下一圖。
</div>
</body>
</html>