表格

表格簡介

在現實生活中，我們經常需要使用表格來表示一些格式化數據：
例如課程表、人名單、成績單....同樣在網頁中我們也需要使用表格，我們通過table標簽來創(chuàng)建一個表格。

表格的基本結構

<!-- 使用table標簽定義表格 -->
<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; 設置邊框的合并
• 將元素設置為單元格 td
  
  display: table-cell;
  
  vertical-align: middle;
• 設置隔行變色

    tbody > tr:nth-child(odd) {
        background-color: #bfa;
    }

• 默認情況下元素在td中是垂直居中的 可以通過 vertical-align 來修改

vertical-align: middle;
text-align: center;

表單

表單簡介

• 在現實生活中表單用于提交數據
• 在網頁中也可以使用表單，網頁中的表單用于將本地的數據提交給遠程的服務器

定義表單

使用form標簽來創(chuàng)建一個表單

常見表單

文本框

注意：數據要提交到服務器中，必須要為元素指定一個name屬性值

<input type="text" name="username">

密碼框

<input type="password" name="password">

單選按鈕

• 像這種選擇框，必須要指定一個value屬性，value屬性最終會作為用戶的填寫的值傳遞給服務器
• checked 可以將單選按鈕設置為默認選中
• 必須指定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" 關閉自動補全
• readonly 將表單項設置為只讀，數據會提交
• disabled 將表單項設置為禁用，數據不會提交
• autofocus 設置表單項自動獲取焦點