<!DOCTYPE html>
<html lang="zh-tw">
<head>
<title>表格</title>
<meta charset="UTF-8">
<style>
table{
width:250px;/*設定表格寬度*/
border: 3px solid red; /*設定表格框線*/
border-collapse:collapse;/*使表格框(table)跟每一格(column)的框不重複*/(collapse：瓦解)
}
td,th{/*如果想要兩個標籤用同樣的規格可以這樣用逗號區開寫*/
border: 3px solid #FFBB00;
}
thead{
text-transform:uppercase;/*標題中的字均為大寫*/
border-bottom: 3px double;/*雙底線*/
background-color:#FFDDAA
}
tbody{
text-align:center;/*置中*/
}
tbody tr:nth-child(2n){background-color:#EE7700}/*設定偶數列的顏色，應寫在tbody{}的正下方*/
tbody tr:nth-child(2n+1){background-color:#FF5511}
tbody tr:hover{background-color:#FFFFFF}/*滑鼠滑過時會變顏色*/
</style>
</head>
<body>
<table><!--創造一個表格-->
<caption>表格標題，應放在"table"正下方</caption>
<thead><!--把所有標題包在thead中-->
<tr><!--創造一個標題列-->
<th>標a</th><!--創造一個標題，字動粗體置中，有幾個欄位就要有幾個標題，沒有的話標題就會空下來-->
<th>標b</th>
<th>標c</th>
<th>標d</th>
</tr>
<tr><!--創造第二個標題列，橫向合併表格(colspan)-->
<th colspan="3">合併三個表格</th><!--colspan"往右合併幾個表格"-->
<th>QQ</th> <!--因為已經合併三個了，所以另外兩個就刪掉了-->
</tr>
</thead>
<tbody>
<tr><!--創造一列(橫的)-->
<td>第一列1</td><!--創造一個個欄位(橫的)，所以以下會是：123 456，不會到下面-->
<td>第一列2</td>
<td>第一列3</td>
<td>第一列4</td>
</tr>
<tr><!--創造第二個一列(橫的)，他會在上面那一列的下面-->
<td>第二列1</td>
<td>第二列2</td>
<td>第二列3</td>
<td>第二列4</td>
</tr>
<tr>
<td rowspan="4">湊數1</td><!--往下合併所有第一行(rowspan)-->
<td>湊數2</td>
<td>湊數3</td>
<td>湊數4</td>
</tr>
<tr>
<!--因為被合併了，所以不需要第一個(湊數1)了-->
<td>湊數2</td>
<td>湊數3</td>
<td>湊數4</td>
</tr>
<tr>
<td>湊數2</td>
<td>湊數3</td>
<td>湊數4</td>
</tr>
<tr>
<td>湊數2</td>
<td>湊數3</td>
<td>湊數4</td>
</tr>
</tbody>
</table>
</body>
</html>
留言列表
【前端網頁開發技術】 (4)
