表格
表格簡介
在現(xiàn)實(shí)生活中哺眯，我們經(jīng)常需要使用表格來表示一些格式化數(shù)據(jù)：
例如課程表盈匾、人名單胚吁、成績單....同樣在網(wǎng)頁中我們也需要使用表格箫措，我們通過table標(biāo)簽來創(chuàng)建一個表格掂恕。
表格的基本結(jié)構(gòu)
<!-- 使用table標(biāo)簽定義表格 -->
<table>
<!-- 在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>
<td>D2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
</tr>
</table>
合并單元格
- rowspan 縱向的合并單元格
- colspan 橫向的合并單元格
<table>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td rowspan="2">D2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td colspan="2">C4</td>
</tr>
</table>
長表格
可以將一個表格分成三個部分：
- 頭部 thead
- 主體 tbody
- 底部 tfoot
注：如果表格中沒有使用tbody而是直接使用tr往衷，那么瀏覽器會自動創(chuàng)建一個tbody阵谚，并且將tr全都放到tbody中蚕礼，tr不是table的子元素
th 表示頭部的單元格
<table border="1" width="50%" align="center">
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合計</th>
</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>
<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>300</td>
</tr>
</tfoot>
</table>
表格的樣式
- border-spacing: 指定邊框之間的距離
- border-collapse: collapse; 設(shè)置邊框的合并
- 將元素設(shè)置為單元格 td
display: table-cell;
vertical-align: middle; - 設(shè)置隔行變色
tbody > tr:nth-child(odd) {
background-color: #bfa;
}
- 默認(rèn)情況下元素在td中是垂直居中的 可以通過 vertical-align 來修改
vertical-align: middle;
text-align: center;
表單
表單簡介
- 在現(xiàn)實(shí)生活中表單用于提交數(shù)據(jù)
- 在網(wǎng)頁中也可以使用表單，網(wǎng)頁中的表單用于將本地的數(shù)據(jù)提交給遠(yuǎn)程的服務(wù)器
定義表單
使用form標(biāo)簽來創(chuàng)建一個表單
常見表單
文本框
注意：數(shù)據(jù)要提交到服務(wù)器中梢什，必須要為元素指定一個name屬性值
<input type="text" name="username">
密碼框
<input type="password" name="password">
單選按鈕
- 像這種選擇框奠蹬，必須要指定一個value屬性，value屬性最終會作為用戶的填寫的值傳遞給服務(wù)器
- checked 可以將單選按鈕設(shè)置為默認(rèn)選中
- 必須指定name屬性嗡午，相同name屬性的單選按鈕才能被分為一組,如果不指定囤躁，則每個按鈕都可以被選中
<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b">
多選框
<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 selected value="ii">選項二</option>
<option value="iii">選項三</option>
</select>
提交按鈕
<input type="submit" value="注冊">
<button type="submit">提交</button>
重置按鈕
<input type="reset">
<button type="reset">重置</button>
普通的按鈕
<input type="button" value="按鈕">
<button type="button">按鈕</button>
表單的幾種屬性
- autocomplete="off" 關(guān)閉自動補(bǔ)全
- readonly 將表單項設(shè)置為只讀，數(shù)據(jù)會提交
- disabled 將表單項設(shè)置為禁用荔睹，數(shù)據(jù)不會提交
- autofocus 設(shè)置表單項自動獲取焦點(diǎn)
