TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索

10、HTML&CSS-高级表单、表格

zyz
2018-04-12
/
0 评论
/
891 阅读
/
正在检测是否收录...
04/12

一、表单高级

  • 表单字段集
 语法:
    <fieldset> </fieldset>
 说明:
    相当于一个方框,在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套,在其内部可以在设置多个fieldset对象;
  • 字段级标题
语法:
    <legend align="left/center/right/justify">个人信息</legend>
 说明: 
    legend元素可以在fieldset对象绘制的方框内插入一个标题,legend元素必须是fieldset内的第一个元素;
  • 上传文件框
语法:
    <input type="file" multiple="multiple" />
 说明:
    type属性值新增的类型有: file文件类型,可进行文件的选择,multiple属性可实现多选;
  • required属性
  语法: 
    <input type=“text” required=“required”/>
    <input type=“text” required />
  说明: 
    设置必填属性,即此项必填项;

二、表格属性

  • 单元格间距(cellspacing)
 语法:
    border-spacing:value;
 说明:
     单元格间距(该属性必须给table添加),表示单元格边框之间的距离,不可取负值;
  • 合并相邻单元格边框
 语法:
    border-collapse:separate/collapse;
 说明:
    合并相邻单元格边框(该属性必须给table添加);
    separate(边框分开)默认值;
    collapse(边框合并);
  • 无内容时单元格的设置
 语法:
    empty-cells:show/hide;
 说明:
    定义当单元格无内容时,是否显示该单元格的边框;
    show:显示;
    hide:隐藏;
    【不要使用border-collapse:collapse;否则无效】
  • 显示单元、行和列的算法(加快运行的速度)
 语法:
    table-layout:auto/fixed; (默认是auto)
 说明:
    定义表格的布局算法,设置fixed,文本为英文字母且无空格时,内容超出单元格宽度则固定不变;如没设宽则平均分配;设置auto时,则随内容宽度而定;
    fixed:固定宽,不会随内容多少改变单元格宽,宽度可以明确定义,没有定义时则宽度会平均分配,高度则会随内容变化;
    auto自动表格布局: 优点(灵活)、缺点(较慢,因为要确定布局前要先访问表格中所有数据);
    fixed固定表格布局: 优点(加快运行速度,允许浏览器更快的对表格进行布局)、缺点(不太灵活)
  • 设置表格标题的位置
 语法:
    caption-side:top/right/bottom/left
 说明:
    定义表格的caption对象放于表格的哪个位置,与caption元素一起使用;
    top为默认值;
    left,right位置只有火狐识别;
    top,bottom IE6以上版本支持,IE6以下版本不支持其它属性值,只识别top;
  • 隔行变色设置
 语法:
    双数行: tr:nth-child(2n){ }
    单数行: tr:nth-child(2n+1){ }
 说明:
    设置单数单元格的样式和双数单元格的样式
  • 数据行分组
 <thead></thead>      表头
 <tbody></tbody>      表体
 <tfoot></tfoot>      表尾
 说明:一个Table中,只能包含一个thead,一个tfoot,但可包含多个tbody;
 
 备注:
   thead 元素应该与 tbody 和 tfoot 元素结合起来使用;
   tbody 元素用于对 HTML 表格中的主体内容进行分组, tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组;
   如果要使用 thead、tfoot 以及 tbody 元素,就必须使用全部的元素;
   它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了;
赞(0)
评论 (0)