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

3.1 表格概述

3.1.1 表格的结构

3.1.2 表格的基本语法

在 HTML中，常用表格主要通过5个标记来构成:

，和< td>。

<table>
            <caption>23软件二班名单</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>
            <tr>
            <td>3</td>
            <td>噢三</td>
            <td>男</td>
            </tr>
        </table>

3.2 表格属性的设置

3.2.1 表格边框属性

(1)border属性。用于设置边框的粗细，单位是像素。
(2)bonderedlor属性。用于设置表格边框的颜色，可以使用rgb函数、十六进制数和颜色英文名。
(3)bordereolorlight属性。用于设置表格亮边框，对表格左上边框生效。

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

3.2.2 表格的宽度和高度属性

<table width="200" height="150" border="3px">
            <caption>23软件二班名单</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>
            <tr>
            <td>3</td>
            <td>噢三</td>
            <td>男</td>
            </tr>
        </table>

运行结果：

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

设置表信的 bgeolor属性可以改变表格的背景颜色，设置表格的backgound 属性可以为表格增添背景图像效果，使表格更加美观。
语法:
<table bgealor " " baekground=" ">

，
，

(1)bgeolor。可以用rgb函数、十六进制、英文颜色名称来设置背景颜色
(2)baeksmoumd。设置背景图像，图像的路径可以是绝对路径或相对径。
(3)同时设置背景颜色和青景图像属性时，背景图像会部分或完全覆盖背景颜色。

<table bgcolor="#aaaaff">
            <caption>23软件二班名单</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>
            <tr>
            <td>3</td>
            <td>噢三</td>
            <td>男</td>
            </tr>
        </table>

运行结果：

<table width="200" height="150" background="img/aa.jpg">
            <caption>23软件二班名单</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>
            <tr>
            <td>3</td>
            <td>噢三</td>
            <td>男</td>
            </tr>
        </table>

运行结果：

响应式布局
<table **width="20%" height="15%"** background="img/aa.jpg">他会随着页面的缩放而进行表格的缩放，占页面宽20%，高15%。

3.2.4 表格边框样式属性

<table frame="vsides" rules="all">
            <caption>23软件二班名单</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>
            <tr>
            <td>3</td>
            <td>噢三</td>
            <td>男</td>
            </tr>
        </table>

运行结果：

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

间距:

<table cellspacing="15" border="2px">
            <caption>23软件二班名单</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>
            <tr>
            <td>3</td>
            <td>噢三</td>
            <td>男</td>
            </tr>
        </table>

边距：

<table cellpadding="15" border="2px">
            <caption>23软件二班名单</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>
            <tr>
            <td>3</td>
            <td>噢三</td>
            <td>男</td>
            </tr>
        </table>

3.2.6 表格水平对齐属性

<table align="center">
            <caption>23软件二班名单</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>
            <tr>
            <td>3</td>
            <td>噢三</td>
            <td>男</td>
            </tr>
        </table>

运行结果：

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

<table border="2px" width="500px" height="500px">
                <caption>23软件二班名单</caption>
                <tr align="left" valign="top">
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                </tr>
                <tr align="center" valign="middle">
                <td>1</td>
                <td align="left" valign="top">张三</td>
                <td>男</td>
                </tr>
                <tr align="center" valign="bottom">
                <td>2</td>
                <td>零三</td>
                <td>男</td>
                </tr>
                <tr align="right">
                <td>3</td>
                <td>噢三</td>
                <td>男</td>
                </tr>
            </table>

valign="top"->上

valign="middle"->中

valign="bottom"->下

3.2.8 设置单元格的属性

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

3.2.9.1 单元格跨行

上午下午

3.2.9.2 单元格跨列

学校领导讲话

<!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>专业研讨会日程安排</caplion>
    <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 表格嵌套

<!--示例 3.8程序-->
<!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" >
                    <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=" #33f99" >
                                <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 表单

3.4.1 表单标记

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

3.4.2 定义域和域标题

<fieldset>
            <legend align="center">个人信息</legend>

  </fieldset>

3.4.3 表单信息输入

3.4.3.1 单行文本输入框

设置input 标记的 type属性值为text，可以实现向表单中插入一个单行文本框。在单行文本框中可以输入任意类型的数据，但是输入的数据只能单行显示，不能换行。语法:
<input name="" type=" text" maxlength="" size="" value="" readonly/>
说明:单行文本输入框的主要属性有 name，maxlength ,size，value 和 readonly

<form>
    用户名：<input type="text" name="user"/>
</form>

3.4.3.2 密码输入框

设置imnput 标记的type属性值为password,可以实现向表单中插入一个密码输入框。密码输人框中可以输人任意类型的数据，与单行文本输入框有所不同，这些数据不是实时地显示在页面上，而是被显示字符“·”所取代，这样设计可以保障用户输入的密码不被泄露。
语法:
<input name = " " type= " password" maxlength = " " size = " " />
说明:密码输人框的主要属性有name，maxlenth和size，取值及说明与单行文本输入框
相同。

    <form>
        用户名：<input type="text" name="user"/>
        密码:<input type="password" name="password"/>
    </form>

3.4.3.3 复选框

设置imput 标记的type属性值为checkbox，可以实现向表单中插入一个复选框，用户利用复选框在网页上设置多项选择。
语法:
<input name =" " type= " checkbox" value= " " checked/>

        <form>
            姓名：<input type="text" name="name"/>
            爱好：
            <input type="checkbox" name="n1" value="sing" checked/>唱歌
            <input type="checkbox" name="n2" value="dance"/>跳舞
            <input type="checkbox" name="n3" value="basketball"/>篮球
            <input type="checkbox" name="n4" value="run"/>长跑
        </form>

3.4.3.4 单选按钮

设置 imput 标记的type 属性值为radio，可以实现向表单中插入一个单选按钮，用户可利用单选按钮在网页上为某一选择设置多个单选项。
语法:
<input name = " " type = " radio" value =" " checked/>
说明:单选按钮的属性有name，vae和checked等，其属性、取值及说明与复选框相同。由于单选按钮必须是唯一的，在一组单选按钮中，只能选择一个单选按钮，所以一组单选按钮的所有name属性值必须相同，value属性取值应该不同

    <form>
性别：<input type="radio" name="sex" value="male"/>男
        <input type="radio" name="sex" value="female"/>女
    </form>

3.4.3.5 图像按钮

设置impu! 标记的type 属性值为image，可以实现向表单中插入一个图像按钮，用户可利用图像按钮在网页中插人一张图像，通过sre 属性加载图像
语法:
<input name=" " type=" image" src=" " width=" " height=" "/>说明:图像按钮主要属性有name，src，width和height。

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

3.4.3.6 提交按钮

可以实现向表单中插入一个提交按钮，提交按设置 input 标记的 type 属性值为 submit,钮用于将表单的信息提交至服务器进行处理。
语法:
<input name=" " type=" submit" value=" 提交"/>
说明:提交按钮的属性主要有name和value

<form>
<input type="submit"/>
</form>

3.4.3.7 重置按钮

设置 imput 标记的type属性值为reset，可以实现向表单中插人一个重置按钮，用于将表单中所有的输入信息清空，然后让用户可以重新填写。
语法:
说明:重置按钮的属性主要有name和value，其属性、取值及说明与提交按钮的相同,<input name = " " type = " reset" value = " "/>

    <form>
        用户名：<input type="text" name="user"/>
        密码:<input type="password" name="password"/>
        <input type="reset" />
    </form>

3.4.3.8 普通按钮

设置imput 标记的type属性值为button，可以实现向表单中插入一个普通按钮。普通按钮在网页设计中非常有用，如果不通过表单提交按钮来处理事件，则可以给普通按钮绑定事件代码来实现所需的功能。
语法:
<input name= " " type=" button" value=" " onclick =" "/>
说明:普通按钮的属性有name，value和onclick

<form>
    <input type="button" value="注册" onclick="javascript:alert('注册新用户')"/>
</form>

3.4.3.9 文件选择框

<form>
    请选择材料<input type="file" />
</form>

3.4.3.10 隐藏框

设置input 标记的 type 属性值为 hidden，可以实现向表单中插入一个隐藏框，用户提交表单时，隐藏框的信息也会一起提交到服务器，但隐藏框在网页中是不可见的。
10.隐藏框
语法:
<input name = " " type = " hidden" value = " "/>

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

3.4.4 多行文本输入框

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

3.4.5 下拉列表框

        form>
            你的选项是：
            <select multiple>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
            </select>
        </form>

3.5 综合案例——表格与表单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>达维工作室————联系我们</title>
        <style type="text/css">
            .chu{
                font-weight:hold;
            }
            .zil{
                font-family: "微软雅黑";
                font-size: 20px;
                font-weight: bold;
                color: #ED630A;
            }
            .zi2{
                font-family: "微软雅黑";
                font-weight: bold;
                color: #f60;
                text-decoration: underline;
            }
            .zibai{
                font-family: "微软雅黑";
                color: #fff;
            }
            body{
                background-image: url("img/bj.jpg");
            }
        </style>
    </head>
    <body>
        <table width="1190" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <table width="1190" border="0" align="center" cellpadding="0" cellspacing="5">
                        <td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">
                            <img src="img/logo.jpg" alt="" width="100" height="63"/></td>
                        <td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">网站首页</td>
                        <td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">关于我们</td>
                        <td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">团队合作</td>
                        <td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">相关作品</td>
                        <td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">设计理念</td>
                        <td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">人物介绍</td>
                        <td width="100" align="center" valign="middle" bgcolor="#ffffff" class="zil">联系我们</td>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <table width="100%" border="0" cellpadding="0" cellspacing="20">
                        <tr>
                            <td height="318" width="25%">&nbsp</td>
                            <td height="280" valign="top">
                                <table width="100%" border="0" cellpadding="20" cellspacing="0">
                                    <tr>
                                        <td height="30" align="center" bgcolor="#ffffff" class="zil">联系我们</td>
                                    </tr>
                                    <tr>
                                        <td height="196" bgcolor="#ffaf03">
                                            <p class="zibai">地址:广东省江门市XXXXXXXXXXXXX<br />
                                            电话:0750-XXXXXXX<br />
                                            传真:0750-XXXXXXX<br />
                                            QQ:12345678<br />
                                            电子邮箱:<br />
                                            [email protected]<br />
                                            工作室网站:<br />
                                            www.XXXX.com</p >
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td width="280" valign="top">
                                <table width="100%" border="0" cellpadding="20" cellspacing="0">
                                    <tr>
                                        <td height="30" align="center" bgcolor="#ffffff" class="zil">关于我们</td>
                                    </tr>
                                    <tr>
                                        <td height="278" valign="top" bgcolor="#fc880d"><p class="zibai">达维工作室是专业
                                        从事互联网相关开发的公司。<br />
                                        专业提供全方位的优质服务和最专业的网站建设方案为企业打造全新电子商务平台。<br />
                                        达维工作室成立于2014年，已经成为国内著名的王国站建设提供商。多年的风雨历程.....
                                        </p>
                                        <p class="zibai">&nbsp;</p>
                                        <p class="zibai chu"><a href="#">更多 &gt;&gt;</a></p>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td width="280">
                                <table width="100%" border="0" cellspancing="0" cellpadding="20" style="border-spacing: 0px;">
                                    <tr>
                                        <td height="30" align="center" bgcolor="#ffffff" class="zil">团队合作</td>
                                    </tr>
                                    <tr>
                                        <td height="332" valign="top" bgcolor="#66A00e"><p class="zi2">我们的团队：
                                        </p>
                                        <p class="zibai">成员都具有多年的实际设计工作经验，满足客户的国际化需求。
                                        根据每个公司特点，设计出属于客户....</p>
                                        <p class="zi2">我们的承诺：</p>
                                        <p class="zibai">本工作室设计与制作的网站均属于原创、不套用网上任何模板，
                                        根据每个公司特点，设计出属于客户....</p>
                                        <p class="zibai chu"><a href="#">更多&gt;&gt;</a></p>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>用户注册信息</title>
        <style type="text/css">
        fieldset{
            width: 700px;
        }
        </style>
    </head>
    <body>
        <form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
            <fieldset>
                <legend>用户注册</legend>
                <table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                <td><img src="img/aa.jpg" width="600" height="195" /></td>
                  </tr>
                </table>
                <table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="200" align="right">用户名：</td>
                    <td><input name="textfield" type="text" id="textfield" value="请输入手机号码" /></td>
                  </tr>
                  <tr>
                    <td width="200" align="right">密码：</td>
                    <td><input type="password" name="textfield2" id="textfield2" /></td>
                  </tr>
                  <tr>
                    <td width="200" align="right">确认密码：</td>
                    <td><input type="password" name="textfield3" id="textfield3" /></td>
                  </tr>
                  <tr>
                    <td width="200" align="right">性别：</td>
                    <td><input name="radio" type="radio" id="radio" value="radio" checked="checked" />
            男<img src="img/Male.gif" width="22" height="21" align="absmiddle" />
                      <input type="radio" name="radio" id="radio2" value="radio2" />
                女<img src="img/Female.gif" width="23" height="21" align="absmiddle" /></td>
                  </tr>
                  <tr>
                    <td width="200" align="right">出生日期：</td>
                    <td><input name="textfield4" type="text" id="textfield4" size="12" />
                      年
                        <select name="select" id="select">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                          <option>6</option>
                          <option>7</option>
                          <option>8</option>
                          <option>9</option>
                      </select>
                        月
                        <select name="select2" id="select2">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                          <option>6</option>
                          <option>7</option>
                          <option>8</option>
                          <option>9</option>
                        </select>
                        日</td>
                  </tr>
                  <tr>
                    <td width="200" align="right">业余爱好：</td>
                    <td><input type="checkbox" name="checkbox" id="checkbox" />
                      看书
                      <input type="checkbox" name="checkbox2" id="checkbox2" />
                      上网
                      <input type="checkbox" name="checkbox3" id="checkbox3" />
                      打球</td>
                  </tr>
                  <tr>
                    <td width="200" align="right">头像：</td>
                    <td height="25"><input type="file" name="fileField" id="fileField" /></td>
                  </tr>
                  <tr>
                    <td width="200" align="right">意见或建议：</td>
                    <td><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></td>
                  </tr>
                  <tr>
                    <td colspan="2" align="center"><input type="submit" name="button" id="button" value="提交" />
                    <input type="reset" name="button2" id="button2" value="重置" /></td>
                  </tr>
                </table>
            </fieldset>
 
</form>
    </body>
</html>

标签： html

本文转载自: https://blog.csdn.net/2402_83227353/article/details/142374028
版权归原作者云芙所有，如有侵权，请联系我们删除。

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

3.1.2 表格的基本语法

3.4.1 表单标记

发表评论