Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表格的组成和基本结构及两种实现方式&表单的组成和结构
Blogger Information
Blog 17
fans 0
comment 0
visits 19025
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
2421 people have browsed it

表格的组成和基本架构

标签名 作用
table 表格的开始标签
caption 表格的标题标签
colgroup 对表格中的列进行组合,组合之后可以控制整个列,不需要重复为每个单元格设置样式
thead 设置表格的头部
tbody 设置表格的主体 可以有多个tbody(一定要写tbody如果不写浏览器会自动生成但是浏览器生成的tbody标签使用js是获取不到的)
tfoot 表格的底部
tr 代表表格中行
td 代表表格中的列

注意:注意:colgroup标签只能在 <table> 元素之内，在任何一个 <caption> 元素之后，在任何一个 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用 <colgroup> 标签。

  1. 例:
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <title>表格的基本格式</title>
  6.     <meta charset='utf-8' />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8. </head>
  9. <body>
  10.     <table>
  11.         <!-- 表格的标题 -->
  12.         <caption>
  13.         标题
  14.         </caption>
  16.         <!-- 对表格中列进行组合,可以向整个列应用样式 -->
  17.         <colgroup>
  18.             <!-- 每一个col单标签控制一列,就是把多行中的列组合成一列 -->
  20.             <!-- 如果两个相邻的列样式基本一致可用这种方式达到一个col标签控制两个列 -->
  21.             <!-- 这里的span="2"就是把两行中的多个单列组合成一个大列进行控制 -->
  22.             <!-- <col span="2" width="100px" style="background-color:yellow"/> -->
  24.             <!-- 控制第一列的样式和宽度 -->
  25.             <col width="100px" style="background-color:yellow"/>
  26.             <!-- 控制第二列的样式和宽度 -->
  27.             <col width="100px" style="background-color:green"/>
  28.             <!-- 控制第三列的样式和宽度 -->
  29.             <col width="100px" style="background-color:blue"/>
  31.         </colgroup>
  32.         <!-- 表格的头部 -->
  33.         <thead>
  34.             <tr>
  35.                 <td>一列</td>
  36.                 <td>二列</td>
  37.             </tr>
  38.         </thead>
  39.         <!-- 表格的主体部分 (可以有多个)-->
  40.         <tbody>
  41.             <!-- tr:代表表格中的行 -->
  42.             <!-- td代表表格中的列 -->
  43.             <tr>
  44.                 <td>111</td>
  45.                 <td>111</td>
  46.                 <td>111</td>
  47.             </tr>
  48.             <tr>
  49.                 <td>111</td>
  50.                 <td>111</td>
  51.                 <td>111</td>
  52.             </tr>
  53.         </tbody>
  54.         <tbody>
  55.             <tr>
  56.                 <td>222</td>
  57.                 <td>222</td>
  58.                 <td>222</td>
  59.             </tr>
  60.             <tr>
  61.                 <td>222</td>
  62.                 <td>222</td>
  63.                 <td>222</td>
  64.             </tr>
  65.         </tbody>
  66.         <!-- 表格的底部 -->
  67.         <tfoot>
  68.             <tr>
  69.                 <td>一列</td>
  70.                 <td>二列</td>
  71.             </tr>
  72.         </tfoot>
  73.     </table>
  74. </body>
  75. </html>

使用表格实现购物车页面

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>使用表格实战购物车页面</title>
  5.   <meta charset='utf-8' />
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.   <style type="text/css">
  8.   /*给当前页面设置字体大小*/
  9.   html {
  10.     font-size:14px;
  11.   }
  13.   /*给表格添加样式*/
  14.   table {
  15.     width:50%;
  16.     /*去除表格之间的间隙*/
  17.     border-collapse: collapse;
  18.     /*让表哥在页面中水平居中*/
  19.     margin:auto;
  20.     /*设置表格中字体的颜色*/
  21.     color:#888;
  22.     /*设置字体的粗细(lighter是设置细字体bold是设置粗字体)*/
  23.     font-weight: lighter; 
  24.     /*表格中的文字水平居中显示*/
  25.     text-align:center;
  26.   }
  29.   table td {
  30.     /*给单元格设置下边框*/
  31.     border-bottom:1px solid #666;
  32.     /*给没个单元格设置内边距*/
  33.     padding:10px;
  34.   }
  36.   /*给caption设置样式*/
  37.   table caption {
  38.     /*这里的1.5rem是指默认字体大小的1.5倍*/
  39.     font-size:1.5rem;
  40.     /*设置下边距(当前元素距离相邻元素下边的距离)*/
  41.     margin-bottom:20px;
  42.     /*给字体加粗*/
  43.     font-weight:bold;
  44.     /*设置字体颜色*/
  45.     color:blue;
  46.   }
  48.   /*给表格头部分添加样式*/
  49.   thead {
  50.     background-color: #40c3cb;
  51.   }
  53.   /*表格主体部分实现隔行换色*/
  54.   table tbody tr:nth-of-type(even){
  55.     background-color:#5bd069;
  56.   }
  58.   /*设置伪类:hover当鼠标悬停改变单元格的颜色*/
  59.   table tbody tr:hover {
  60.     background-color:red;
  61.   }
  63.   /*设置底部样式*/
  64.   tfoot tr td {
  65.     border-bottom:none;
  66.     color:#cc22eb;
  67.     font-size:1.2rem;
  68.     font-weight: bold;
  69.   }
  71.   /*给结算按钮设置样式*/
  72.   body div:last-of-type {
  73.     width:50%;
  74.     /*border:1px solid red;*/
  75.     /*给这个div四周加上10个像素外边距病让这个div水平居中*/
  76.     margin: 10px auto;
  77.     overflow:hidden;
  78.   }
  80.   /*设置按钮的样式*/
  81.   body div:first-of-type button {
  82.     float:right;
  83.     width:120px;
  84.     height:80px;
  85.     background-color:#eba18d;
  86.     /*去除边框*/
  87.     border:none;
  88.     font-size:1.3rem;
  89.     color:white;
  90.   }
  92.   /*鼠标悬停样式*/
  93.   body div:first-of-type button:hover {
  94.     background-color: coral;
  95.     font-size: 1.5rem;
  96.   }
  98.   </style>
  99. </head>
  100. <body>
  101. <table>
  102.   <caption>购物车</caption>
  103.   <thead>
  104.     <tr>
  105.       <td>ID</td>
  106.       <td>商品名</td>
  107.       <td>单价/元</td>
  108.       <td>单位</td>
  109.       <td>数量</td>
  110.       <td>金额/元</td>
  111.     </tr>
  112.   </thead>
  113.   <tbody>
  114.     <tr>
  115.       <td>1</td>
  116.       <td>1号商品</td>
  117.       <td>100</td>
  118.       <td>个</td>
  119.       <td>1</td>
  120.       <td>100</td>
  121.     </tr>
  122.     <tr>
  123.       <td>2</td>
  124.       <td>3号商品</td>
  125.       <td>200</td>
  126.       <td>个</td>
  127.       <td>2</td>
  128.       <td>400</td>
  129.     </tr>
  130.     <tr>
  131.       <td>3</td>
  132.       <td>3号商品</td>
  133.       <td>300</td>
  134.       <td>个</td>
  135.       <td>3</td>
  136.       <td>900</td>
  137.     </tr>
  138.     <tr>
  139.       <td>4</td>
  140.       <td>4号商品</td>
  141.       <td>400</td>
  142.       <td>个</td>
  143.       <td>4</td>
  144.       <td>1600</td>
  145.     </tr>
  146.     <tr>
  147.       <td>5</td>
  148.       <td>5号商品</td>
  149.       <td>500</td>
  150.       <td>个</td>
  151.       <td>5</td>
  152.       <td>2500</td>
  153.     </tr>
  154.   </tbody>
  155.   <tfoot>
  156.     <tr>
  157.       <td colspan="4">总计:</td>
  158.       <td>13</td>
  159.       <td>35765</td>
  160.     </tr>
  161.   </tfoot>
  162. </table>
  163. <div>
  164.   <button>结算</button>
  165. </div>
  166. </body>
  167. </html>

div+css实现表格

display: table; 定义一个div为表格样式
display: table-caption; 定义一个div为表格的标题
display: table-column-group; 定义一个div为表格的列分组样式
display: table-header-group; 定义一个div为表格的表头样式
display: table-row; 定义一个div为表格的行样式
display: table-cell; 定义一个div为表格的列样式
display: table-row-group; 定义一个div为表格的主体样式
display: table-footer-group; 定义一个div为表格的底部样式 
  1. 例：
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>div+css实现表格</title>
  8.     <style>
  9.       /* 表格 */
  10.       .table {
  11.         display: table;
  12.         border: 1px solid #000;
  13.         width: 300px;
  14.         text-align: center;
  15.         margin: auto;
  16.       }
  18.       /* 标题 */
  19.       .table-caption {
  20.         display: table-caption;
  21.         margin-bottom: 10px;
  22.         font-size: 1.3rem;
  23.       }
  25.       /* 表头 */
  26.       .table-thead {
  27.         display: table-header-group;
  28.         background-color: #ccc;
  29.       }
  31.       /* 行 */
  32.       .table-row {
  33.         display: table-row;
  34.       }
  36.       /* 列 */
  37.       .table-cell {
  38.         display: table-cell;
  39.         border: 1px solid #000;
  40.         padding: 5px;
  41.       }
  43.       /* 主体 */
  44.       .table-tbody {
  45.         display: table-row-group;
  46.       }
  48.       /* 底部 */
  49.       .table-tfoot {
  50.         display: table-footer-group;
  51.       }
  53.       /* 列分组样式 */
  54.       .table-colgroup {
  55.         display: table-column-group;
  56.       }
  58.       .table-colgroup .table-col:first-of-type {
  59.         display: table-column;
  60.         background-color: lightblue;
  61.       }
  63.       .table-colgroup .table-col {
  64.         display: table-column;
  65.         background-color: lightgreen;
  66.       }
  67.     </style>
  68.   </head>
  69.   <body>
  70.     <!-- 表格:<table>< -->
  71.     <div class="table">
  72.       <!-- 标题 <caption>-->
  73.       <div class="table-caption">员工信息表</div>
  74.       <!-- 列分组<colgroup> -->
  75.       <div class="table-colgroup">
  76.         <div class="table-col"></div>
  77.         <div class="table-col"></div>
  78.         <div class="table-col"></div>
  79.       </div>
  81.       <!-- 表头:<thead> -->
  82.       <div class="table-thead">
  83.         <!-- 行 -->
  84.         <div class="table-row">
  85.           <div class="table-cell">ID</div>
  86.           <div class="table-cell">姓名</div>
  87.           <div class="table-cell">职务</div>
  88.         </div>
  89.       </div>
  91.       <!-- 主体 -->
  92.       <div class="table-tbody">
  93.         <div class="table-row">
  94.           <div class="table-cell">1</div>
  95.           <div class="table-cell">小王</div>
  96.           <div class="table-cell">程序员</div>
  97.         </div>
  98.         <div class="table-row">
  99.           <div class="table-cell">2</div>
  100.           <div class="table-cell">小张</div>
  101.           <div class="table-cell">组长</div>
  102.         </div>
  103.         <div class="table-row">
  104.           <div class="table-cell">2</div>
  105.           <div class="table-cell">小李</div>
  106.           <div class="table-cell">程序员</div>
  107.         </div>
  108.         <div class="table-row">
  109.           <div class="table-cell">3</div>
  110.           <div class="table-cell">小朱</div>
  111.           <div class="table-cell">组长</div>
  112.         </div>
  113.       </div>
  115.       <!-- 底部<tfoot> -->
  116.       <div class="table-tfoot">
  117.         <div class="table-row">
  118.           <div class="table-cell">X</div>
  119.           <div class="table-cell">Y</div>
  120.           <div class="table-cell">Z</div>
  121.         </div>
  122.       </div>
  123.     </div>
  124.   </body>
  125. </html>

表单的结构及应用

  • from表单的基本结构

from标签 定义表单

from标签中的action是表单的提交地址

from标签中的methed是表单的提交方式(两种get/post)

fieldset标签将表单内的相关元素分组(就是控件组)

legend标签为fieldset元素定义标题

label标签为input元素定义标注(给input输入框前面加个名字)

input单标签定义输入框

textaera 标签定义文本域

  1. 文本域中 clos设置文本框的宽度,rows设置文本框的高度
  2. 例:
  3. <label for="wb">文本域</label>
  4. <textarea id="wb" name="wby" cols="40" rows="10" placeholder="不超过100字">

datalist 定义选项列表。与input元素配合使用该元素，来定义 input 可能的值

  1. list属性表明他是一个列表
  2. datelist标签中一定要有id属性这个id属性一定要和input输入框中的list属性绑定(就是id的名字要和list的名字一样就是绑定)
  3. input标签中list的值要和id的值一致
  4. option中间的文本可以写在option标签中间,也可以在option标签中添加一个label属性写在label属性中
  6. 例:
  7. <label for="brand">手机:</label>
  8. <input type="search" list="phone" name="brand" id="brand" />
  9. <datalist id="phone">
  10. <option value="apple"> </option>
  11. <option value="huawei" >华为</option>
  12. <option value="mi" label="小米"> </option>
  13. </datalist>
  • 表单中输入框获取焦点

id名字和label中的for值相关联当点击姓名时自动获取input的焦点

  1. 例:
  2. <label for="my-username">姓名:</label>
  3. <input type="text" id="my-username" name="username" placeholder="这是姓名" autofocus require />
  • input中的小属性

placeholder:设置输入框中的默认值

autofocus:页面刷新时自动获取当前输入框的焦点(注意:一个表单中只能有一个autofocus属性,autofocus没有值如果非要写值就是他本身)

require:社会仔当前输入框是必填选项

  • 表单中input的type类型

type="text" 文本类型

  1. 例:
  2. <input type="text" id="my-username" name="username" placeholder="这是姓名" autofocus require />

type="password" 文本加密

  1. 例:
  2. <input type="password" id="my-password" name="pass" placeholder="这是密码" />

type="email" 邮箱类型 (当表单提交时如果邮箱格式不合法蒋提示)

  1. 例:
  2. <input type="email" id="my-email" name="email" placeholder="这是邮箱"/>

type="data" 日期类型

  1. 例:
  2. <input type="date" name="birthday"/>

type="radio" 单选框类型 (单选框中的name都要相同)

  1. 例:
  2. <label for="dx">性别:</label>
  3. <input type="radio" name='danxuan' value="nan"  /><label>男:</label>
  4. <input type="radio" name='danxuan' value="nv" /><label>女:</label>
  5. <input type="radio" name='danxuan' value="bm" id="dx" /><label>保密:</label>

type="checkbox" 复选框类型 (复选框中的name也都是相同的)

  1. 例:
  2. <label for="game">打游戏</label>
  3. <input type="checkbox" name="hobby[]" value="games" id='game' />
  4. <label for="photo">摄影</label>
  5. <input type="checkbox" name="hobby[]" value="photos" id='photo' />
  6. <label for="bc">编程</label>
  7. <input type="checkbox" name="hobby[]" value="bcs" id='bc' checked />

type="search" 选项列表类型 (给当前输入框设置可选列表)

  1. 例:
  2. <label for="brand">手机:</label>
  3. <input type="search" list="phone" name="brand" id="brand" />
  4. <datalist id="phone">
  5.     <option value="apple"> </option>
  6.     <option value="huawei" >华为</option>
  7.     <option value="mi" label="小米"> </option>
  8. </datalist>

type="file" 上传类型 (input中的accept属性是文件上传类型)

  1. 例:<label for="wj">文件上传</label>
  2. <input type="file" id="wj" name='wenjian' accept="image/png, image/jpeg, image/gif" />

type="hidden" 设置输入框为隐藏域

  1. 例:
  2. <input type="hidden" name="yc" value="yc_123" />

总结

  1. 表格的组成和基本机构
  2. 使用表格实现购物车页面
  3. 使用div+css实现表格
  4. 表单的组成和基本结构
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