第三章表格布局与表单交互

3.1 表格概述

3.1.1 表格的结构

3.1.2 表格的基本语法

    <table></table>表格标记

    <caption></caption>表格标题标记

    <th></th>表格表头标记

    <tr></tr>表格的行标记

    <td></td>表格的列标记

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table>
            <caption>23软件4班学生名单</caption>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>男</td>
            </tr>
            <tr>
                <td>2</td>
                <td>胡慧敏</td>
                <td>女</td>
                
            </tr>

3.2 表格属性的设置

3.2.1 表格边框属性

    border 表示表格边框粗细

    bordercolorlight 表示表格亮边框颜色

    bordercolor 表示表格边框颜色

    bordercolordark 表示表格暗边形颜色

<table border=" " bordercolor=" "  bordercolorlight=" " bordercolordark=" "> 

</table>

3.2.2 表格的宽度和高度属性

    width宽度 height 高度 可以设置长度单位或百分比，设置表格标记中的高度与宽度为百分比时，表格会跟随浏览器窗口的改变而自动调整。

    设置宽高没办法放下内容时，宽生效 ，高不生效

3.2.3 表格背景颜色与表格图像属性

    设置表格的bgcolor属性可以改变表格的背景颜色，设置表格的background属性可以为表格增添背景图像效果，使表格更加美观。

语法:
<table bgcolor="" background"">...
(1)bgcolor。可以用rgb 函数、十六进制、英文颜色名称来设置背景颜色。

    (2)background。设置背景图像，图像的路径可以是绝对路径或相对路径。

    (3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色。

<table bground="" background="">

</table>

3.2.4 表格边框样式属性

           设置frame属性可以改变表格边框的样式；设置表格标记中的rules属性可以改变表格内部边框的样式。

语法：

<table frame=""rules="">........内容......</table>

frame和rules属性值及说明如下：

<table frame="" rules="">

</table>

3.2.5 表格单元格间距、单元格边距属性

            设置表格标记中的cellspacing属性可以改变单元格之间的间距。

            设置表格标记中的cellpadding属性可以增加单元格之间的内容与内部边框的距离。

            间距默认十个像素点。

    语法：

    <table cellspacing=""cellpadding=""</table>

    （1）cellpadding。值的单位为像素或百分比。

    （2）cellspacing。值的单位为像素或百分比，默认值为2px。

<table cellspacing="" cellpadding="">

</table>

3.2.6 表格水平对齐属性

    通过设置align属性，设定对齐方式（居左，居右，居中）默认居左

<table align="left/center/right">

</table>

3.2.7 设置表格的（tr）标记行的属性

    通过tr标记的align属性可以设置行内容的水平对齐方式

    valign属性设置垂直对齐方式（顶部对齐，居中对齐，底部对齐）

<table align="center">

<tr align="left/center/right" valign="top/middle/bottom">

<td>

</td>

</tr>

</table>

3.2.8 设置单元格的属性

3.2.9 表格单元格跨行、跨列属性

3.2.9.1 单元格跨行

    使用单元格td标记的rowspan属性可以设置单元格跨行合并。

    语法：<td rowspan="行数">...</td>

<td rowspan="行数">
</td>

3.2.9.2 单元格跨列

    使用单元格td标记的colspan属性可以设置单元格跨列合并。

    语法：<tdcolspan="列数">...</td>

    设置表格单元格合并例题

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>设置单元格跨列、跨行属性</title>
        </head>
        <body>
            <h3 align="center">设置单元格跨列、跨行属性</h3>
            <table border="1" width="500px" align="center" bordercolor="#3366ff">
                <caption>专业研讨会日程安排</caption>
                <tr align="center">
                    <td colspan="2">上午</td>
                    <td colspan="2">下午</td>
                </tr>
                <tr>
                    <td>8:00-10:00</td>
                    <td>10:10-12:00 </td>
                    <td>14:00-16:00</td>
                    <td>16;10-18:00</td>
                </tr>
                <tr align="center">
                    <td rowspan="2">学校领导讲话</td>
                    <td>大会主题报告</td>
                    <td>行业企业专题报告</td>
                    <td rowspan="2">总结报告</td>
                </tr>
                <tr align=" center">
                    <td>专家报告</td>
                    <td>分组讨论</td>
                </tr>
                <tr align="center">
                    <td colspan="4">全天参观人工智能实训中心</td>
                </tr>
            </table>
        </body>
    </html>

3.3 表格嵌套

    表格嵌套是一种常用的页面布局方式（表格不宜多用，否则会减低网站的访问速度），表格嵌套一般采用单元格内嵌套表格。

    利用嵌套表格布局页面


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
            <title>嵌套表格布局页面</title>
        <style>
            body{font-size:36px;}
        </style>
    </head>
    <body>
        <h4 align="center">嵌套表格布局页面</h4>
        <table width="660px" border="1" align="center" bordercolor="#3333f">
            <td height="100">
                <table width="100%" border="1" bordercolor="red">
                    <tr height="50" align="center">
                        <td rowspan ="2" width="100">logo</td>
                        <td>广告条</td>
                    </tr>
                    <tr height="50"align="center">
                    <td>导航</td>
                    </tr>
                </table>
            </td>
            <tr>
                <td height="300">
                    <table width="100%"border="I" bordercolar="#33f99">
                        <tr align=" center">
                            <td height="300" widih="30%">左栏目</td><td height="300" width="70%">正文内容</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr align="center">
                <td height="100">版权信息</td>
            </tr>
        </table>
    </body>
</html>

3.4 表单

3.4.1 表单标记

    <form>和<form>之间可包含各种表单信息输入标记

3.4.2 定义域和域标题

    利用 feldset 标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行组，fieldser标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素成到fieldset 标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，或者可创建一个子表单来处理这些元素。legend标记为fieldset 标记定义域标题。语法：

<form><fieldset>

<legend alig="left I center | right">城标题内容</legend>

</fieldset>

</form>

    说明：fieldset 标记没有属性，是成对标记。legend 标记必须位于 fieldset标记内，也是

成对标记：有一个对齐 align 属性，属性值分别为left，center和right。

3.4.3 表单信息输入

3.4.3.1 单行文本输入框

         设置input标记的type属性值为text，可以实现向表单中插入一个单行文本框。在单行文本框中可以输入任意类型的数据，但是输入的数据只能单行显示，不能换行。语法：

<input name="" type="text" maxlength="" size="" value="" readonly/>

       说明：单行文本输入框的主要属性有 name，maxlength,size,value和readonly

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form>
            用户名：<input type="text" name="user">
        </form>
    </body>
</html>

3.4.3.2 密码输入框

    设置input标记的type属性值为password，可以向表单中插入一个密码输入框。

    语法：

<input name=" "type="password"maxlength=" "size=" "/>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form>
            用户名：<input type="text" name="user">
                        密码：<input type="password" name="password">
        </form>
    </body>
</html>

3.4.3.3 复选框

    属性值为checkbox，向表单中插入一个复选框，使用复选框可以在网页中设置多项选择。

    语法：

<input name=" "type="checkbox"value=" "checked=" "/>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form>
            用户名：<input type="text" name="user">
                        
                    密码：<input type="password" name="password">
                    
        </form>
    </body>
    <form></form>
    姓名：<input type="text" name="name">
    爱好：
    <input type="checkbox" name="c1" value="sing" checked /> 唱歌
    <input type="checkbox" name="c1" value="dance"/>跳舞
    <input type="checkbox" name="c1" value="basketball"/>篮球
    <input type="checkbox" name="c1" value="run"/>长跑
    </form>
</html>

3.4.3.4 单选按钮

    属性值为radio，像表单中插入一个单选按钮，可以在网页中为某一选择设置多个但选项。

    语法：

<input name=" "type="radio"value=" "checked=" "/>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form>
            用户名：<input type="text" name="user">
                        
                    密码：<input type="password" name="password">
                    
        </form>
    </body>
    <form></form>
    姓名：<input type="text" name="name">
    性别：<input type="radio" name="sex" value="male" checked />男性
    性别：<input type="radio" name="sex" value="female"/>女性
    <br/>
    爱好：
    <input type="checkbox" name="c1" value="sing" checked /> 唱歌
    <input type="checkbox" name="c1" value="dance"/>跳舞
    <input type="checkbox" name="c1" value="basketball"/>篮球
    <input type="checkbox" name="c1" value="run"/>长跑
    </form>
</html>

3.4.3.5 图像按钮

    属性值为image，可以实现向表单发送一个图像，通过src属性加载图像。

    语法：

<input name=" "type="image"src=" "width=" " height=""/>

<form>
        <input type="image" src="img/start.jpg"/>
    </form>

3.4.3.6 提交按钮

    属性值为submit，可以使用value修改按钮名称


<form>
            用户名：<input type="text" name="user">    
            密码：<input type="password" name="password">
            <br/>
            <input type="submit" value="登录"
</form>

3.4.3.7 重置按钮

    属性值为reset,向表单中插入一个重置按钮，可以将信息清空，让用户重新填写。

<input type="reset" />

3.4.3.8 普通按钮

    属性值为button，按钮里面没有任何东西，可以使用value添加名称

<input type="button" value="注册"/>

3.4.3.9 文件选择框

    属性为file，可以实现向表单里面插入一个文件选择框。

<form>
        请上传材料<input type="file" />
    </form>

3.4.3.10 隐藏框

    属性为：hidden，不需要用户输入，但是可以使用vlaue把信息传给后端

<form>
        <input type="hidden" name="huiming" value="123"/>
    </form>

3.4.4 多行文本输入框

 textarea标记可以向表单中插入多行文本输入框。多行文本输入框可以用来输入较多的

文字信息，而且可以换行，并将这些信息提交到服务器。

<form>
        请输入您宝贵的意见：
        <textarea rows="4" cols="30"></textarea>
    </form>

3.4.5 下拉列表框

    下拉列表可以在表单中接收用户的输入。下拉列表通常需要同时使用seleet和option标

记来在表单中插入下拉菜单和列表项。

语法：

<select name="" size="" multiple>

<option value=""selected>文字信息1</ option>

<option value="">文字信息2</option>

</select>

 说明：select 标记是成对标记，option 标记是单个标记，但应该把它补成成对标记，结构更为清晰。select 标记有name，size 和multiple 等属性。option标记有value和selected等属性。select 标记与option标记必须配合使用。每一选项必须指定一个显示的文本和一个value值，显示文本通常附在option标记后面

    <form>
        请选择课程：
        <select multiple>
            <option value="">网页</option>
            <option value="">ps</option>
            <option value="">java</option>
            <option value="">网络</option>
        </select>
    </form>

标签： css html 前端

本文转载自: https://blog.csdn.net/2302_80416946/article/details/142377664
版权归原作者江恸所有，如有侵权，请联系我们删除。

第三章表格布局与表单交互

3.1 表格概述

3.4.3 表单信息输入

发表评论