表格的组成和基本结构及两种实现方式&表单的组成和结构

表格的组成和基本架构

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

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

例:
<!DOCTYPE html>
<html>
<head>
    <title>表格的基本格式</title>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
    <table>
        <!-- 表格的标题 -->
        <caption>
        标题
        </caption>
        <!-- 对表格中列进行组合,可以向整个列应用样式 -->
        <colgroup>
            <!-- 每一个col单标签控制一列,就是把多行中的列组合成一列 -->
            <!-- 如果两个相邻的列样式基本一致可用这种方式达到一个col标签控制两个列 -->
            <!-- 这里的span="2"就是把两行中的多个单列组合成一个大列进行控制 -->
            <!-- <col span="2" width="100px" style="background-color:yellow"/> -->
            <!-- 控制第一列的样式和宽度 -->
            <col width="100px" style="background-color:yellow"/>
            <!-- 控制第二列的样式和宽度 -->
            <col width="100px" style="background-color:green"/>
            <!-- 控制第三列的样式和宽度 -->
            <col width="100px" style="background-color:blue"/>
        </colgroup>
        <!-- 表格的头部 -->
        <thead>
            <tr>
                <td>一列</td>
                <td>二列</td>
            </tr>
        </thead>
        <!-- 表格的主体部分 (可以有多个)-->
        <tbody>
            <!-- tr:代表表格中的行 -->
            <!-- td代表表格中的列 -->
            <tr>
                <td>111</td>
                <td>111</td>
                <td>111</td>
            </tr>
            <tr>
                <td>111</td>
                <td>111</td>
                <td>111</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>222</td>
                <td>222</td>
                <td>222</td>
            </tr>
            <tr>
                <td>222</td>
                <td>222</td>
                <td>222</td>
            </tr>
        </tbody>
        <!-- 表格的底部 -->
        <tfoot>
            <tr>
                <td>一列</td>
                <td>二列</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

使用表格实现购物车页面

<!DOCTYPE html>
<html>
<head>
  <title>使用表格实战购物车页面</title>
  <meta charset='utf-8' />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style type="text/css">
  /*给当前页面设置字体大小*/
  html {
    font-size:14px;
  }
  /*给表格添加样式*/
  table {
    width:50%;
    /*去除表格之间的间隙*/
    border-collapse: collapse;
    /*让表哥在页面中水平居中*/
    margin:auto;
    /*设置表格中字体的颜色*/
    color:#888;
    /*设置字体的粗细(lighter是设置细字体bold是设置粗字体)*/
    font-weight: lighter; 
    /*表格中的文字水平居中显示*/
    text-align:center;
  }
  table td {
    /*给单元格设置下边框*/
    border-bottom:1px solid #666;
    /*给没个单元格设置内边距*/
    padding:10px;
  }
  /*给caption设置样式*/
  table caption {
    /*这里的1.5rem是指默认字体大小的1.5倍*/
    font-size:1.5rem;
    /*设置下边距(当前元素距离相邻元素下边的距离)*/
    margin-bottom:20px;
    /*给字体加粗*/
    font-weight:bold;
    /*设置字体颜色*/
    color:blue;
  }
  /*给表格头部分添加样式*/
  thead {
    background-color: #40c3cb;
  }
  /*表格主体部分实现隔行换色*/
  table tbody tr:nth-of-type(even){
    background-color:#5bd069;
  }
  /*设置伪类:hover当鼠标悬停改变单元格的颜色*/
  table tbody tr:hover {
    background-color:red;
  }
  /*设置底部样式*/
  tfoot tr td {
    border-bottom:none;
    color:#cc22eb;
    font-size:1.2rem;
    font-weight: bold;
  }
  /*给结算按钮设置样式*/
  body div:last-of-type {
    width:50%;
    /*border:1px solid red;*/
    /*给这个div四周加上10个像素外边距病让这个div水平居中*/
    margin: 10px auto;
    overflow:hidden;
  }
  /*设置按钮的样式*/
  body div:first-of-type button {
    float:right;
    width:120px;
    height:80px;
    background-color:#eba18d;
    /*去除边框*/
    border:none;
    font-size:1.3rem;
    color:white;
  }
  /*鼠标悬停样式*/
  body div:first-of-type button:hover {
    background-color: coral;
    font-size: 1.5rem;
  }
  </style>
</head>
<body>
<table>
  <caption>购物车</caption>
  <thead>
    <tr>
      <td>ID</td>
      <td>商品名</td>
      <td>单价/元</td>
      <td>单位</td>
      <td>数量</td>
      <td>金额/元</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1号商品</td>
      <td>100</td>
      <td>个</td>
      <td>1</td>
      <td>100</td>
    </tr>
    <tr>
      <td>2</td>
      <td>3号商品</td>
      <td>200</td>
      <td>个</td>
      <td>2</td>
      <td>400</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3号商品</td>
      <td>300</td>
      <td>个</td>
      <td>3</td>
      <td>900</td>
    </tr>
    <tr>
      <td>4</td>
      <td>4号商品</td>
      <td>400</td>
      <td>个</td>
      <td>4</td>
      <td>1600</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5号商品</td>
      <td>500</td>
      <td>个</td>
      <td>5</td>
      <td>2500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">总计:</td>
      <td>13</td>
      <td>35765</td>
    </tr>
  </tfoot>
</table>
<div>
  <button>结算</button>
</div>
</body>
</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为表格的底部样式

例：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>div+css实现表格</title>
    <style>
      /* 表格 */
      .table {
        display: table;
        border: 1px solid #000;
        width: 300px;
        text-align: center;
        margin: auto;
      }
      /* 标题 */
      .table-caption {
        display: table-caption;
        margin-bottom: 10px;
        font-size: 1.3rem;
      }
      /* 表头 */
      .table-thead {
        display: table-header-group;
        background-color: #ccc;
      }
      /* 行 */
      .table-row {
        display: table-row;
      }
      /* 列 */
      .table-cell {
        display: table-cell;
        border: 1px solid #000;
        padding: 5px;
      }
      /* 主体 */
      .table-tbody {
        display: table-row-group;
      }
      /* 底部 */
      .table-tfoot {
        display: table-footer-group;
      }
      /* 列分组样式 */
      .table-colgroup {
        display: table-column-group;
      }
      .table-colgroup .table-col:first-of-type {
        display: table-column;
        background-color: lightblue;
      }
      .table-colgroup .table-col {
        display: table-column;
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <!-- 表格:<table>< -->
    <div class="table">
      <!-- 标题 <caption>-->
      <div class="table-caption">员工信息表</div>
      <!-- 列分组<colgroup> -->
      <div class="table-colgroup">
        <div class="table-col"></div>
        <div class="table-col"></div>
        <div class="table-col"></div>
      </div>
      <!-- 表头:<thead> -->
      <div class="table-thead">
        <!-- 行 -->
        <div class="table-row">
          <div class="table-cell">ID</div>
          <div class="table-cell">姓名</div>
          <div class="table-cell">职务</div>
        </div>
      </div>
      <!-- 主体 -->
      <div class="table-tbody">
        <div class="table-row">
          <div class="table-cell">1</div>
          <div class="table-cell">小王</div>
          <div class="table-cell">程序员</div>
        </div>
        <div class="table-row">
          <div class="table-cell">2</div>
          <div class="table-cell">小张</div>
          <div class="table-cell">组长</div>
        </div>
        <div class="table-row">
          <div class="table-cell">2</div>
          <div class="table-cell">小李</div>
          <div class="table-cell">程序员</div>
        </div>
        <div class="table-row">
          <div class="table-cell">3</div>
          <div class="table-cell">小朱</div>
          <div class="table-cell">组长</div>
        </div>
      </div>
      <!-- 底部<tfoot> -->
      <div class="table-tfoot">
        <div class="table-row">
          <div class="table-cell">X</div>
          <div class="table-cell">Y</div>
          <div class="table-cell">Z</div>
        </div>
      </div>
    </div>
  </body>
</html>

表单的结构及应用

from表单的基本结构

from标签定义表单

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

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

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

legend标签为fieldset元素定义标题

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

input单标签定义输入框

textaera 标签定义文本域

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

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

list属性表明他是一个列表
datelist标签中一定要有id属性这个id属性一定要和input输入框中的list属性绑定(就是id的名字要和list的名字一样就是绑定)
input标签中list的值要和id的值一致
option中间的文本可以写在option标签中间,也可以在option标签中添加一个label属性写在label属性中
例:
<label for="brand">手机:</label>
<input type="search" list="phone" name="brand" id="brand" />
<datalist id="phone">
<option value="apple"> </option>
<option value="huawei" >华为</option>
<option value="mi" label="小米"> </option>
</datalist>

表单中输入框获取焦点

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

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

input中的小属性

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

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

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

表单中input的type类型

type="text" 文本类型

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

type="password" 文本加密

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

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

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

type="data" 日期类型

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

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

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

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

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

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

例:
<label for="brand">手机:</label>
<input type="search" list="phone" name="brand" id="brand" />
<datalist id="phone">
    <option value="apple"> </option>
    <option value="huawei" >华为</option>
    <option value="mi" label="小米"> </option>
</datalist>

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

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

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

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

总结

表格的组成和基本机构
使用表格实现购物车页面
使用div+css实现表格
表单的组成和基本结构

表格的组成和基本架构

使用表格实现购物车页面

div+css实现表格

表单的结构及应用

总结

相关文章