zoukankan      html  css  js  c++  java
  • HTML中表格的使用和表单的使用

    一、表格

    1、HTML中表格的使用和属性

    colspan表示该一储存格向右打通的栏数。 rowspan表示该一储存格向下打通的栏数。

    colspan是表示横向合并单元格,colspan=“3”表示水平合并三个td

    rowspan是表示竖直合并单元格,rowspan=“2” 表示竖直合并两个td

    这是一个表格
    第一个  第二个  第三个
    第四个 第五个第八个 第六个
    第七个 第九个

    表格代码:
    <table width=”450″ border=”1″ cellspacing=”0″ cellpadding=”2″ bordercolor=”#009900″>
    <tr>
    <td>第一行第一栏</td>
    <td colspan=”2″>第一行的第二、三栏</td>
    </tr>
    <tr>
    <td rowspan=”2″>第二行及第三行 的 第一栏</td>
    <td>第二行第二栏</td>
    <td>第二行第三栏</td>
    </tr>
    <tr>
    <td>第三行第二栏</td>
    <td>第三行第三栏</td>
    </tr>
    </table>

      你可能看的不大明白。如果借助于Dreamweaver来再现表格制作过程,相信你会很快明白其中的奥秘。先制作一个三行三列的表格(这可以说是上面表格的“原形”),见下图,然后将第一行的第二、三栏合并,第二行的第一栏、第三行第一栏合并,这样就得到了上例中的表格。你可以自己动手检验一下。

    第一行第一栏
    第一行第二栏
    第一行第三栏
    第二行第一栏
    第二行第二栏
    第二行第三栏
    第三行第一栏
    第三行第二栏
    第三行第三栏

      熟练掌握表格的colspan、 rowspan属性,可以随心所欲的制作出复杂的表格。

      2、表格中的标题列

      <CAPTION> 的作用是为表格标示一个标题列,如同在表格上方加一没有格线的打通列,通常用来存放表格标题,参数有 align、 valign。
      align表示表格标题列相对于表格的对齐方式(水平),可选值为: left, center, right, top, middle, bottom,若 align=”bottom” 的话标题列便会出现在表格的下方,不管你 的原代码是把 <caption> 放在 <table> 中的头部或尾部。
      valign表示表格标题列相对于表格的对齐方式(上下),可选值为: top, bottom

    二、表单

    表单12元素 (在做管理系统时必须用到的)

     <form action="服务器路径" method="pose(常用)/get(不常用)">

    表单内容

    </form>

    (1)文本类

    1、文本框:<input type="text"/> )        placeholder="" (灰色内容)        value=""(默认显示内容)

    2、密码框:<input type="password"/>(输入内容显示●,长度不限制)placeholder="" (灰色内容)         value=""(默认用掩码显示内容)

    3、文本域:<textarea></textarea>(多行文本,长度不限制)              placeholder="" (灰色内容)         

    4、隐藏文本框:<input type="hidden"/>(计算机查看,用户看不到)

    (2)按钮类

    1、普通按钮:<input type="button"/>                              value=""  (按钮改名)                                      

    2、提交按钮:<input type="submit"/>                            value=""   (按钮改名)    (刷新页面)                         

    3、重置按钮:<input type="reset"/>                              value=""  (按钮改名)                                  

    4、图片提交按钮:<input type="image" src="路径"/>        

    (3)选择类

    1、单选:<input type="radio"/>            1.name="" (分组)     2.value="" (上传到服务器数据)    3. id="值" <label for="值">(图片/文字)</label> (点击文字也可选择)

    2、多选:<input type="checkbox"/>     1.name="" (分组)     2.value="" (上传到服务器数据)    3. id="值" <label for="值">(图片/文字)</label> (点击文字也可选择)

    3、下拉菜单:     

    <select>                                           value="" (上传到服务器数据)

    <option>值1</option>

    <option>值1</option>

    </select>

    4、上传文件:<input type="file"/>      value="" (上传内容的路径)

  • 相关阅读:
    关于PTA平台上使用python2/3书写代码误判问题
    随笔小记--乔帮主传
    随笔小记--读李安传
    Git与GitHub的简单了解(3)
    Git与GitHub的简单了解(2)
    Git与GitHub的简单了解(1)
    学习SFrame,根据GraphLab库
    结课:应用实例--照片字符识别 (photo OCR)
    大数据下的机器学习
    Java8之Stream用法
  • 原文地址:https://www.cnblogs.com/zhulijun/p/6602210.html
Copyright © 2011-2022 走看看