HTML开发与应用初级部分：表格与表单-优快云博客

HTML开发与应用初级部分：表格与表单

表格与表单的应用，可以说是HTML中的基础部分，更是基石。

表格基本标签

标签标示行
标示单元格
table属性border表示边框
table属性width 表示表格宽度
table属性height表示表格高度
table属性cellpadding表示表格边与内容的距离
table属性cellspacing表示表格边与边的距离
td属性colspan表示单元格跨列
td属性rowspan表示单元格跨行

代码块：

<table border="1" bordercolor="#00FFFF" cellspacing="0px" cellpadding="0px" width="600px">
    <tr>
        <td>时间\星期</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td>
    </tr>
    <tr>
        <td rowspan="2">上午</td><td>数据结构</td><td>休息</td><td>java</td><td>数据库原理</td><td>编译原理</td>
    </tr>
    <tr>
        <td>休息</td><td>休息</td><td>数据库原理</td><td>休息</td><td>休息</td>
    </tr>
    <tr>
        <td colspan="6">&nbsp;</td>
    </tr>
    <tr>
        <td rowspan="2">下午</td><td>休息</td><td>数据库原理</td><td>休息</td><td>休息</td><td>休息</td>
    </tr>
    <tr>
        <td>数据库原理</td><td>休息</td><td>休息</td><td>休息</td><td>休息</td>
    </tr>
</table>

在网页中的效果是：

这里写图片描述

表单基本标签：

<input type=“text”/>                                    <!– 可编辑文本域 -->
<input type=“password”/>                   <!– 密码框 -->
<input type=“checkbox”/>                   <!– 多选框 -->
<input type=“radio”/>                  <!– 单选框 -->
<input type=“button”/>                 <!– 按钮 -->
<input type=“file”/>                       <!– 文件浏览 -->
<textarea cols=“50” rows=“4”> </textarea> <!– 文本域-->
<select> <option></option></select>          <!–  下拉控件-->

代码块：

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <table border="1px" bordercolor="#0000ff" width="600px" height="400px" cellpadding="0px" cellspacing="0px">
            <tr>
                <td align="right">用户名:</td><td><input type="text" name="" id="" value="" /></td>
            </tr>
            <tr>
                <td align="right">密&nbsp;&nbsp;码:</td><td><input type="password" name="" id="" value="" /></td>
            </tr>
            <tr>
                <td align="right">专&nbsp;&nbsp;业:</td><td><select><option>——请选择——</option><option>电子</option><option>信息</option></select></td>
            </tr>
            <tr>
                <td align="right">性&nbsp;&nbsp;别:</td><td><input type="radio" name="gender" id="gender" value="" />男<input type="radio" name="gender" id="gender" value="" />女<input type="radio" name="gender" id="gender" value="" />其他</td>
            </tr>
            <tr>
                <td align="right">兴&nbsp;&nbsp;趣:</td><td><input type="checkbox" name="" id="" value="" />羽毛球<input type="checkbox" name="" id="" value="" />篮球<input type="checkbox" name="" id="" value="" />乒乓球</td>
            </tr>
            <tr>
                <td align="right">介&nbsp;&nbsp;绍:</td><td><textarea rows="6" cols="80"></textarea></td>
            </tr>
            <tr>
                <td><center><input type="submit" name="" id="" value="提交" /></center></td><td><center><input type="reset" name="" id="" value="重置" /></center></td>
            </tr>
        </table>
    </body>
</html>