HTML表格表单

HTML表格表单

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）

<table border="1">
    <tr>
        <td>具体内容</td>
        <td>具体内容</td>
        <td>具体内容</td>
        <td>具体内容</td>
    </tr>
    <tr>
        <td>具体内容</td>
        <td>具体内容</td>
        <td>具体内容</td>
        <td>具体内容</td>
    </tr>
<table />        

显示效果

带有 thead、tbody 以及 tfoot 元素的 HTML 表格：

<table border="1">
    <thead>
        <tr>
            <th>英雄名称</th>
            <th>英雄大招</th>
            <th>英雄价格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>披甲龙龟</td>
            <td>地动山摇</td>
            <td>3150￥</td>
        </tr>
        <tr>
            <td>诺克萨斯统领</td>
            <td>变成乌鸦</td>
            <td>6300￥</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>雪人双子</td>
            <td>极寒风暴</td>
            <td>450￥</td>
        </tr>
    </tfoot>
</table>

显示效果

表格的标题 - caption
该标签放在<table>之后

<table>
        <caption>表格标题</caption>
        <tr>
        	<td>。。。。。<td/>
        <tr/>
<table />

标题显示在表格上方，且相对表格居中

合并单元格

• colspan 跨列合并 可以跨多个单元格(td)合并

<table border="1">
        <tr>
            <td>具体内容1</td>
            <td>具体内容2</td>
            <td colspan="4">跨列合并</td>
        </tr>
        <tr>
            <td>具体内容7</td>
            <td>具体内容8</td>
            <td>具体内容9</td>
            <td>具体内容10</td>
            <td>具体内容11</td>
            <td>具体内容12</td>
        </tr>
    </table>
    <br>
    <br>
    <hr>
    <table border="1">
        <tr>
            <td>具体内容1</td>
            <td>具体内容2</td>
            <td>具体内容3</td>
            <td>具体内容4</td>
            <td>具体内容5</td>
            <td>具体内容6</td>
        </tr>
        <tr>
            <td>具体内容7</td>
            <td>具体内容8</td>
            <td>具体内容9</td>
            <td>具体内容10</td>
            <td>具体内容11</td>
            <td>具体内容12</td>
        </tr>
    </table>

对比效果

• rowspan 跨行合并 可以跨多个tr合并

<table border="1" cellspacing="0">
        <tr>
            <td rowspan="4">跨行合并</td>
            <td>具体内容2</td>
            <td>具体内容3</td>
            <td>具体内容4</td>
            <td>具体内容5</td>
            <td>具体内容6</td>
        </tr>
        <tr>
            <td>具体内容8</td>
            <td>具体内容9</td>
            <td>具体内容10</td>
            <td>具体内容11</td>
            <td>具体内容12</td>
        </tr>
        <tr>
            <td>具体内容8</td>
            <td>具体内容9</td>
            <td>具体内容10</td>
            <td>具体内容11</td>
            <td>具体内容12</td>
        </tr>
        <tr>
            <td>具体内容8</td>
            <td>具体内容9</td>
            <td>具体内容10</td>
            <td>具体内容11</td>
            <td>具体内容12</td>
        </tr>
    </table>


    <br>
    <hr>
    <table border="1" cellspacing="0">
        <tr>
            <td>具体内容1</td>
            <td>具体内容2</td>
            <td>具体内容3</td>
            <td>具体内容4</td>
            <td>具体内容5</td>
            <td>具体内容6</td>
        </tr>
        <tr>
            <td>具体内容7</td>
            <td>具体内容8</td>
            <td>具体内容9</td>
            <td>具体内容10</td>
            <td>具体内容11</td>
            <td>具体内容12</td>
        </tr>
        <tr>
            <td>具体内容7</td>
            <td>具体内容8</td>
            <td>具体内容9</td>
            <td>具体内容10</td>
            <td>具体内容11</td>
            <td>具体内容12</td>
        </tr>
        <tr>
            <td>具体内容7</td>
            <td>具体内容8</td>
            <td>具体内容9</td>
            <td>具体内容10</td>
            <td>具体内容11</td>
            <td>具体内容12</td>
        </tr>
    </table>

对比效果

表单

• label标签
  用于绑定表单元素,当点击label标签的时候,被绑定的表单就会获得输入焦点 通过id值绑定

<label for="username">用户名：</label>
<input type="text" name="username" id="username">

• textarea - 文本域控件
  extarea控件用来创建一个支持多行的文本输入区域

<textarea cols="100" rows="20">文本内容</textarea>

cols：一行有多少个字符
rows：有多少行

• select - 下拉菜单

<select>
    <option>家里蹲</option>
    <option selected>三亚</option>
    <option>泰国</option>
    <option>白俄罗斯</option>
</select>

显示效果

• 表单域
  form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,发form中的所有内容都会被提交给服务器.
  form标签的属性 action=“url地址” method=“提交方式” name=“表单名字”

1. Action在表单收集到信息后，需要将信息传递给服务器进行处理，
   action属性用于指定接收并处理表单数据的服务器程序的url地址。
2. method用于设置表单数据的提交方式，其取值为get或post。
3. name用于指定表单的名称，以区分同一个页面中的多个表单。

<form action="http://www.baidu.com" method="post" name="myphone">
     <table>
         <div>
             <label for="name">用户名：</label>
             <input type="text" id="name" name="name" value="admin">
         </div>
         <div>
             <label for="password">密 码：</label>
             <input type="password" name="password" id="password" value="admin">
         </div>
         <input type="submit" id="login" value="提交" >
     </table>
 </form>

显示效果