1、表格（table）

在现实生活中，我们经常需要使用表格来表示一些格式化数据：课程表、人名单、成绩单…
同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格
在table中使用tr表示表格中的一行，有几个**tr**就有几行
在tr中使用td表示一个单元格，有几个td**就有**几个单元格（也可以理解为列）

  • rowspan 纵向的合并单元格
  • colspan 横向的合并单元格
    1. <!--建立一个表格：设置边框粗度为1， 文字占单元格的1/5, 表格居中-->
    2. <table border="1" width="50%" align=" center">
    3.   <!--在table中使用tr表示表格中的一行，有几个tr就有几行-->
    4.   <tr>
    5.       <!--在tr中使用td表示一个单元格，有几个td就有几个单元格-->
    6.       <td>A1</td>
    7.       <td>B1</td>
    8.       <td>C1</td>
    9.       <td>D1</td>
    10.   </tr>
    11.   <tr>
    12.       <td>A2</td>
    13.       <td>B2</td>
    14.       <td>C2</td>
    15.       <!--rouspan 纵向的合并单元格-->
    16.       <td rowspan="2">D2</td>
    17.   </tr>
    18.   <tr>
    19.       <td>AB</td>
    20.       <td>B3</td>
    21.       <td>C3</td>
    22.   </tr>
    23.   <tr>
    24.       <td>A4</td>
    25.       <td>B4</td>
    26.       <!-- colspan横向的合并单元格 -->
    27.       <td colspan="2">C4</td>
    28.   </tr>
    29. </table>

2、长表格

可以将一个表格分成三个部分：

  • 头部 **thead**
  • 主体 **tbody**
  • 底部 **tfoot**

**th** 表示头部的单元格

  1. <table>
  2.     <thead>
  3.         <tr>
  4.             <td>日期</td>
  5.             <td>收入</td>
  6.             <td>支出</td>
  7.             <td>合计</td>
  8.         </tr>
  9.     </thead>
  10.     <tbody>
  11.         <tr>
  12.             <td>2000.1.1</td>
  13.             <td>500</td>
  14.             <td>200</td>
  15.             <td>300</td>
  16.         </tr>
  17.         <tr>
  18.             <td>2000.1.1</td>
  19.             <td>500</td>
  20.             <td>200</td>
  21.             <td>300</td>
  22.         </tr>
  23.         <tr>
  24.             <td>2000.1.1</td>
  25.             <td>500</td>
  26.             <td>200</td>
  27.             <td>300</td>
  28.         </tr>
  29.     </tbody>
  30.     <tfoot>
  31.         <tr>
  32.             <td></td>
  33.             <td></td>
  34.             <td>合计</td>
  35.             <td>1200</td>
  36.         </tr>
  37.     </tfoot>
  38. </table>

3、表格的样式

  • **border-spacing**：指定边框之间的距离

  • **border-collapse**：设置边框的合并

    1. <table>
    2.   <tr>
    3.       <td>学号</td>
    4.       <td>姓名</td>
    5.       <td>性别</td>
    6.       <td>年龄</td>
    7.       <td>地址</td>
    8.   </tr>
    9.   <tr>
    10.       <td>1</td>
    11.       <td>孙悟空</td>
    12.       <td>男</td>
    13.       <td>18</td>
    14.       <td>花果山</td>
    15.   </tr>
    16.   <tr>
    17.       <td>2</td>
    18.       <td>猪八戒</td>
    19.       <td>男</td>
    20.       <td>28</td>
    21.       <td>高老庄</td>
    22.   </tr>
    23.   <tr>
    24.       <td>3</td>
    25.       <td>沙和尚</td>
    26.       <td>男</td>
    27.       <td>38</td>
    28.       <td>流沙河</td>
    29.   </tr>
    30.   <tr>
    31.       <td>4</td>
    32.       <td>唐僧</td>
    33.       <td>男</td>
    34.       <td>16</td>
    35.       <td>女儿国</td>
    36.   </tr>
    37.   <tr>
    38.       <td>1</td>
    39.       <td>孙悟空</td>
    40.       <td>男</td>
    41.       <td>18</td>
    42.       <td>花果山</td>
    43.   </tr>
    44.   <tr>
    45.       <td>2</td>
    46.       <td>猪八戒</td>
    47.       <td>男</td>
    48.       <td>28</td>
    49.       <td>高老庄</td>
    50.   </tr>
    51.   <tr>
    52.       <td>3</td>
    53.       <td>沙和尚</td>
    54.       <td>男</td>
    55.       <td>38</td>
    56.       <td>流沙河</td>
    57.   </tr>
    58.   <tr>
    59.       <td>4</td>
    60.       <td>唐僧</td>
    61.       <td>男</td>
    62.       <td>16</td>
    63.       <td>女儿国</td>
    64.   </tr>
    65.   <tr>
    66.       <td>4</td>
    67.       <td>唐僧</td>
    68.       <td>男</td>
    69.       <td>16</td>
    70.       <td>女儿国</td>
    71.   </tr>
    72.   <tr>
    73.       <td>1</td>
    74.       <td>孙悟空</td>
    75.       <td>男</td>
    76.       <td>18</td>
    77.       <td>花果山</td>
    78.   </tr>
    79.   <tr>
    80.       <td>2</td>
    81.       <td>猪八戒</td>
    82.       <td>男</td>
    83.       <td>28</td>
    84.       <td>高老庄</td>
    85.   </tr>
    86.   <tr>
    87.       <td>3</td>
    88.       <td>沙和尚</td>
    89.       <td>男</td>
    90.       <td>38</td>
    91.       <td>流沙河</td>
    92.   </tr>
    93.   <tr>
    94.       <td>4</td>
    95.       <td>唐僧</td>
    96.       <td>男</td>
    97.       <td>16</td>
    98.       <td>女儿国</td>
    99.   </tr>
    100. </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; }

  2. ![](https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210613195307.png#clientId=u70f45a69-2f23-4&crop=0&crop=0&crop=1&crop=1&height=378&id=capxG&originHeight=1030&originWidth=960&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u8fb9811d-e9df-40f0-88ec-92241988679&title=&width=352)
  4. - **td 单元格特有的属性，**`**vertical-align**`**垂直居中**
  5. - **特殊的可以将其他元素用 **`**display:table-cell **`**转换成单元格 td**
  8. <a name="75bffb4b"></a>
  9. ## 4、表单
  10. 表单
  12. - 在现实生活中表单用于提交数据
  13. - 在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器
  15. **form的属性**
  17. - `action`：表单要提交的服务器的地址
  18. <a name="5ac57ce6"></a>
  19. ### 文本框(text)
  20. 注意：数据要提交到服务器中，必须要为元素指定一个属性值`name`<br />`<input type="text" name="username">`
  21. <a name="5dd92ede"></a>
  22. ### 密码框(password)
  23. `<input type="password" name="password">`
  24. <a name="1b9e51f4"></a>
  25. ### 提交按钮(submit)
  26. `<input type="submit" value="注册">`
  27. <a name="9913107b"></a>
  28. ### 单选框(radio)
  29. 像这种选择框，必须要措定一个`value`属性，`value`属性最终会作为用户填写的值传递给服务器
  30. ```html
  31. 单选框
  32. <input type="radio" name="hello" value="a">
  33. <input type="radio" name="hello" value="b" checked>

多选框(checkbox)

  1. 多选框
  2. <input type="checkbox" name="test" value="1">
  3. <input type="checkbox" name="test" value="2">
  4. <input type="checkbox" name="test" value="3" checked>

下拉列表

  1. 下拉列表
  2. <select name="haha">
  3.     <option value="i">选项一</option>
  4.     <option value="ii" selected>选项二</option> 
  5.     <option value="iii">选项三</option>
  6. </select>

13.表格和表单 - 图1

按钮补充

  1. <!-- 提交按钮 -->
  2. <input type="submit">
  3. <!-- 重置按钮 -->
  4. <input type="reset">
  5. <!-- 普通按钮 -->
  6. <input type="button" value="按钮">
  7. <br><br>
  8. <button type="submit">提交</button>
  9. <button type="reset">重置</button>
  10. <button type="button">按钮</button>

13.表格和表单 - 图2
上面两种写法实际上效果是一致的，区别在于：

  • input是自闭合标签，不需要</input>就能结束；button不是自闭合标签，跟一般标签一样是成对出现的
  • button因为不是自闭合标签，所以使用起来更灵活，可以嵌套其他的标签