表格 和 表单进阶

表格进阶

html 结构

    表格标题
        <caption>标题内容</caption>

    数据行分组
        <thead></thead>      表头

        <tbody></tbody>      表体必需存在的标签

        <tfoot></tfoot>      表尾

    说明：一个 Table 中，只能包含一个 thead,一个 tfoot,
    但可包含多个 tbody,tbody 标签是写表格时必备的标签

    数据列分组
        <colgroup></colgroup>

css 样式 — table

    border-collapse 样式，规定是否合并表格边框
        separate    默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性
        collapse    如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性

    border-spacing 样式，规定相邻单元格边框之间的距离
        length 数值
    caption-side 样式，规定表格标题的位置
        top | bottom

    empty-cells 样式，规定是否显示表格中的空单元格上的边框和背景
        hide    不在空单元格周围绘制边框
        show    在空单元格周围绘制边框。默认

    table-layout 样式，设置完成表布局时所用的布局算法
        自动表格布局：automatic     默认。列宽度由单元格内容设定
        固定表格布局: fixed     列宽由表格宽度和列宽度设定

表单进阶

复习回顾

1
2
3
4
5
6
7
8
<form name="" method（提交方式）="post/get" action="表单提交的地址">
  <input type="text" value="1912596460" placeholder="请输入您的账号" />
  <input type="password" placeholder="请输入您的密码" />
  <input type="submit" value="提交" />
  <input type="reset" value="重置" />
  <input type="button" value="普通按钮" /> 等价于 <button>普通按钮</button>
  <input type="checkbox" name="remember" value="记住密码" />
</form>

单选框

1
2
3
4
5
6
7
单选按钮里的 name 属性必须写，同一组单选按钮的 name 属性值必须一样

<input type="radio" name="ral" value="男" checked="checked" />
<input type="radio" name="ral" value="女" disabled />
checked 选中属性 disabled 禁用属性 checked="checked"
表示默认被选中，可简写成checked disabled="disabled"
表示当前控件禁用，可简写成disabled

下拉菜单

1
2
3
4
5
6
7
<select name="">
  <option name="" value="表单被提交时被发送到服务器的值" selected="selected">
    选项一
  </option>
  <option name="" value="表单被提交时被发送到服务器的值">选项二</option>
  <option name="" value="表单被提交时被发送到服务器的值">选项三</option>
</select>

多行文本框（文本域）

1
<textarea name="textareal" cols="字符宽度" rows="行数"></textarea>

上传文件框

1
<input type="file" />

图像域

1
<input type="image" src="" width="100" height="100" alt="上传图片" />

表单字段集

1
2
3
<fieldset>
  <legend>表单字段集</legend>
</fieldset>