【Web前端HTML5&CSS3】15-表格
阿新 • • 發佈：2021-06-13
目錄
表格
1、表格
在現實生活中，我們經常需要使用表格來表示一些格式化資料：
- 課程表、人名單、成績單...
同樣在網頁中我們也需要使用表格，我們通過table標籤來建立一個表格
在table中使用tr表示表格中的一行，有幾個tr就有幾行
在tr中使用td表示一個單元格，有幾個td就有幾個單元格
rowspan縱向的合併單元格colspan橫向的合併單元格
<table border="1" width="50%" align=" center"> <!--在table中使用tr表示表格中的一行，有幾個tr就有幾行--> <tr> <!--在tr中使用td表示一個單元格，有幾個td就有幾個單元格--> <td>A1</td> <td>B1</td> <td>C1</td> <td>D1</td> </tr> <tr> <td>A2</td> <td>B2</td> <td>C2</td> <!--rouspan 縱向的合併單元格--> <td rowspan="2">D2</td> </tr> <tr> <td>AB</td> <td>B3</td> <td>C3</td> </tr> <tr> <td>A4</td> <td>B4</td> <!-- colspan橫向的合併單元格 --> <td colspan="2">C4</td> </tr> </table>
2、長表格
可以將一個表格分成三個部分：
- 頭部
thead - 主體
tbody - 底部
tfoot
th 表示頭部的單元格
<table> <thead> <tr> <td>日期</td> <td>收入</td> <td>支出</td> <td>合計</td> </tr> </thead> <tbody> <tr> <td>2000.1.1</td> <td>500</td> <td>200</td> <td>300</td> </tr> <tr> <td>2000.1.1</td> <td>500</td> <td>200</td> <td>300</td> </tr> <tr> <td>2000.1.1</td> <td>500</td> <td>200</td> <td>300</td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> <td>合計</td> <td>1200</td> </tr> </tfoot> </table>
3、表格的樣式
HTML程式碼
<table> <tr> <td>學號</td> <td>姓名</td> <td>性別</td> <td>年齡</td> <td>地址</td> </tr> <tr> <td>1</td> <td>孫悟空</td> <td>男</td> <td>18</td> <td>花果山</td> </tr> <tr> <td>2</td> <td>豬八戒</td> <td>男</td> <td>28</td> <td>高老莊</td> </tr> <tr> <td>3</td> <td>沙和尚</td> <td>男</td> <td>38</td> <td>流沙河</td> </tr> <tr> <td>4</td> <td>唐僧</td> <td>男</td> <td>16</td> <td>女兒國</td> </tr> <tr> <td>1</td> <td>孫悟空</td> <td>男</td> <td>18</td> <td>花果山</td> </tr> <tr> <td>2</td> <td>豬八戒</td> <td>男</td> <td>28</td> <td>高老莊</td> </tr> <tr> <td>3</td> <td>沙和尚</td> <td>男</td> <td>38</td> <td>流沙河</td> </tr> <tr> <td>4</td> <td>唐僧</td> <td>男</td> <td>16</td> <td>女兒國</td> </tr> <tr> <td>4</td> <td>唐僧</td> <td>男</td> <td>16</td> <td>女兒國</td> </tr> <tr> <td>1</td> <td>孫悟空</td> <td>男</td> <td>18</td> <td>花果山</td> </tr> <tr> <td>2</td> <td>豬八戒</td> <td>男</td> <td>28</td> <td>高老莊</td> </tr> <tr> <td>3</td> <td>沙和尚</td> <td>男</td> <td>38</td> <td>流沙河</td> </tr> <tr> <td>4</td> <td>唐僧</td> <td>男</td> <td>16</td> <td>女兒國</td> </tr> </table>
CSS程式碼
table {
width: 50%;
margin: 0 auto;
border: 1px black solid;
/* border-spacing：指定邊框之間的距離；邊框之間雖然沒有距離了，但是實際上是兩條邊框的和，看起來是變粗了 */
/* border-spacing: 0; */
/*border-collapse:collapse；設定邊框的合併；真正的將兩條邊框合併成一條邊框 */
border-collapse: collapse;
/* 預設情況下元素在td中是垂直居中的，可以通過vectical-align來修改 */
vertical-align: middle;
text-align: center;
}
/* 如果表格中沒有使用tbody而是直接使用tr，那麼瀏覽器會自動建立一個tbody，並且將tr全都放到tbody中
所以說，tr不是table的子元素 */
tbody tr:nth-child(odd) {
background-color: rgb(211, 216, 188);
}
td {
border: 1px black solid;
}
其中，
border-spacing：指定邊框之間的距離border-collapse：設定邊框的合併
4、表單
表單
- 在現實生活中表單用於提交資料
- 在網頁中也可以使用表單，網頁中的表單用於將本地的資料提交給遠端的伺服器
form的屬性
action：表單要提交的伺服器的地址
文字框
注意：資料要提交到伺服器中，必須要為元素指定一個name屬性值
文字框<input type="text" name="username">
密碼框
密碼框<input type="password" name="password">
提交按鈕
<input type="submit" value="註冊">
單選框
像這種選擇框，必須要措定一個value屬性，value屬性最終會作為使用者填寫的值傳遞給伺服器
單選框
<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>
多選框
多選框
<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked>
下拉列表
下拉列表
<select name="haha">
<option value="i">選項一</option>
<option value="ii" selected>選項二</option>
<option value="iii">選項三</option>
</select>
5、表單補充
按鈕
<!-- 提交按鈕 -->
<input type="submit">
<!-- 重置按鈕 -->
<input type="reset">
<!-- 普通按鈕 -->
<input type="button" value="按鈕">
<br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按鈕</button>
上面兩種寫法實際上效果是一致的，區別在於：
input是自閉合標籤，不需要</input>就能結束；button不是自閉合標籤，跟一般標籤一樣是成對出現的button因為不是自閉合標籤，所以使用起來更靈活，可以巢狀其他的標籤