（9）HTML5-表格与窗体

在纯粹只有HTML5语句的时候，可以简单地使用<table>,<th>,<tr>,<td>来构造表格的结构。

<table>标签：@R_673_9886@表格的范围

<tr>标签：表示表格中一行的单元格

<th>标签：表示表格中的一列的单元格

<td>标签：表示表格中的一个基本单元格

HTML文件

<table border="1">
    <tr>
        <th>科目</th>
        <th>小明</th>
        <th>小花</th>
    </tr>
    <tr>
        <td>语文</td>
        <td>55分</td>
        <td>100分</td>
    </tr>
     <tr>
        <td>英语</td>
        <td>30分</td>
        <td>92分</td>
    </tr>
     <tr>
        <td>数学</td>
        <td>99分</td>
        <td>10分</td>
    </tr>
</table>

加入CSS控制表格

运用我们在前面所学过的图文属性，为表格加上不同的装扮。

窗体

窗体是网页中频繁使用的互动元素，主要担任搜集用户信息并存储至@L_450_9@数据库的角色。在窗体中会会使用到HTML标签包括<form>,<input>,<SELEct>,<textarea>等。

<form>标签：标记窗口的结构范围

<input>标签：调用一个输入字段

<SELEct>标签：调用一个下拉式选单字段

<textarea>标签：调用一个多行输入的文字栏

HTML文件

<form method="post">
    <p>姓名：<br><input type="text" name="name" id="name"></p>
    <p>居住城市：<br>
    <SELEct name="city" id="city">
        <option value="Taipei">台北市</option>
        <option value="Taichung">台中市</option>
        <option value="Kaohsiung">高雄市</option>
    </SELEct>
    </p>
    <p>自我介绍：<br><textarea name="comments" id="comments" cols="30" rows="4"></textarea>></p>
    <p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit">
    </p>
</form>

加入CSS样式后：

 <style type="text/css">
        form{
            border:5px solid #696969;
            width:300px;
            padding:3px 6px 3px 6px;
            margin:0px;
            font:16px Arial;
        }
        SELEct,input,textarea{
            color:#4682B4;
            BACkground-color:#00BFFF;
            border:1px solid #4682B4;
        }
        SELEct {
            width:80px;
        }
        textarea{
            width:200px;
            height:40px;
        }
    </style>