表格的组成和基本结构及两种实现方式&表单的组成和结构 - php学习作业

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 表格的组成和基本结构及两种实现方式&表单的组成和结构

博主信息

博文 17

粉丝 0

访问量 25464

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

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

嘬一口啊

原创

3062人浏览过

表格的组成和基本架构

标签名	作用
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实现表格
表单的组成和基本结构

批改老师：

WJ

批改状态：合格

老师批语：写的很认真仔细，建议加上效果图会更好！

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

Markdown、phpstudy的安装及配置

2020-06-11 19:50:59

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

PHP学习

技术支持

返回顶部

登录PHP中文网，和优秀的人一起学习！

全站2000+教程免费学