第二章：表格與表單
文章目錄
第一節：表格的使用
表格table
在網頁上，除了文字、圖片，常常還會遇到表格。特別在一些官方等網頁，資料性、分析性比轉強時也會以表格的形式展現資料和分析。
例：
- 表格的格式：
<table></table> - 表格的作用：用來將資料以一格形式顯示出來
- 配套標籤
<thead>—— 表頭<tbody>—— 表身<tr>—— 定義表格行<td>—— 定義表格單元<th>—— 定義表頭單元格colspan—— 設定單元格應該橫跨的列數,用於橫向合併單元格rowspan—— 設定單元格應該橫跨的行數，用於縱向合併單元格
表格一般不會以單個標籤出現，都是配套上面的標籤出現才能完成表單。表單需要設定樣式，否則單元格將沒有任何邊框，這些一般都交由樣式處理，為了展示表格的製作，以下會給出一個屬性border，簡單顯示邊框。
一個最簡單的表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格與表單</title>
</head>
<body>
<!-- 表格 -->
<table border="1">
<thead>
<tr> <!-- 表格行 -->
<th>編號</th> <!-- 表頭單元格 -->
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td> <!-- 單元格 -->
<td>東方不敗</td>
</tr>
</tbody>
</table>
</body>
</html>
瀏覽器結果：
使用style標籤編寫樣式
除了在標籤內寫樣式屬性，還可以把一些樣式屬性交給style標籤，進行統一的樣式的編寫。寫進style內的內容，其實就是CSS樣式編寫，和行內樣式的區別，只是權重的問題，一樣可以達到裝飾效果。在使用style標籤編寫樣式前，需要對CSS有一點簡單的瞭解
- 簡單瞭解CSS
CSS的註釋格式：
/*註釋內容*/
CSS選擇器：
作用：選中一個標籤。
【類選擇器】一般，在HTML標籤會有個class的類名屬性，CSS選擇器就可以根據類名，從而對類名所處的標籤，進行樣式處理.class又叫類選擇器,類選擇器的格式是：.className{屬性:值; }
【後代選擇器】選擇器所在標籤包裹的區域內的其他標籤，都可以說是這個選擇器的後代選擇器。後代選擇器的格式是：.選擇器名 <標籤>
常用CSS屬性：
border—— 邊框
width / height—— 寬、高
例：以上面簡單表格為例,在style標籤內設定表格樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格與表單</title>
<style>
.student{
border:5px solid black; /*外邊框線的寬度、實線、顏色為黑色*/
width: 500px; /*整個外邊框寬度為80px,px是畫素單位*/
}
.student td{
border:1px solid red; /*後代選擇器，設定單元格的樣式*/
}
</style>
</head>
<body>
<!-- 表格 -->
<table class="student">
<thead>
<tr>
<td>編號</td>
<td>姓名</td>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>東方不敗</td>
</tr>
</tbody>
</table>
</body>
</html>
瀏覽器結果：
常用顏色程式碼
- 常用英文顏色程式碼
HTML語言中已經預先定義好的140種顏色（最常使用的有16種），這些顏色在使用時可以直接書寫顏色名稱.
更多英文顏色程式碼，可在網上自行查行。
| 顏色中文名 | 顏色英文名 | 顏色中文名 | 顏色英文名 |
|---|---|---|---|
| 白色 | white | 灰色 | gray |
| 黃色 | yellow | 綠色 | green |
| 紅色 | red | 褐色 | maroon |
| 紫紅色 | fuchsia | 深藍色 | navy |
| 水綠色 | aqua | 橄欖色 | olive |
| 淺綠色 | lime | 紫色 | purple |
| 藍色 | blue | 深青色 | teal |
| 黑色 | black | 銀色 | sliver |
例：
- 常用十六進位制顏色程式碼
顏色是多種多樣的，HTML的140多個英文顏色並不足以描繪所有的顏色。除了英語單詞，還能用十六進位制表示顏色。
[RGB]
在機算機領域，顏色以光學顏色RGB（紅、綠、藍）為主。網頁顏色是以16進位制程式碼表示，一般格式為#DEFABC （字母範圍從A-F,數字從0-9 ，每兩個數字分別代表紅、綠、藍）；如黑色，在網頁程式碼中便是：#000000(也可簡寫為#000)。當顏色程式碼為#AABB11時，可以簡寫為#AB1表示，如#135與#113355表示同樣的顏色。
更多的顏色16進製表示可以自行網上查詢RGB顏色查詢對照表，
| 顏色中文名 | 顏色16位表示 | 顏色中文名 | 顏色16位表示 |
|---|---|---|---|
| 白色 | #FFFFFF | 灰色 | #808080 |
| 黃色 | #FFFF00 | 綠色 | #008000 |
| 紅色 | #FF0000 | 褐色 | #800000 |
| 紫紅色 | #FF00FF | 深藍色 | #000080 |
| 水綠色 | #00FFFF | 橄欖色 | #808000 |
| 淺綠色 | #00FF00 | 紫色 | #800080 |
| 藍色 | #0000FF | 深青色 | #008080 |
| 黑色 | #000000 | 銀色 | #C0C0C0 |
- 螢幕取色應用軟體
顏色成千上萬，有時因為色差的問題，對照顏色傑詢表也很難以分辨，這時我們應該運用一些取色軟體，方便取色。
例如：螢幕取色V1.0
第二節：製作報銷表
案例：製作報銷表
colspan—— 橫向合併單元格
rowspan—— 縱向合併單元格
 —— 空格符，使用時注意前後需有空格
padding—— 內邊距，如單元格到文字的距離
text-align—— 水平對齊
vertical-align—— 垂直對齊
width/height—— 設定寬/高。width/height 對行內元素無效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格與表單</title>
<style>
.baoxiao{ /*table的樣式*/
border:1px solid #666;
border-collapse: collapse; /*塌陷，去掉單元格之間的間隙*/
width: 800px; /*table的寬度*/
}
.baoxiao th,.baoxiao td{ /*表頭和表身的樣式*/
border:1px solid #666; /*單元格樣式，兩個後代選擇器用逗號隔開*/
text-align: center; /*文字居中*/
padding: 5px 10px; /*內邊距上下5畫素，左右10畫素*/
}
</style>
</head>
<body>
<h1>出差報銷表格</h1>
<table class="baoxiao">
<!-- 表頭 -->
<thead>
<tr>
<th colspan="2">姓名</th> <!-- 姓名佔用了2列 -->
<th></th>
<th>職務</th>
<th colspan="2"></th> <!-- 職務填寫處佔用了2列 -->
<th colspan="2">出差事由</th> <!-- 出差事由佔用2列 -->
<th colspan="4"></th> <!-- 事由所填寫處佔用4列 -->
</tr>
</thead>
<!-- 表身 -->
<tbody>
<tr> <!-- 表身第一行 -->
<td>起日</td>
<td>止日</td>
<td>起訖地點</td>
<td>專案</td>
<td>張數</td>
<td colspan="3">金額</td>
<td>專案</td>
<td>天數</td>
<td colspan="2">金額</td>
</tr>
<tr> <!-- 表身第二行 -->
<td></td>
<td></td>
<td></td>
<td>火車票</td>
<td></td>
<td colspan="2"></td>
<td></td>
<td>途中補助</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr> <!-- 表身第三行 -->
<td></td>
<td></td>
<td></td>
<td>汽車票</td>
<td></td>
<td colspan="2"></td>
<td></td>
<td>住行補助</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr> <!-- 表身第四行 -->
<td></td>
<td></td>
<td></td>
<td>市內交通票</td>
<td></td>
<td colspan="2"></td>
<td></td>
<td>夜間乘車</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr> <!-- 表身第五行 -->
<td></td>
<td></td>
<td></td>
<td>住宿費</td>
<td></td>
<td colspan="2" style="width: 60px;"></td>
<td style="width: 30px;"></td>
<td>其他</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr> <!-- 表身第六行 -->
<td></td>
<td></td>
<td></td>
<td>郵電費</td>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr> <!-- 表身第七行 -->
<td></td>
<td></td>
<td></td>
<td colspan="2">小計</td>
<td colspan="2"></td>
<td></td>
<td colspan="2">小計</td>
<td></td>
<td></td>
</tr>
<tr> <!-- 表身最後行 -->
<td colspan="3">合 計</td>
<td colspan="9">(大寫) 仟 佰 拾 元 角 分￥:</td>
</tr>
</tbody>
</table>
</body>
</html>
瀏覽器結果：
第三節：表單的使用
表格與表單作用示意圖
- 表格與表單的關係
【表格】用於展示資料
【表單】用於錄入資料，收集使用者的資訊，將來提交到伺服器
從流程上來說，資料是使用者通過前端表單的資訊填寫(或者電腦爬蟲爬取資料)錄入的。再通過後端的處理邏輯儲存到資料庫中。當需要展示資料時，後端再經過自身的邏輯從資料庫中調取相關資料，傳到前端，由表格展示出來。
表單 form
在網頁上，除了文字、圖片，常常還會遇到需要填寫資訊的表單。特別在一些官方註冊頁面，或其他需要使用者填寫或選擇的頁面都用了表單。
例：QQ註冊頁面
表單屬性：
action ——表單提交堤交的位置
輸入框 input
輸入框是表單一個使用最多，也最重要的其中一個表單元素
輸入框的型別 type
text—— 文字框型別
password—— 密碼框型別
submit—— 提交型別,起提交資訊的作用
radio—