1、表格

在现实生活中，我们经常需要使用表格来表示一些格式化数据：

  • 课程表、人名单、成绩单…

同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格
在table中使用tr表示表格中的一行，有几个tr就有几行
在tr中使用td表示一个单元格，有几个 td就有几个单元格

  • rowspan 纵向的合并单元格

  • colspan 横向的合并单元格

    1. <table border="1" width="50%" align=" center">
    2. <!--在table中使用tr表示表格中的一行，有几个tr就有几行-->
    3. <tr>
    4.   <!--在tr中使用td表示一个单元格，有几个td就有几个单元格-->
    5.   <td>A1</td>
    6.   <td>B1</td>
    7.   <td>C1</td>
    8.   <td>D1</td>
    9. </tr>
    10. <tr>
    11.   <td>A2</td>
    12.   <td>B2</td>
    13.   <td>C2</td>
    14.   <!--rouspan 纵向的合并单元格-->
    15.   <td rowspan="2">D2</td>
    16. </tr>
    17. <tr>
    18.   <td>AB</td>
    19.   <td>B3</td>
    20.   <td>C3</td>
    21. </tr>
    22. <tr>
    23.   <td>A4</td>
    24.   <td>B4</td>
    25.   <!-- colspan横向的合并单元格 -->
    26.   <td colspan="2">C4</td>
    27. </tr>
    28. </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、表格的样式

HTML 代码

  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 代码

  1. table {
  2.   width: 50%;
  3.   margin: 0 auto;
  4.   border: 1px black solid;
  5.   /* border-spacing：指定边框之间的距离；边框之间虽然没有距离了，但是实际上是两条边框的和，看起来是变粗了 */
  6.   /* border-spacing: 0; */
  7.   /*border-collapse:collapse；设置边框的合并；真正的将两条边框合并成一条边框 */
  8.   border-collapse: collapse;
  9.   /* 默认情况下元素在td中是垂直居中的，可以通过vectical-align来修改 */
  10.   vertical-align: middle;
  11.   text-align: center;
  12. }
  13. /* 如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中
  14.    所以说，tr不是table的子元素 */
  15. tbody tr:nth-child(odd) {
  16.   background-color: rgb(211, 216, 188);
  17. }
  18. td {
  19.   border: 1px black solid;
  20. }

15-表格 - 图1
其中，

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

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

    4、表单

    表单

  • 在现实生活中表单用于提交数据

  • 在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器

form 的属性

  • action：表单要提交的服务器的地址

    文本框

    注意：数据要提交到服务器中，必须要为元素指定一个属性值name

    1. 文本框<input type="text" name="username" />

    密码框

    1. 密码框<input type="password" name="password" />

    提交按钮

    1. <input type="submit" value="注册" />

    单选框

    像这种选择框，必须要措定一个value属性，value属性最终会作为用户填写的值传递给服务器

    1. 单选框
    2. <input type="radio" name="hello" value="a" />
    3. <input type="radio" name="hello" value="b" checked />

    多选框

    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>

    15-表格 - 图2

    5、表单补充

    按钮

    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>

    15-表格 - 图3
    上面两种写法实际上效果是一致的，区别在于：

  • input是自闭合标签，不需要</input>就能结束；button不是自闭合标签，跟一般标签一样是成对出现的

  • button因为不是自闭合标签，所以使用起来更灵活，可以嵌套其他的标签