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

3.1 表格的概述

HTML（HyperText Markup Language）表格是网页设计中用于展示数据的一种重要元素。它们通过<table>标签来定义，并可以包含行（<tr>）、表头（<th>）、单元格（<td>）等子元素来组织数据。表格不仅限于显示数字或文本数据，还可以用来布局网页内容（尽管现代网页设计倾向于使用CSS进行布局，因为表格布局在响应式设计和可访问性方面存在局限性）

3.1.1 表格的结构

HTML表格的结构主要由<table>元素及其内部的一系列子元素组成，这些子元素共同定义了表格的行、列、表头和数据单元。以下是HTML表格的基本结构概述：

<table> 元素

<table> 元素是创建表格的容器。它包含了表格的所有内容，包括行、列、表头和数据。<table> 元素可以接受一些属性（尽管在HTML5中，许多样式相关的属性如border、cellpadding、cellspacing等已被废弃，推荐使用CSS来控制样式），但大多数情况下，你只需要简单地使用<table>标签来开始和结束表格。

<caption> 元素（可选）

<caption> 元素为表格提供了标题或说明。它应该紧跟在<table>元素之后，位于表格的任何表头或表体内容之前。<caption>的内容默认会居中显示在表格的上方，但你可以使用CSS来改变它的位置或样式。

<thead>, <tbody>, <tfoot> 元素（可选）

这些元素分别用于定义表格的头部、主体和尾部。它们不是必需的，但使用它们可以提高表格的语义化，有助于屏幕阅读器等辅助技术更好地理解表格内容。

<thead>：包含一行或多行表头单元格（<th>），这些单元格通常描述了表格中列的内容。
<tbody>：包含了表格的主体内容，即表格的实际数据行（<tr>）。
<tfoot>：包含了对表格底部数据的总结或注释，如合计行。
<tr> 元素

<tr> 元素代表表格中的一行。它包含了该行的所有单元格，无论是表头单元格（<th>）还是标准数据单元格（<td>）。

<th> 和 <td> 元素

<th> 元素定义表头单元格。这些单元格通常包含列的标题，并且默认会以粗体和居中的方式显示。<th> 元素可以在<thead>中定义，也可以在表格的任何位置定义，用于标识重要的数据或列标题。
<td> 元素定义标准数据单元格。这些单元格包含了表格的实际数据。

3.1.2 表格的基本语法

HTML 表格的基本语法围绕 <table> 元素展开，该元素包含了表格的所有内容。下面是一个详细的HTML表格基本语法示例，展示了如何创建一个简单的表格，包括表头（<th>）、数据行（<tr> 和 <td>）以及可选的表格标题（<caption>

语法：

 浏览效果如图：

3.2 表格属性设置 

在HTML中，表格的属性曾经用于直接控制表格的样式和行为，如边框、间距、宽度等。然而，随着Web标准的演进和CSS的普及，许多原本用于<table>、<tr>、<td>等表格元素的HTML属性已经被废弃或不再推荐使用。现在，推荐使用CSS来控制表格的样式和布局。

尽管如此，了解这些旧的HTML表格属性仍然有助于理解旧代码或进行兼容性处理。以下是一些曾经常用的HTML表格属性及其简要说明（但请注意，这些属性现在应该通过CSS来实现）：

<table> 属性

border：设置表格边框的宽度。现在应使用CSS的border属性。
cellpadding：设置单元格内容与单元格边框之间的空间。现在应使用CSS的padding属性。
cellspacing：设置单元格之间的空间。现在应使用CSS的border-spacing（对于border-collapse: separate;的表格）或完全避免单元格间距（通过border-collapse: collapse;）。
width 和 height：设置表格的宽度和高度。现在推荐使用CSS的width和height属性，因为HTML属性不支持响应式设计。
bgcolor：设置表格的背景颜色。现在应使用CSS的background-color属性。
align：设置表格相对于其容器的对齐方式（左、中、右）。现在应使用CSS的margin、float或Flexbox/Grid布局来实现对齐。
<tr>, <th>, <td> 属性

bgcolor、background：设置行或单元格的背景颜色或背景图像。现在应使用CSS的background-color或background-image属性。
align：设置单元格内内容的水平对齐方式（左、中、右）。现在应使用CSS的text-align属性。
valign：设置单元格内内容的垂直对齐方式（上、中、下）。CSS2.1中没有直接对应的属性，但可以使用vertical-align（注意，它作用于行内元素和表格单元格，而不是整个行）。
colspan：设置单元格应横跨的列数。这个属性仍然有效，因为它与表格的布局结构相关，而不是样式。
rowspan：设置单元格应横跨的行数。同样，这个属性仍然有效。

 3.2.1 表格边框属性

在HTML中，border 属性曾经被用于 <table> 元素上以直接在表格周围和单元格之间添加边框。然而，需要注意的是，随着Web标准的演进和CSS的普及，border 属性（以及其他与表格外观直接相关的HTML属性，如 cellpadding 和 cellspacing）现在被认为是过时的，并且不推荐在新开发的网页中使用。

相反，应该使用CSS来控制表格的边框、间距、填充等样式。这是因为CSS提供了更强大、更灵活的方式来设计网页，并且能够更好地支持响应式设计和无障碍访问。

 语法：

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

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

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

(4) bordercolor 属性。用于设置表格暗边框，对表格有边框生效。

3.2.2 表格的宽度和高度属性

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

语法：

（1）width。其单位可以是长度单位或百分比，用于定义表格的宽度。 

（2）height。其单位可以是长度单位或百分比，用于定义表格的高度。 

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

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

设置表格的bgcolor属性可以改变表格的背景颜色，设置表格的background属性可以为表格增添背景图像效果，使表格更加美观。
语法:
<table bgcolor = " " background= " " >·..</table>
(1)bgcolor。可以用rgb函数、十六进制、英文颜色名称来设置背景颜色
(2)background。设置背景图像，图像的路径可以是绝对路径或相对路径
(3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色

示例：

浏览效果如图：

3.2.4 表格边框样式属性

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

语法：

    frame和rules常见属性值及说明 

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

设置表格标记中的cellspacing属性可以改变表格单元格之间的间隔，使网页中的表格内容稍微松散一些。设置表格标记中的celpadding属性可以增加表格单元格的内容与内部边框之间的距离。
语法:
<table cellspacing=" " cellpadding= " "
</table>
(1)cellspacing。值的单位为像素或百分比，默认值为 2px。
(2)cellpadding。值的单位为像素或百分比。

代码示例：

 浏览效果如图：

 3.2.6 表格水平对齐属性

 通过设置表格标记的align属性,可以设定表格在水平方向上的对齐方式。对齐方式有居左，居中，居右。

语法：

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

说明：align属性的取值可以为left（默认居左）、center（默认居中）和right（居右）。

代码示例：

  浏览效果如图：

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

表格行tr标记的属性用于设置表格某一行的样式，其属性设置如表所示。

属性名称	描述	示例	说明
align	设置行的水平对齐方式	<tr align="center">	行的边框颜色
bgcolor	设置行的背景颜色	<tr bgcolor="#FF0000">	行的暗边框颜色
valign	设置行内内容的垂直对齐方式	<tr valign="middle">	行的亮边框颜色

通过t标记的 align 属性可以设置行内容的水平对齐方式。水平对齐方式有居左对齐、居中对齐和居右对齐。通过t标记的 valign 属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。
语法:、
<table>
    <tr align="left | center | right" valign="top | middle | bottom" >
        <td>......</td>
    </tr>
    .......
</table>

说明:left 表示设置行内容居左对齐;center表示设置行内容居中对齐;right表示设置行内容居右对齐。lop表示设置行内容顶部对齐;middle表示设置行内容居中对齐;bottom表示设置行内容底部对齐。其中行垂直居中对齐属性值与行水平居中对齐属性值不同。

代码示例：

  浏览效果如图：

3.2.8 设置单元格属性

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

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

语法:
<ld rowspan="行数">…</td>
说明:rowspan属性可以设置单元格跨行。通过 rowspan="n"(n是正整数)，可以设置某一单元格跨n行，当前行下的n-1行内的单元格数量都需要减少一个，即少定义一个td 标记。

代码示例：

 浏览效果如图：

3.3 表格嵌套

表格嵌套是一种常用的页面布局方式。利用表格嵌套可以设计比较复杂且美观的页面效通常情况下，使用表格嵌套时，表格不宜过多使用，否则会降低网站访问速度。表格嵌一般采用在单元格内嵌套表格。
代码示例：

 浏览效果如图：

3.4 表单

3.1.4 表单标记

HTML 表单标记（Form Markup）是网页中用于收集用户输入信息的元素集合。它允许用户填写文本、选择选项、上传文件等，并将这些信息提交到服务器进行进一步处理。HTML 表单通过 <form> 元素来创建，并包含一系列的表单控件，如输入字段（<input>）、文本区域（<textarea>）、选择框（<select>）、按钮（<button> 或 <input type="submit">）等。

<form> 元素
<form> 元素是创建表单的容器。它包含多个表单元素，如输入字段、选择框等，以及用于提交表单的按钮。<form> 元素具有几个重要的属性，用于控制表单的行为：

action：定义处理表单数据的服务器端脚本的 URL。当表单提交时，表单数据会发送到该 URL。
method：定义数据发送到服务器的方式（GET 或 POST）。GET 方法通过 URL 发送数据，而 POST 方法通过 HTTP 消息主体发送数据。
enctype：当表单数据需要被编码为 multipart/form-data（通常用于文件上传）时，需要设置此属性。
target：定义提交表单后在何处显示响应。例如，_blank 会在新窗口或标签页中打开响应。
表单控件
<input>：这是最常用的表单控件，用于创建各种输入字段，如文本框、密码框、单选按钮、复选框、提交按钮等。type 属性决定了输入字段的类型。

<textarea>：用于创建多行文本输入字段，用户可以在其中输入任意长度的文本。

<select>：用于创建下拉选择菜单。<option> 元素定义了下拉列表中的选项。

<button>：用于创建按钮。它可以作为提交按钮、重置按钮或普通的按钮。通过 type 属性指定按钮的类型（submit、reset、button）。

代码示例：

   浏览效果如图：

 3.4.2 定义域和域标题

在HTML中，并没有直接称为“定义域”和“域标题”的特定元素或属性，这些概念可能与其他技术或上下文（如网络域名、表单字段的命名范围等）混淆。不过，我可以根据这些概念的一般含义，给出在HTML中可能相关的元素或概念的说明。

1. 网络域名（非HTML直接相关）
网络域名（如 www.example.com）是互联网上的一个地址，用于指向特定的服务器或服务器群。HTML文档本身并不直接定义域名，域名是在Web服务器配置或DNS（域名系统）中设置的。但是，在HTML文档中，你可以通过链接（<a> 标签）或表单（<form> 标签的 action 属性）等元素引用或提交数据到特定的域名。

2. HTML中的“域”（Scope 或 Context）
虽然HTML没有直接定义“域”的元素，但某些元素和属性可以影响内容的上下文或作用域：

<fieldset>：这个元素用于对表单中的相关元素进行分组，它提供了一个“域”的概念，用于逻辑上组织表单控件。
<label>：for 属性将 <label> 元素与表单中的具体输入控件相关联，提高了可访问性，并允许用户点击标签来聚焦或激活关联的输入控件。虽然这不是传统意义上的“域”，但它确实为输入控件定义了一个语义上的关联范围。
3. 域标题（可能是指标题或分组标题）
在HTML中，如果你想要为某个区域或分组提供一个标题，你可以使用以下元素：

<h1> 到 <h6>：这些标题元素用于定义文档的标题结构。虽然它们不直接用于定义“域”的标题，但你可以在一个<fieldset>或任何其他分组元素内使用它们来为该区域提供标题。
<legend>：这个元素用于定义<fieldset>的标题。它是<fieldset>元素内唯一合法的块级元素，用于为表单中的相关输入控件组提供标题。

 3.4.3 表单信息输入

在HTML中，表单（Form）是用户输入数据的界面，它允许用户输入文本、选择选项、上传文件等，并将这些信息提交到服务器进行进一步处理。表单通过<form>元素定义，而用户输入信息则通过一系列的表单控件（如输入框、选择框、按钮等）实现。

代码示例：

 浏览效果如图：

 3.4.4 多行文本输入框

在HTML中，多行文本输入框是通过<textarea>元素来实现的。<textarea>元素允许用户输入任意数量的文本，并且可以跨越多行。与单行文本输入框（<input type="text">）不同，<textarea>提供了更多的灵活性和空间来输入文本。

代码示例：

浏览效果如图：

3.4.5 下拉列表框 

 在HTML中，下拉列表框是通过<select>元素来创建的。<select>元素内部可以包含多个<option>元素，每个<option>元素代表列表中的一个选项。用户可以从这些选项中选择一个。

代码示例：

 浏览效果如图：

3.5 综合案例 

案例1——达维工作室“联系我们”子页

采用嵌套表格制作达维工作室“联系我们”子页

代码如下：<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>达维工作室——————联系我们</title>
        <style type="text/css">
            .chu {
                font-weight: bold;
            }
 
            .zi1 {
                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="0">
                        <tr>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF">
                                <img src="img/logo.jpg" alt="" width="100" height="63" />
                            </td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">网站首页</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">关于我们</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">团队合作</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">相关作品</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">设计理念</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">人物介绍</td>
                            <td width="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">联系我们</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <table width="100%" border="0" cellspacing="20" cellpadding="0">
                        <tr>
                            <td height="318">&nbsp;</td>
                            <td width="280" valign="top">
                                <table width="100%" border="0" cellspacing="0" cellpadding="20">
                                    <tr>
                                        <td height="30" align="center" bgcolor="#FFFFFF" class="zi1">联系我们</td>
                                    </tr>
                                    <tr>
                                        <td height="196" bgcolor="#FFAF03">
                                            <p class="zibai">地址:广东省江门市 XXXXXXXXXX<br />
                                                电话:0750-XXXXXX<br />
                                                传真:0750-XXXXXX<br />
                                                QQ:12345678<br />
                                                电子邮箱:<br />
                                                123@163.com<br />
                                                工作室网站:<br />
                                                www.XXXX.com</p>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td width="280" valign="top">
                                <table width="100%" border="0" cellspacing="0" cellpadding="20">
                                    <tr>
                                        <td height="30" align="center" bgcolor="#FFFFFF" class="zi1">关于我们</td>
                                    </tr>
                                    <tr>
                                        <td height="278" valign="top" bgcolor="#FC880D"><p class="zibai">达维工作室是专业
                                        从事互联网相关开发的公司。<br />
                                        专门提供全方面的优质服务和最专业的网站建设方案为企业打造全新电子商务平台。<br />
                                        达维工作室成立于2014年，已经成为国内著名的网站建设提供商。多年的风雨历程…………</p>
                                        <p class="zibai">&nbsp;</p>
                                        <p class="chu"><a href="#">更多 &gt;&gt;</a></p>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td width="280">
                                <table width="100%" border="0" cellspacing="0" cellpadding="20">
                                    <tr>
                                        <td height="30" align="center" bgcolor="#FFFFFF" class="zi1">团队合作</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">&nbsp;</p>
                                        <p class="zibai chu"><a href="#">更多 &gt;&gt;</a></p></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>

 浏览效果如图：

案例2——用户注册信息

利用表单制作一个“用户注册信息”表

代码如下：<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form action="" method="post" enctype="multipart/form-data" name="forml" id="form1">
            <fieldset>
                <legend>用户注册信息</legend>
                <table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="200" align="right">用户名:</td>
                        <td><input type="text" name="textfield" id="textfield" /></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>
                    <td width=" 200" align=" right">性别 :</td>
                    <td>男 <input type="radio" name="sex" />
            女 <input type="radio" name="sex" /><br />
                    </td>
                    </tr>
                    <tr>
                        <td width="200" align="right">出生年月;</d>
                            <td><input name="texlfield4" type=" text" id="textield4" size=" |2" />年<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>
                                    <option>10</option>
                                    <option>11</option>
                                    <option>12</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 ="fleField" 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=" button" id="button2" value="重置"/>
                                    </td>
                                    </tr>
                </table>
            </fieldset>
        </form>
    </body>
</html>

 浏览效果如图：