1. 程式人生 > >html-table(單元格)

html-table(單元格)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table width="500" border="1px" cellspacing="0" cellpadding="0" align="center">
<caption>小說排行榜</caption>
<tr>
<th>排名</th>
<th>關鍵詞</th>
<th>趨勢</th>
<th>今日搜尋</th>
<th>最近七日</th>
<th>相關連結</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹燈</td>
<td><img src="img/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="img/up.jpg" alt=""></td>
<td>124</td>
<td>6578</td>
<td>
<a href="">貼吧</a>
<a href="">圖片</a>
<a href="">百科</a>
</td>
</tr>

<tr>
<td>3</td>
<td>西遊記</td>
<td><img src="img/down.jpg" alt=""></td>
<td>212</td>
<td>222223</td>
<td>
<a href="">貼吧</a>
<a href="">圖片</a>
<a href="">百科</a>
</td>
</tr>
<tr>
<td>4</td>
<td>東遊記</td>
<td><img src="img/up.jpg" alt=""></td>
<td>22212</td>
<td>7676</td>
<td>
<a href="">貼吧</a>
<a href="">圖片</a>
<a href="">百科</a>
</td>
</tr>
<tr>
<td>5</td>
<td>三國演示</td>
<td><img src="img/down.jpg" alt=""></td>
<td>234</td>
<td>7687</td>
<td>
<a href="">貼吧</a>
<a href="">圖片</a>
<a href="">百科</a>
</td>
</tr>
</table><br><hr>
<table width="500px" border="1px" cellspacing="0" cellpadding="0" align="center">
<caption>個人資訊表</caption>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>生日</th>
<th>班級</th>
</tr>
<tr>
<td>零度雨</td>
<td >男</td>
<td>18</td>
<td>90-10</td>
<td >計算機</td>
</tr>
<tr>
<td>零度雨</td>
<td>男</td>
<td>18</td>
<td>90-10</td>
<td>計算機</td>
</tr>
</table><br><br>
<table border="1px" cellspacing="0" align="center" width="500px">
<caption>測試一下合併單元格</caption>
<tr>
<td rowspan="3">123</td> <!-- 合併單元格,合併3行 合併原則,從左到右,有上到下。-->
<td colspan="2">123</td> <!-- 合併單元格,合併2列 -->

</tr>
<tr>
<!-- <td>123</td> -->
<td>123</td>
<td>abc</td>
</tr>
<tr>
<!-- <td>123</td> -->
<td>123</td>
<td>abc</td>
</tr>
</table>
</body>
</html>