CSS为网页添加表格和表单

1.表格标签

1)创建表格

<table></table>：用于定义一个表格的开始和结束，在标签内部，可以放置表格的标题、表格行和单元格

<tr></tr>：用于定义表格中的一行，<td></td>：用于定义表格中的单元格

<table border="1">
        <tr>
            <td>学生名称</td>
            <td>竞赛学科</td>
            <td>分数</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>数学</td>
            <td>150</td>
        </tr>
</table>

1）<table>标签的属性：border、cellspacing（设置单元格与单元格边框之间的空白距离）、cellpadding（设置单元格内容跟单元格边框之间的空白距离）、width、heigh、align、bgcolor、background

2）<tr>标签的属性：heigh、align、valign、bgcolor、background

3）<td>标签的属性：...colspan（设置单元格横跨的列数，用于合并水平方向的单元格）、rowspan（设置单元格竖跨的行数，用于合并竖直方向的单元格）【合并单元格】

<table border="1">
        <tr>
            <td>学生名称</td>
            <td colspan="2">竞赛学科</td>
            <!--<td>分数</td>-->
        </tr>
        <tr>
            <td>张三</td>
            <td>数学</td>
            <td>150</td>
        </tr>
</table>

 4）<th></th>表头标签：加粗处理

2.表单标签

一个完整的表单通常由表单控件、提示信息和表单域三部分构成

<form></form>标签用于定义表单，实现用户信息的收集与传递

<form action="url地址" method="提交方式" name="表单名称">

...各种表格控件

<form>

1.action属性：用于指定接收并处理表单数据的服务器url地址(通常写一个java程序与数据库进行数据交互)

2.method属性：用于设置表单数据的提交方式(通常使用post，比get更安全，传输也不受大小限制)

3.name属性：用于指定表单名称，具有name属性的元素会将用户填写的内容提交给服务器

4.autocomlete属性：用于指定表单是否自动完成功能，是指将表单控件输入的内容记录下来，当再次输入时，会将输入的历史纪录显示在一个下拉列表里，以实现自动完成输入

5.novalidate属性：取消表单有效性检查

3.表单控件

<input type="...">

<form action="#" method="post">
        <table>
            <tr>
                <td>用户名：</td>
                <td>
                    <!--text单行文本输入框-->
                    <input type="text" value="姓名" maxlength="6"/>
                </td>
            </tr>
            <tr>
                <td>密码：</td>
                <td>
                    <!--password密码输入框-->
                    <input type="password" value="" size="40px" maxlength="6"/>
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <!--radio单选按钮-->
                    <input type="radio" name="sex" checked="" id="man"/>男
                    <input type="radio" name="sex" id="woman"/>女
                </td>
            </tr>
            <tr>
                <td>爱好：</td>
                <td>
                    <!--checkbox复选按钮-->
                    <input type="checkbox"/>唱歌
                    <input type="checkbox"/>跳舞
                    <input type="checkbox"/>游泳
                </td>
            </tr>
            <tr>
                <td>普通按钮1：</td>
                <td>
                    <!--button按钮-->
                    <input type="button" value="普通按钮1" id="button1"/><!--定义id方便JS进行相关操作-->
                </td>
                <td>提交按钮1：</td>
                <td>
                    <!--submit按钮-->
                    <input type="submit" value="提交按钮1" id="button2"/><!--定义id方便JS进行相关操作-->
                </td>
                <td>重置按钮1：</td>
                <td>
                    <!--reset按钮-->
                    <input type="reset" value="重置按钮1" id="button3"/><!--定义id方便JS进行相关操作-->
                </td>
                <td>
                    <!--图片形式提交按钮-->
                    <input type="image" src="#"/>
                </td>
                <td>
                    <!--hidden隐藏域，通常用于后台程序-->
                    <input type="hidden"/>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <!--file文件域-->
                    <input type="file"/>
                </td>
            </tr>
        </table>
 </form>

 <input>type中其余属性：email、url、tel、search、color、number、range、Date pickers(data,month,week)【这些属性一般用于检验输入项是否符合相关格式要求】

<input>中其他属性：autofocus(获取焦点)、form（单独设置表单属性）、list（绑定datalist标签，一个清单项）、multiple、min/max/step、pattern（验证正则表达式）、placeholder（描述输入框期待用户输入何种内容）、required（判断是否有内容，输入内容不能为空）

3.表单控件

      textarea控件：轻松创建多行文本输入框

4.select控件：

<select>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
</select>

 5.datalist控件：

     可自己输入相关内容(与input合并,datalist和input的id需要一致)

<input type="text" id="text1" list="namelist"/>
    <datalist id="namelist">
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
</datalist>