表格

表格简介

在现实生活中，我们经常需要使用表格来表示一些格式化数据：
例如课程表、人名单、成绩单....同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格。

表格的基本结构

<!-- 使用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，那么浏览器会自动创建一个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标签来创建一个表单

常见表单

文本框

注意：数据要提交到服务器中，必须要为元素指定一个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 设置表单项自动获取焦点