一、表格概述
在网页设计领域，表格是重要的容器元素。2024 年 9 月 26 日的时代充满创新与活力，表格依旧散发独特魅力。 表格结构似精心构建的建筑。由行和列组成的二维表如建筑框架，为网页内容提供稳定支撑。每行由一个或多个单元格构成，恰似建筑中的房间，放置各种数据及丰富内容。单元格作为行与列交叉部分，是表格最基本单元，承载网页信息核心。 单元格内容丰富多样，如多彩宝库。可包含文本，清晰展现重要信息；容纳图片，增添视觉魅力；有列表，使信息更条理清晰；含段落，阐述详细观点和描述；嵌入表单，实现与用户互动；插入水平线划分区域，或包含其他表格构建复杂网页结构。表格以简洁明了、高效快捷的方式将这些元素有序显示在页面，呈现漂亮且富有吸引力的网页。 表格在网页设计中的作用不可忽视。它能将网页分成多个任意矩形区域，如技艺高超的画家，用线条和色彩划分画布，每部分都有独特用途和魅力。几乎所有 HTML 页面都或多或少采用表格，充分证明其在网页设计中的广泛应用和重要地位。
二、表格的结构
深入探究表格结构，会发现它由行和列巧妙组合成二维表。每一行如贯穿网页的线条，连接不同单元格。单元格作为行与列交叉点，似璀璨明珠镶嵌在网页架构中。 单元格作为表格最基本单元，重要性显著。它能容纳各种元素，简洁文本、精美图片、复杂列表、段落、表单等都可在其中找到合适位置。例如在介绍旅游景点的网页里，单元格可放置景点图片、名称、简介等信息，让游客一目了然了解景点特色。 数据单元格是特殊形式的单元格，主要用于存储和展示数据。数据有数字、文字、日期等各种形式，经表格整齐排列后更加清晰易读。而且数据单元格可包含的元素丰富，为网页设计师提供极大灵活性。比如在财务报表网页中，数据单元格可包含数字数据、货币符号、图表等元素，使财务信息更直观地呈现给用户。
三、表格的基本语法
在 HTML 中，常用表格主要通过五个标记来构成，它们分别是<table>、<caption>、<th>、<tr>和<td>。这些标记就像是构建表格的基石，每一个都有其特定的功能和用途。
<table>标记是成对出现的，<table>表示表格的开始，</table>表示表格的结束。它就像是一个容器，包裹着整个表格的内容，为表格的构建提供了基础框架。
<caption>标记也是成对出现的，<caption>表示标题的开始，</caption>表示标题的结束。使用<caption>标记可以为表格添加一个清晰明了的标题，这个标题应位于<table>标记与<tr>标记之间的位置，如同为表格戴上了一顶醒目的帽子，让用户一眼就能了解表格的主题。
<tr>（Table Row）标记同样是成对出现的，<tr>表示行的开始，</tr>表示行的结束。它就像是表格中的一条条横线，将不同的单元格组合在一起，形成一行行有序的内容。
<th>（Table Heading）标记也是成对的，<th>表示表头的开始，</th>表示表头的结束。在设计表格时，表头常常作为表格的第一行或者第一列，用来对表格单元格的内容进行内行说明。表头文字内容一般居中、加粗显示，这样可以突出表头的重要性，使读者更容易理解表格的结构和内容。
<td>（Table Data）标记也是成对出现的，定义单元格或列。以<td>开始，以</td>结束。表头可以用<th>标记定义，也可以用<td>标记定义，但<td></td>两标记之间的内容不自动居中、不加粗。在一个表格中，可以插入多个<tr>标记，表示多行。一组<tr></tr>标记表示插入一行，一行中可以有多个列，列中的内容可以是文字、数据、图像、超链接、表单元素等，丰富多样的内容为网页设计提供了无限的可能性。
四、表格属性的设置
1. 表格边框属性
设置表格标记中的边框属性可以极大地改变表格的外观，使其更加美观和引人注目。表格边框属性丰富多样，如同为表格披上了一件华丽的外衣。
border属性用于设置边框的粗细，单位是像素。可以根据网页的整体风格和需求，调整边框的粗细程度，使表格更加突出或与背景融为一体。
bordercolor属性用于设置表格边框的颜色，可以使用rgb函数、十六进制数和英文颜色名称。通过选择不同的颜色，可以使表格与网页的主题色相协调，或者突出表格的重要性。
bordercolorlight属性用于设置表格亮边框，对表格左上边框生效。这个属性可以为表格增添立体感，使其更加生动和吸引人。
bordercolordark属性用于设置表格暗边框，对表格右下边框生效。与亮边框属性相结合，营造出更加丰富的视觉效果。
2. 表格的宽度和高度属性
通过设置width属性和height属性，可以轻松地设置表格的宽度和高度。width的单位可以是长度单位或百分比，用于定义表格的宽度。当设置为百分比时，表格会跟随浏览器窗口的改变而自动调整，使网页在不同的设备和屏幕尺寸上都能保持良好的显示效果。height属性同理，用于定义表格的高度。
3. 表格背景颜色与表格图像属性
设置表格的bgcolor属性可以改变表格的背景颜色，为表格增添一抹独特的色彩。可以用rgb数、十六进制、英文颜色名称来设置背景颜色，满足不同的设计需求。
设置表格的background属性可以为表格增添背景图像效果，使表格更加美观。图像的路径可以是绝对路径或相对路径，根据网页的结构和需求进行选择。同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色，创造出更加丰富的视觉层次。
4. 表格边框样式属性
<table frame="hsides" rules="all">这个属性组合可以进一步调整表格的边框样式，使表格更加符合网页的设计风格。
5. 表格单元格间距、单元格边距属性
<table border="2px" cellspacing="4px">用于设置表格单元格之间的间距，使单元格之间有一定的空间，避免内容过于拥挤。<table border="2px" cellpadding="4px">用于设置单元格边距，即单元格内容与边框之间的距离，使内容更加清晰易读。
6. 表格水平对齐属性
<table align="left|center|right">可以设置表格在网页中的水平对齐方式，使表格与其他元素更好地协调搭配。
7. 设置表格的（tr）标记行的属性
<tr align="left|center|right">用于设置表格行中内容的水平对齐方式。<tr valign="middle|top|bottom">用于设置表格行中内容的垂直对齐方式，使表格内容更加整齐美观。
8. 设置单元格的属性
单元格的属性丰富多样，可以满足不同的设计需求。align属性用于设置单元格内容的水平对齐方式；valign属性用于设置单元格内容的垂直对齐方式；bgcolor属性用于设置单元格的背景颜色；rowspan属性用于设置单元格跨行；colspan属性用于设置单元格跨列；background属性用于设置单元格背景图像；bordercolor属性用于设置单元格的边框颜色；width属性用于设置单元格宽度；height属性用于设置单元格高度。
9. 表格单元格跨行、跨列属性
使用单元格<td>标记的rowspan属性可以设置单元格跨行合并。语法为<td rowspan="行数">···</td>。通过设置rowspan属性，可以使某一单元格跨越多行，当前行下的n - 1行内的单元格数量都需要减少一个，即少定义一个<td>标记。
使用单元格<td>标记的colspan属性可以设置单元格跨列合并。语法为<td colspan="列数">···</td>。通过设置colspan属性，可以使某一单元格跨越多列，当前行内的单元格数量需要减少n - 1个，即删除n - 1个<td>标记。
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/new_file.css" />
</head>
<body>
<table border="1" style="width: 800px; height: 500px; cellspacing=50px;">
<tr>
<td colspan="2"> 上午</td>
<td colspan="2"> 下午</td>
</tr>
<tr>
<td>8-10</td>
<td>10-12</td>
<td>14-16</td>
<td>16-18</td>
</tr>
<tr>
<td rowspan="2">KO</td>
<td>大会主题报告</td>
<td>企业专题报告</td>
<td rowspan="2">总结</td>
</tr>
<tr>
<td>专家报告</td>
<td>分组讨论</td>
</tr>
<tr>
<td colspan="4">人工智能实训中心</td>
</tr>
</table>
</body>
</html>
运行结果：
五、表格嵌套
表格嵌套是一种高级的网页设计技术，它可以为网页布局带来更多的灵活性和创意。以下是一个表格嵌套的示例代码：
<!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="#338800">
<tr>
<td height="100">
<table width="100%" border="1" bordercolor="orange">
<tr height="50" align="center">
<td rowspan="2" width="100">标识</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="#44446f">
<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>
运行结果：
表格嵌套可以实现复杂的网页布局，使网页设计师能够更好地控制页面的各个部分。通过合理地运用表格嵌套，可以创建出美观、实用的网页界面，提升用户的浏览体验。
六、表单
在 HTML 中，表单是网页中最常用的元素之一，它是网站服务器端与客户端之间沟通的重要桥梁。一个完整的交互表单由两部分组成：一是客户端包含的表单页面，用于填写浏览者进行交互的信息；另一个是服务端的应用程序，用于处理浏览者提交的信息。
浏览者在表单中输入信息，然后将这些信息提交给服务器。服务器中的应用程序会对这些信息进行处理响应，这样就完成了浏览者和服务器之间的交互。表单的作用就像是一座桥梁，连接了用户和服务器，实现了信息的传递和交流。
1. 表单标记
表单form标记为成对出现，以<form>开始和</form>结束。表单定义了采集数据的范围，其所包含的数据内容将被完整地提交给服务器。
2. 定义域和域标题
以下是一个示例代码：
<form name="form1" method="post' action="form_maction.jsp" enctype="text/plain">
<fieldset>
姓名:<input type="text" name="name"/>性别:
<legend>个人信息</legend>
<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="c2"value="dance"/>跳舞
<input type="checkbox"name="c3" value="basketball"/>打篮球
<input type="checkbox'name='c4"value="score"/>踢足球
<input type="checkbox" name="c5" value="run"/>长跑
<br/>
<input ="file" name="file"/><input>
</fieldset>
<fieldset>
<legend>其他信息</legend>
请输入您的宝贵意见:
<textarea name="info" rows="4" cols="50"></textarea>
<br/>
请选择职业规划:
<select name="abc" multiple>
<option value="s1">前端</option>
<option value="s2">后端</option>
<option value="s3">运维</option>
<option value="s4">测试</option>
</select>
</fieldset>
</form>
运行结果:
在这个示例中，<form>标记定义了一个表单，name属性用于给表单命名，method属性指定了表单数据的提交方式，action属性指定了表单数据提交的目标地址，enctype属性指定了表单数据的编码方式。
<fieldset>标记用于将表单中的相关元素分组，<legend>标记用于为<fieldset>标记定义标题。在这个示例中，有两个<fieldset>标记，分别用于收集个人信息和其他信息。
3. 表单信息输入
- 单行文本输入框：
<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
用户名：<input type="text" name="user"/>
用户类型：<input type="text" name="usertype" value="普通用户" readonly/>
</form>
在这个示例中，<input type="text">标记用于创建一个单行文本输入框，name属性用于给输入框命名，value属性用于设置输入框的默认值，readonly属性用于设置输入框为只读状态。
3.1密码输入框：
<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
密码：<input type="password" name="password"/>
</form>
`<input type="password">`标记用于创建一个密码输入框，用户输入的内容将以星号或圆点显示，以保护用户的隐私。
3.2复选框：
<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
实例：
<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="score"/>踢足球
<input type="checkbox" name="n5" value="run"/>长跑
</form>
<i0nput type="checkbox">标记用于创建一个复选框，用户可以选择多个选项。name属性用于给复选框命名，value属性用于设置复选框被选中时提交的值，checked属性用于设置复选框为默认选中状态。
3.3单选按钮：
<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
性别：
<input type="radio" name="sex" value="male"/ checked>男
<input type="radio" name="sex" value="female"/>女<br/>
</form>
<input type="radio">标记用于创建一个单选按钮，用户只能选择其中一个选项。name属性用于给单选按钮组命名，value属性用于设置单选按钮被选中时提交的值，checked属性用于设置单选按钮为默认选中状态。
3.4图像按钮：
以下图为插入图片文件设置为按钮并命名为`kaishi.png`保存在`img`文件夹中。
设置图片为按钮的示例代码如下：
<input type="image" name="start" src="img/kaishi.jpg"/>
3.5提交按钮：
<input type="submit" name="submit" value="提交"/>
<input type="submit">标记用于创建一个提交按钮，用户点击该按钮时，表单数据将被提交给服务器。name属性用于给提交按钮命名，value属性用于设置提交按钮上显示的文本。
3.6重置按钮：
<input type="reset" name="reset"/>
<input type="reset">标记用于创建一个重置按钮，用户点击该按钮时，表单中的所有输入框将被重置为初始状态。name属性用于给重置按钮命名。
3.7普通按钮：
<input type="button" name="button" value="注册" onclick="javascript:alert('注册新用户')"/>
<input type="button">标记用于创建一个普通按钮，可通过onclick属性绑定 JavaScript 函数来实现特定的操作。例如：<input type="button" name="button" value="注册" οnclick="javascript:alert('注册新用户')"/>，当用户点击这个按钮时，会弹出一个提示框显示“注册新用户”。
3.8文件选择框：
<input type="file" name="file"/>
<input type="file">标记用于创建一个文件选择框，用户可以通过它选择本地文件进行上传。
3.9隐藏框：
<input type="hidden" name="abc" value="123"/>
`<input type="hidden">`标记用于创建一个隐藏框，它在页面上不可见，但可以存储一些需要随表单一起提交的数据，比如表单的唯一标识或者一些后台处理需要的参数。
4. 多行文本输入框
“请输入您的宝贵意见”
<textarea name="info" rows="4" cols="50"></textarea>
<textarea>标记用于创建一个多行文本输入框，name属性用于给输入框命名，rows属性用于设置输入框的行数，cols属性用于设置输入框的列数。
5. 下拉列表框
<form name="form1" method="post" action="form_action.jsp" enctype="text/plain">
<br/>
请选择课程：
<select name="job">
<option value="s1">前端</option>
<option value="s2">后端</option>
<option value="s3">运维</option>
<option value="s4">测试</option>
</select>
</form>
<select>标记用于创建一个下拉列表框，<option>标记用于在下拉列表中添加选项。name属性用于给下拉列表框命名，value属性用于设置选项被选中时提交的值。
七、综合案例——表格与表单
- 案例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="5">
<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" calss="zil">网站首页</td>
<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">关于我们</td>
<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">团队合作</td>
<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">相关作品</td>
<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">设计理念</td>
<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">人物介绍</td>
<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">联系我们</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="20" cellpadding="0">
<tr>
<td height="318"> </td>
<td width="280" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="20">
<tr>
<td height="30" aligh="center" bgcolor="#FFFFFF" class="zi1">联系我们</td>
</tr>
<tr>
<td height="196" bgcolor="#FFAF03">
<p class="zibai">地址:广东省江门市XXXXXXXXX<br />
电话:0750-XXXXXX<br />
传真:0750-XXXXXX<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" 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 calss="zibai"> </p>
<p calss="zibai chu"><a href="#">更多>></a></p>
</td>
</tr>
</table>
</td>
<td width="280">
<table widht="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"> </p>
<p class="zibai chu"><a href="#">更多>></a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
运行结果：
这个示例中，通过多个表格的嵌套，构建了一个包含导航栏、联系我们、关于我们和团队合作等板块的网页布局。不同的表格用于划分不同的区域，设置不同的背景颜色和样式，使网页内容更加清晰易读，同时也增加了网页的美观度。
- 案例2----用户注册信息：
以下是另一个综合案例，展示了一个用户注册信息表单的设计：
<!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="forml" id="forml">
<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>
<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>
<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="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>
运行结果：
这个表单通过表格的布局，将各个输入项整齐地排列在页面上。用户可以输入用户名、密码、确认密码、选择性别、输入出生年月、选择业余爱好、上传相片以及输入意见或建议。表单的提交和重置按钮位于表格的底部，方便用户操作。通过这个表单，网站可以收集用户的注册信息，为用户提供个性化的服务。
总之，表格和表单在网页设计中起着重要的作用。通过合理地运用表格和表单，可以创建出美观、实用的网页界面，提升用户的浏览体验和交互效果。
版权归原作者 KO想偷懒 所有， 如有侵权，请联系我们删除。