Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表格和表单的学习与应用
Blogger Information
Blog 16
fans 2
comment 0
visits 20088
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表格和表单的学习与应用
肖傲的博客
Original
659 people have browsed it

1.表格

  • 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
    示例如下：

    1. <! DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>购物车</title>
    7.   <style>
    8.     table {
    9.       /* 去掉单元格之间的间隙 */
    10.       border-collapse: collapse;
    11.       width: 70%;
    12.       margin: auto;
    13.       color: gray;
    14.       /* 使用比较细的字体 */
    15.       font-weight: lighter;
    16.       /* 文字水平居中 */
    17.       text-align: center;
    18.     }
    19.     table thead th,
    20.     table td {
    21.       /* 边框 1px 实线 颜色黑色 */
    22.       border-bottom: 1px solid #000;
    23.       padding: 10px;
    24.     }
    25.     table caption {
    26.       /* 当前字体1.5倍字体大小 */
    27.       font-size: 1.5rem;
    28.       color: red;
    29.       /* 向下的外边距10px */
    30.       margin-bottom: 10px;
    31.     }
    32.     table th {
    33.       /* 字体粗细变成正常 */
    34.       font-weight: 400;
    35.       color: green;
    36.     }
    37.     /* 第一行添加背景色 */
    38.     table thead tr:first-of-type {
    39.       background-color: yellow;
    40.     }
    41.     /* 偶数行添加背景色 */
    42.     table tbody tr:nth-of-type(even) {
    43.       background-color: pink;
    44.     }
    45.     /* 鼠标悬停后更改背景色 */
    46.     table tbody tr:hover {
    47.       background-color: skyblue;
    48.     }
    49.     /* 底部样式 */
    50.     table tfoot td {
    51.       /* 去掉底部边框 */
    52.       border-bottom: none;
    53.       color: tomato;
    54.       /* 字体加粗 */
    55.       font-weight: 600;
    56.     }
    57.     /* 结算按键样式 */
    58.     /* 取最后一个 */
    59.     body div:last-of-type {
    60.       width: 70%;
    61.       /* 上下10px 左右居中的外边距 */
    62.       margin: 10px auto;
    63.     }
    64.     /* 取一个button */
    65.     body div:first-of-type button {
    66.       /* 向右浮动 */
    67.       float: right;
    68.       width: 120px;
    69.       height: 32px;    
    70.       background-color: #B0B0B0;
    71.       color: white;
    72.       border: none;
    73.       /* 设置鼠标样式 */
    74.       cursor: pointer; 
    75.     }
    76.     body div:first-of-type button:hover {
    77.       background-color: #FF4400;
    78.     }
    79.   </style>
    80. </head>
    81. <body>
    82.   <!-- 表格 -->
    83.   <table>
    84.     <!-- 标题 -->
    85.     <caption>
    86.       618购物车
    87.     </caption>
    88.     <!-- 头部 -->
    89.     <thead>
    90.       <tr>
    91.         <th>商品编号</th>
    92.         <th>商品名称</th>
    93.         <th>原价</th>
    94.         <th>单位</th>
    95.         <th>数量</th>
    96.         <th>实际付款金额</th>
    97.       </tr>
    98.     </thead>
    99.     <tr>
    100.       <td>SN-1001</td>
    101.       <td>外星人笔记本</td>
    102.       <td>28888</td>
    103.       <td>台</td>
    104.       <td>1</td>
    105.       <td>18888</td>
    106.     </tr>
    107.     <tr>
    108.       <td>SN-1002</td>
    109.       <td>海尔冰箱</td>
    110.       <td>4888</td>
    111.       <td>台</td>
    112.       <td>1</td>
    113.       <td>3888</td>
    114.     </tr>
    115.     <tr>
    116.       <td>SN-1003</td>
    117.       <td>荣耀电视65寸</td>
    118.       <td>3888</td>
    119.       <td>台</td>
    120.       <td>1</td>
    121.       <td>2888</td>
    122.     </tr>
    123.     <tr>
    124.       <td>SN-1004</td>
    125.       <td>华为手机</td>
    126.       <td>7888</td>
    127.       <td>台</td>
    128.       <td>1</td>
    129.       <td>5888</td>
    130.     </tr>
    131.     <tbody>
    132.       <!-- 底部 -->
    133.       <tfoot>
    134.         <tr>
    135.           <!-- 表格合并 -->
    136.           <td colspan="4">合计付款金额：</td>
    137.           <td>4</td>
    138.           <td>31552</td>
    139.         </tr>
    140.       </tfoot>
    141.     </tbody>
    142.   </table>
    143.   <div>
    144.     <button>
    145.       结算
    146.     </button>
    147.   </div>
    148. </body>
    149. </html>

  • 表格其他生成方法
    主要使用 div 、display 、class 组成
    示例如下：

    1. <! DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>表格</title>
    7.   <style>
    8.     /* 表格 */
    9.     .table {
    10.       /* 设置元素显示类型 */
    11.       display: table;
    12.       /* 边框 */
    13.       border: 1px solid #000;
    14.       width: 600px;
    15.       /* 水平居中 */
    16.       text-align: center;
    17.       /* 垂直居中 */
    18.       margin: auto;
    19.     }
    20.     /* 设置标题 */
    21.     .table-caption {
    22.       display: table-caption;
    23.       /* 底部外边距10px */
    24.       margin-bottom: 10px;
    25.       font-size: 1.3rem;
    26.     }
    27.     /* 设置表头 */
    28.     .table-thead {
    29.       display: table-header-group;
    30.       /* background-color: #ccc; */
    31.     }
    32.     .h4 {
    33.       font-weight: 700;
    34.     }
    35.     .bgc1 {
    36.       background-color: #0075BA;
    37.       color: whitesmoke;
    38.     }
    39.     .bgc2 {
    40.       background-color: #D4ECE6;
    41.     }
    42.     .bgc3 {
    43.       background-color: #FFEDCD;
    44.     }
    45.     .bgc4 {
    46.       background-color: #e6e6e6;
    47.     }
    48.     /* 设置行 */
    49.     .table-row {
    50.       display: table-row;
    51.     }
    52.     /* 设置列 */
    53.     .table-cell {
    54.       display: table-cell;
    55.       border: 1px solid #000;
    56.       padding: 5px;
    57.     }
    58.     /* 设置主体 */
    59.     .table-tbody {
    60.       display: table-row-group;
    61.     }
    62.     /* 设置底部 */
    63.     .table-tfoot {
    64.       display: table-footer-group;
    65.       background-color: #FEDDC6;
    66.     }
    67.     /* 设置列分组样式 */
    68.     .table-colgroup {
    69.       display: table-column-group;
    70.     }
    71.     .table-colgroup .table-col:first-of-type {
    72.       display: table-column;
    73.       /* background-color: skyblue; */
    74.     }
    75.     .table-colgroup .table-col {
    76.       display: table-column;
    77.       /* background-color: pink; */
    78.     }
    79.   </style>
    80. </head>
    81. <body>
    82.   <!-- 表格 -->
    83.   <div class="table">
    84.     <!-- 标题caption -->
    85.     <div class="table-caption">学习表</div>
    86.     <!-- 列分组 -->
    87.     <div class="table-colgroup">
    88.       <div class="table-col"></div>
    89.       <div class="table-col"></div>
    90.       <div class="table-col"></div>
    91.     </div>
    93.     <!-- 表头thead -->
    94.     <div class="table-thead">
    95.       <!-- 行 -->
    96.       <div class="table-row bgc1">
    97.         <div class="table-cell">时间</div>
    98.         <div class="table-cell">周一</div>
    99.         <div class="table-cell">周二</div>
    100.         <div class="table-cell">周三</div>
    101.         <div class="table-cell">周四</div>
    102.         <div class="table-cell">周五</div>
    103.         <div class="table-cell">周六</div>
    104.         <div class="table-cell">周日</div>
    105.       </div>
    106.       <div class="table-row bgc1">
    107.         <div class="table-cell"></div>
    108.         <div class="table-cell">6月15日</div>
    109.         <div class="table-cell">6月16日</div>
    110.         <div class="table-cell">6月17日</div>
    111.         <div class="table-cell">6月18日</div>
    112.         <div class="table-cell">6月19日</div>
    113.         <div class="table-cell">6月20日</div>
    114.         <div class="table-cell">6月21日</div>
    115.       </div>
    116.     </div>
    118.     <!-- 主体 -->
    119.     <div class="table-tbody">
    120.       <div class="table-row bgc2">
    121.         <div class="table-cell h4">早上</div>
    122.         <div class="table-cell">英语</div>
    123.         <div class="table-cell">英语</div>
    124.         <div class="table-cell">英语</div>
    125.         <div class="table-cell">英语</div>
    126.         <div class="table-cell">英语</div>
    127.         <div class="table-cell">自由活动</div>
    128.         <div class="table-cell">自由活动</div>
    129.       </div>
    130.       <div class="table-row bgc2">
    131.         <div class="table-cell h4">上午</div>
    132.         <div class="table-cell">写作业</div>
    133.         <div class="table-cell">写作业</div>
    134.         <div class="table-cell">写作业</div>
    135.         <div class="table-cell">写作业</div>
    136.         <div class="table-cell">写作业</div>
    137.         <div class="table-cell">自由活动</div>
    138.         <div class="table-cell">自由活动</div>
    139.       </div>
    140.       <div class="table-row bgc3">
    141.         <div class="table-cell h4">中午</div>
    142.         <div class="table-cell">休息</div>
    143.         <div class="table-cell">休息</div>
    144.         <div class="table-cell">休息</div>
    145.         <div class="table-cell">休息</div>
    146.         <div class="table-cell">休息</div>
    147.         <div class="table-cell">自由活动</div>
    148.         <div class="table-cell">自由活动</div>
    149.       </div>
    150.       <div class="table-row bgc4">
    151.         <div class="table-cell h4">下午</div>
    152.         <div class="table-cell">预习课程</div>
    153.         <div class="table-cell">预习课程</div>
    154.         <div class="table-cell">预习课程</div>
    155.         <div class="table-cell">预习课程</div>
    156.         <div class="table-cell">预习课程</div>
    157.         <div class="table-cell">看回放</div>
    158.         <div class="table-cell">看回放</div>
    159.       </div>
    160.     </div>
    162.     <!-- 底部tfoot -->
    163.     <div class="table-tfoot">
    164.       <div class="table-row ">
    165.         <div class="table-cell h4">晚上</div>
    166.         <div class="table-cell">上课</div>
    167.         <div class="table-cell">上课</div>
    168.         <div class="table-cell">上课</div>
    169.         <div class="table-cell">上课</div>
    170.         <div class="table-cell">上课</div>
    171.         <div class="table-cell">看回放</div>
    172.         <div class="table-cell">看回放</div>
    173.     </div>
    174.   </div>
    175. </body>
    176. </html>

    2.表单

  • 表单用于搜集不同类型的用户输入。
  • <form>标签定义了表单，表单是HTML页面与浏览器端实现交互的重要手段。

  • 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
    示例如下：

    1. <! DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.  <title>基本表单信息</title>
    7.  <style>
    8.      body {
    9.        color: #555;
    10.      }
    11.      h3 {
    12.        font-size: 18px;
    13.        /* 居中 */
    14.        text-align: center;
    15.        color: #8E8E8E;
    16.        /* 正常粗细 */
    17.        font-weight: 400;
    18.      }
    19.      form {
    20.        width: 450px;
    21.        margin: 30px auto;
    22.        /* 加边框 */
    23.        border-top: 1px solid #aaa;
    24.      }
    25.      form fieldset {
    26.          /* 加边框 */
    27.        border: 1px solid #fff;
    28.        background-color: #FEF2FC;
    29.        /* 增加阴影 */
    30.        box-shadow: 2px 2px 4px #bbb;
    31.        border-radius: 10px;
    32.        margin: 20px;
    33.      }
    34.      form fieldset legend {
    35.        background-color: #eb648a;
    36.        /* 边框圆角 */
    37.        border-radius: 10px;
    38.        color: #15B2DF;
    39.        padding: 5px 15px;
    40.      }
    41.      form div {
    42.        margin: 5px;
    43.      } 
    44.      form p {
    45.        text-align: center;
    46.      }
    47.      form .btn {
    48.        font-size: 28px;
    49.        width: 278px;
    50.        height: 49px;
    51.        border: none;
    52.        background-color: #FF536A;
    53.        color: #ddd;
    54.      }
    55.      form .btn:hover {
    56.        font-size: 30px;
    57.        background-color: #F22843;
    58.        color: white;
    59.        /* 改光标样式 */
    60.        cursor: pointer;
    61.      }  
    62.      input:focus {
    63.        background-color: #f595a2;
    64.      }
    65.      form ul li {
    66.          /* 居中 */
    67.          text-align: center;
    68.          /* 去除li样式 */
    69.          list-style: none;
    70.      }
    71.      form ul .member a {
    72.          color: #929191;
    73.      }
    74.      form ul li a:hover {
    75.          /* 去除下划线 */
    76.          text-decoration: none;
    77.      }
    78.    </style>
    79. </head>
    80. <body>
    81.  <h3>1分钟注册，享一辈子幸福！</h3>
    82.  <!-- form标签 -->
    83.  <form action="" method="POST">
    84.      <!-- 控件组 -->
    85.      <fieldset>
    86.          <legend>账户信息（必填）</legend>
    87.          <div>
    88.              <label for="my-name">账号:</label>
    89.              <input 
    90.                type="text"
    91.                id="my-username"
    92.                name="username"
    93.                placeholder="不少于6位且字母+数字"
    94.                autofocus
    95.                required 
    96.              >
    97.          </div>
    98.          <div>
    99.              <label for="">邮箱:</label> 
    100.              <input 
    101.              type="email"
    102.              name="email"
    103.              id="email"
    104.              placeholder="xxx@xxx.com"
    105.              required
    106.              >
    107.          </div>
    108.          <div>
    109.              <label for="pwd-1">密码:</label>
    110.              <input type="password" name="password2" id="pwd-1">
    111.          </div>
    112.      </fieldset>        
    113.      <fieldset>
    114.          <legend>个人信息（选填）</legend>
    115.          <div>
    116.              <label>
    117.                  <input type="date" name="birthday">
    118.              </label>
    119.          </div>
    121.          <div>
    122.              <!-- 单选按钮 -->
    123.              <label for="secret">性别</label>
    124.              <!-- 单选按钮中的name属性名必须相同 -->
    125.              <input type="radio" name="gender" value="male" id="male" checked><label for="male">男</label>                
    126.              <input type="radio" name="gender" value="female" id="female"><label for="female">女</label>
    127.          </div>
    128.          <div>
    129.              <!-- 单选按钮 -->
    130.              <label for="marr">婚姻</label>
    131.              <input type="radio" name="m-wh" value="1" id="m-wh" checked><label for="m-wh">未婚</label>    
    132.              <input type="radio" name="m-ly" value="2" id="m-ly"><label for="m-ly">离异</label>
    133.              <input
    134.              type="radio"
    135.              name="m-so"
    136.              value="3"
    137.              id="m-so"
    138.              /><label for="m-so">丧偶</label>
    139.          </div>
    140.          <div>
    141.              <!-- 复选框 -->
    142.              <label for="reading">爱好</label>
    143.              <!-- 因为复选框返回是一个或多个值，最方便后端用数组来处理， 所以将name名称设置为数组形式便于后端脚本处理 -->
    144.              <input type="checkbox" name="hobby[]" id="reading" value="reading" /><label
    145.              for="reading">读书</label>
    146.              <input
    147.               type="checkbox"
    148.               name="hobby[]"
    149.               value="shoot"
    150.               id="shoot"
    151.              /><label for="shoot">摄影</label>
    152.              <input
    153.               type="checkbox"
    154.               name="hobby[]"
    155.               value="sport"
    156.               id="sport"
    157.               checked
    158.              /><label for="sport">运动</label>
    159.          </div>
    160.          <div>
    161.              <!-- 选项列表 -->
    162.              <label for="education">学历:</label>
    163.              <input type="search" list="edu" name="education" id="education" />
    164.              <datalist id="edu">
    165.              <option value="undergraduate" label="大学本科"></option>
    166.              <option value="Graduate" label="研究生"></option>
    167.              <option value="doctor" label="博士"> </option>
    168.              </datalist>
    169.          </div>
    170.      </fieldset>
    171.      <fieldset>
    172.          <legend>其它信息(选填)</legend>
    173.          <!--文件上传-->
    174.          <div>
    175.            <label for="uploads">上传头像:</label>
    176.            <input
    177.              type="file"
    178.              name="user_pic"
    179.              id="uploads"
    180.              accept="image/png, image/jpeg, image/gif"
    181.            />
    182.          </div>
    183.          <!--文本域-->
    184.          <div>
    185.            <label for="resume">自我介绍:</label>
    186.            <!--注意文本域没有value属性-->
    187.            <textarea
    188.              name="resume"
    189.              id="resume"
    190.              cols="30"
    191.              rows="5"
    192.              placeholder="不超过100字"
    193.            ></textarea>
    194.          </div>
    195.        </fieldset>
    196.        <!-- 隐藏域, 例如用户的Id, 注册，登录的时间。。。。 -->
    197.        <input type="hidden" name="user-id" value="123">
    198.        <p>
    199.            <input type="submit" value="免费注册" class="btn">
    200.        </p>
    201.        <ul>
    202.            <li class="member"><a href="#">我是会员，立即登录</a></li>
    203.        </ul>
    204.  </form>      
    205. </body>
    206. </html>

总结：正常表格的单元格合并比较简单，使用display生成的表格的单元格合并比较难。表单的控件比较多，需要多记。

Correcting teacher：WJWJ

Correction status：qualified

Teacher's comments：值得鼓励，写的非常好！
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post