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

3.1 表格概述

表格是网页中的一个重要元素，可以包含文字和图像。表格可以使网页结构紧凑整齐，内容一目了然。

3.1.1 表格的结构

表格是由行和列组成的，每行又有一个或者多个单元格组成，用于放置数据。表格中的单元格是行与列的交叉部分，是组成表格的最基本单元。单元格内容称为数据，数据单元格可以包含图片、表格、文本、列表、水平线和段落等。

3.1.2 表格的基本语法

表格的所有内容都会放在

里面

包含表格标题（）

sdfghjklvbnm.bnm,./ertyuip,./,（）表示表头，会有加粗效果

（）表示表格内容

（）表示表格的行

        <table border="2px" bordercolor="#0cc0ff" width="20%" height="20%" bgcolor="#ffc0cb" frame="hsides" 
        frame="vsides" style="solid">
            <caption>班级名单</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>
        </table>

3.2 表格属性的设置

表格是网页文件中的重要元素，制作网页的工程中常常要对网页中的表格做一些设置，对表格的设置实质是对表格标记属性的一些设置。

3.2.1 表格边框属性

设置表格标记中的边框属性可以改变表格的外观。
边框属性说明边框属性说明borde表示表格边框粗细bordercolor表示表格边框颜色bordercolorlight表示表格亮边框颜色bordercolordark表示表格暗边形颜色
语法:
<table border="" bordercolor=" bordercolorlight="" bordercolordark="">...

(1)border属性。用于设置边框的粗细，单位是像素。

(2)bordercolor属性。用于设置表格边框的颜色，可以使用rgb函数、十六进制数和色英文名称。

(3)bordercolorlight属性。用于设置表格亮边框，对表格左上边框生效。

(4)bordercolordark属性。用于设置表格暗边框，对表格右下边框生效。

border="2px" bordercolor="#0cc0ff" width="20%" height="20%" bgcolor="#ffc0cb" frame="hsides" 
        frame="vsides" style="solid">

3.2.2 表格的宽度和高度属性

通过设置width属性和 height,属性可以设置表格的宽度和高度。

语法:
<table width=" height="">

当表格内容放不下时，宽度生效高度失效

响应式布局，设置宽和高的百分比，可以随浏览器的大小而变化。

width="20%" height="20%"

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

设置表格的bgcolor属性可以改变表格的背景颜色，设置表格的background属性可以为表格增添背景图像效果，使表格更加美观。
语法:
<table bgcolor="" background"">...
(1)bgcolor。可以用rgb 函数、十六进制、英文颜色名称来设置背景颜色。

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

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

background="img/学校.jpg"
bgcolor="#ffc0cb"

3.2.4 表格边框样式属性

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

语法：

........内容......

frame="hsides" 
        frame="vsides"

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

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

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

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

间距默认十个像素点。

语法：

<table cellspacing=""cellpadding=""

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

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

<table border="2px" background="img/学校.jpg" width="650px" height="420px" 
        cellspacing="20px" cellpadding="10px" align="center" >

3.2.6 表格水平对齐属性

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

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

valign 属性设置上下对齐（靠上，靠中，靠下）（top，middle，bottom）
属性值说明属性说明align 行内容水平对齐bordercolor行的边框颜色valign 行内容垂直对齐bordercolorlight 行的亮边框颜色bgcolor 行的背景颜色bordercolordark 行的暗边框颜色
通过r标记valign属性可以设置的水平对齐方式。水平对齐方式有居左对齐居中对齐和居右对齐。通过tr标记的valign属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。

<caption>班级名单</caption>
<tr align="left" valign="top">
    <th>序号</th>
    <th>姓名</th>
    <th>性别</th>
</tr>
<tr align="center" valign="middle">
    <td>1</td>
    <td>江棣</td>
    <td>女</td>
</tr>
<tr align="right" valign="bottom" bgcolor="#fcccc0">
        <td>2</td>
        <td>波波</td>
        <td>男</td>
</tr>

3.2.8 设置单元格的属性

表格的列(td)标记的属性可以设置表格单元格的显示风格。

td标记常用的属性如下：
属性值说明属性值说明align 单元格内容水平对齐bordercolorlight单元格的亮边框颜色valign单元格内容垂直对齐bordercolordark单元格的暗边框颜色bgcolor 单元格的背景颜色rowspan单元格跨行background 单元格背景图像colspan 单元格跨列bordercolor 单元格的边框颜色width 单元格宽度height 单元格高度

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

3.2.9.1 单元格跨行

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

语法：...

3.2.9.2 单元格跨列

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

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

设置表格单元格合并例题

代码如下：

<!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:00-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="#3333ff">
            <tr>
                <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>
            <tr>
                <td height="300">
                    <table width="100%" border="1"  bordercolor="#33ff99">
                        <tr align="center">
                            <td height="300" width="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 表单

HTML中的表单是网页中最常用的元素，是网站服务器端与客户端之间沟通的桥梁。一
个完整的交互表单由两部分组成:一是客户端包含的表单页面，用于填写浏览者进行交互的
信息；另一个是服务端的应用程序，用于处理浏览者提交的信息，浏览者在表单中输人信
息，然后将这些信息提交给服务器；服务器中的应用程序会对这些信息进行处理响应，这样
就完成了浏览者和服务器之间的交互。

3.4.1 表单标记

表单form标记为成对标记，以<form>开始</form>结束。表单定义了采集数据的范围，其所包含的数据内容将完整地提交给服务器。

checked设置默认被选中的选项，可以手动取消。

<form>
    <fieldset>
    <legend align="center">个人信息</legend>
    用户名：<input type="text" name="user"><br/>
    密码：<input type="password" name="password"/><br />
            
</form>

3.4.2 定义域和域标题

属性为：fieldset，可以在网页上定义域，使用域可以将表单里面的相关元素进行分组，fieldset标记可以将内容一部分打包，生成一组相关表单的字段

3.4.3 表单信息输入

信息输入全部使用input,使用type区别边框属性。

3.4.3.1 单行文本输入框

value可以把数据传给后端，数据需使用英文，否则后端会出现乱码。

3.4.3.2 密码输入框

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

语法：

3.4.3.3 复选框

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

语法：

3.4.3.4 单选按钮

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

语法：

3.4.3.5 图像按钮

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

语法：

3.4.3.6 提交按钮

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

3.4.3.7 重置按钮

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

3.4.3.8 普通按钮

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

3.4.3.9 文件选择框

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

3.4.3.10 隐藏框

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

3.4.4 多行文本输入框

textarea标记可以向表单中插入多行文本输入框，可以换行。

name：定义textarea标记名称

rows：规定文本区内的可见行数

clos：规定文本区内的可见宽数

3.4.5 下拉列表框

属性为：select

按住ctrl健可以多选

    <form>
                <fieldset>
                <legend align="center">个人信息</legend>
                用户名：<input type="text" name="user"><br/>
                密码：<input type="password" name="password"/><br />
            
            </form>
            <!-- 复选框 -->
            <form>
                姓名：<input type="text" name="name"/><br />
                <!-- 单选按钮 -->
                性别：<input type="radio" name="sex" value="male" checked/>男性<br />
                性别：<input type="radio" name="sex" value="male"/>女性
                <br />
                爱好：
                <input type="checkbox" name="jd" value="sing"/>唱歌
                <input type="checkbox" name="jx" value="eat" checked/>吃
                <input type="checkbox" name="js" value="dance"/>跳舞
                <input type="checkbox" name="jq" value="run"/>长跑
                </fieldset>
            </form>
        <!-- 图像按钮 -->
        <form>
            <fieldset>
            <input type="image" src="img/c531d9b6650bdfc43bc4908d53ad09a.jpg"/>
        </form>
        <!-- 提交按钮 -->
        <form>
            <input type="submit" value="登陆"/>
            <!-- 重置按钮 -->
            <input type="reset"/>
            </fieldset>
        </form>
        <!-- 普通按钮 -->
        <form>
            <fieldset>
        <input type="button" value="注册"
            <!-- 文件选择框 -->
            onclick="javascript:alert('注册新用户')"/>
            请上传佐证材料：<input type="file">
        </form>
        <!-- 影藏框 -->
        <form>
            <input type="hidden" name="abc" value="123"/>
        </form>
        <form>
            请输入你的宝贵意见：
            <textarea rows="4" cols="20"></textarea>
            </fieldset>
        </form>
        <!-- 下拉列表框 -->
        <form>
            <fieldset>
            请选择午餐：
            <select multiple>
                <option value="">黄焖鸡</option>
                <option value="">小炒</option>
                <option value="">牛肉粉</option>
                <option value="">酸辣粉</option>
                <option value="">蛋炒饭</option>
                <option value="">盖浇饭</option>
                <option value="">自助餐</option>
            </select>
            </fieldset>
    </form>

标签： css 前端 html5

本文转载自: https://blog.csdn.net/2301_80756005/article/details/142377643
版权归原作者 听Jay入眠 所有，如有侵权，请联系我们删除。