3.1 表格概述
表格是网页中的一个重要容器元素，可包含文字和图像。表格使网页结构紧凑整齐，使网页内容的显示一目了然。表格除了用来显示数据外，还用于搭建网页的结构。几乎所有HTML页面都或多或少地采用了表格。表格以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序地显示在页面上，从而可以呈现出漂亮的页面。表格在网页设计中能将网页分成多个任意的矩形区域。
3.1.1 表格的结构
表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或其他内容。表格中的单元格是行与列的交叉部分，是组成表格的最基本单元。单元格的内容是数据，也称数据单元格。数据单元格可以包含文本、图片、列表、段落、表单、水平线或表格等元素。
3.1.2 表格的基本语法
在HTML中，常用表格主要通过5个标记来构成:<iable>，<caption>，<th>，<tr>和<td>，各标记说明如下所示:
(1)table 标记是成对标记，<table>表示表格开始，</table>表示表格结束。
(2)caption 标记是成对标记，<caption>表示标题开始，</caption>表示标题结束。使用capuon标记可以给表格添加标题，该标题应位于table标记与t标记之间的位置。
(3)tr (Table Row)标记是成对标记，<t>表示行开始，</t>表示行结束。
(4)th (Table Heading表头)标记是成对标记，<t>表示表头开始，</th>表示表头结束，设计表格时，表头常常作为表格的第1行或者第1列，用来对表格单元格的内行说明表头文字内容一般居中、加粗显示。
(5)td (Table Data)标记是成对标记，定义单元格或列。以<td>开始，以</td>结束表头可以用th标记定义，也可以用 ud 标记定义，但<td></td>两标记之间的内容不自动居中、不加粗。
在一个表格中，可以插人多个t标记，表示多行，一组<t></t>标记表示插入一行中、不加粗。一行中可以有多个列，列中的内容可以是文字、数据、图像、超链接、表单元素等。
3.2 表格属性的设置
3.2.1 表格边框属性
设置表格标记中的边框属性可以改变表格的外观。 语法如下所示
<table border= " " bordercolor=" " bordercolorlight =" " bordercolordark = " " >···</table>
(1)border属性。用于设置边框的粗细，单位是像素。
(2)bordercolor属性。用于设置表格边框的颜色，可以使用rgb函数、十六进制数和色英文名称。
(3)bordercoloright属性。用于设置表格亮边框，对表格左上边框生效。
(4)bordercolordark属性。用于设置表格暗边框，对表格右下边框生效。
3.2.2 表格的宽度和高度属性
通过设置 width 属性和 height，属性可以设置表格的宽度和高度
语法：<table width =" height= " " >···</table>
(1)width。其单位可以是长度单位或百分比，用于定义表格的宽度
(2)height。其单位可以是长度单位或百分比，用于定义表格的高度
设置表格标记中的高度与宽度为百分比时，表格会跟随浏览器窗口的改变而自动调整。
简单的表格示例:
<table border="3px" cellspacing="10px"
width ="200px" height="100px"
<frame="hsides" rules="all">
<caption>23软件3班学生名单</caption>
<tr align="center" valign="top">
<tr >
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>爱好</th>
</tr>
<tr align="left">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>喜欢运动</td>
</tr>
</table>
3.2.3 表格背景颜色与表格图像属性
设置表格的bgcolor属性可以改变表格的背景颜色，设置表格的background 属性可以为表格增添背景图像效果，使表格更加美观。
语法:<table bgcolor= " " background = " " >···</table>
(1)bgcolor。可以用rgb数、十六进制、英文颜色名称来设置背景颜色
(2)background。设置背景图像，图像的路径可以是绝对路径或相对路径。
(3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色
3.2.4 表格边框样式属性
语法如下:
<table frame="hsides" rules="all">
3.2.5 表格单元格间距、单元格边距属性
<table border="2px" cellspacing="4px">
<table border="2px" cellpadding="4px">
<table border="2px" cellspacing="10px">
<caption>23软件3班名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>nyh</td>
<td>男</td>
</tr>
</table>
<table border="2px" cellspading="10px">
<caption>23软件3班名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>yyy</td>
<td>男</td>
</tr>
</table>
3.2.6 表格水平对齐属性
<table align="left|center|right">
<table align="left">
<caption>23软件3班名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>www</td>
<td>男</td>
</tr>
</table>
<table align="center">
<caption>23软件3班名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>nyh</td>
<td>男</td>
</tr>
</table>
<table align="right">
<caption>23软件3班名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>yyy</td>
<td>男</td>
</tr>
</table>
3.2.7 设置表格的（tr）标记行的属性
<tr align="left|center|right">
<tr valign="middle|top|bottom">
<!DOCTYPE html>
<html>
<head>
<meta charsei="UTF-8">
<title>设置行内容对齐方式</title>
<style type="texi/ona">
td{
background:#ccffee;
}
</style>
</head>
<body>
<table borlore="1" width="450px" hoight="240p"
alipn="cnter"bordercolor="#6600ff"
<caption><b>学生信息表(设置表行内容对齐方式)</b></caption>
<tr>
<th>姓名</th>
<th>院系名称</th>
<th>班级</th>
</tr>
<tr align="left" valign ="top">
<td>李</td>
<td>信息学院</td>
<td>156165465132</td>
<tr align="center" valign="middle">
<td>王</td>
<td>管理学院</td>
<td>1651654984</td>
<tr align="right" valign="bottom">
<td>张小林</td>
<td>工程学院</td>
<td>1716030115</td>
</tr>
</table>
</body>
</html>
3.2.8 设置单元格的属性
属性值 说明 属性值 说明
align 单元格内容水平对齐 bordercolorlight 单元格的亮边框颜色
valign 单元格内容垂直对齐 bordercolordark 单元格的暗边框颜色
bgcolor 单元格的背景颜色 rowspan 单元格跨行
background 单元格背景图像 colspan 单元格跨列
bordercolor 单元格的边框颜色 width 单元格宽度
height 单元格高度
3.2.9 表格单元格跨行、跨列属性
3.2.9.1 单元格跨行
使用单元格td 标记的 rowspan 属性可以设置单元格跨行合并。
语法：<td rowspan="行数">···</td>
说明：rowspan属性可以设置单元格跨行。通过rowspan=”n”(n是正整数)，可以设置某一单元格跨n行，当前行下的n-1行内的单元格数量都需要减少一个，即少定义一个td 标
3.2.9.2 单元格跨列
使用单元格td标记的colspan属性可以设置单元格跨列合并。
语法：<td colspan="列数">···</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>
说明：colspan属性可以设置单元格跨列。通过colspan="n"(n是正整数)，可以设置某一单元格跨n列，当前行内的单元格数量需要减少n-1个，即删除n-1个td标记。
3.3 表格嵌套
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<title>嵌套表格布局页面</title>
<style>
body{font-size:3бpx;}
</style>
</head>
<body>
<h4 align="center">嵌套表格布局页面</h4>
<table width="660px" border="1" align="center" bordercolor="#000000">
<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="#ffaaff">
<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>结束。表单定义了采集数据的范围，其所包含的数据内容将被完整地提交给服务器
<form>
用户名：<input type="text" name="user"/>
</form>
3.4.2 定义域和域标题
legend标记为fieldset 标记定义域标题。
语法：
<form>
<fieldset>
<legend alig="left I center I right">域标题内容</legend>
</fieldset>
</form>
说明：fieldset标记没有属性，是成对标记。legend标记必须位于fieldset标记内，也是成对标记：有一个对齐align属性，属性值分别为left，center 和right。
<form>
用户名：<input type="text" name="user"/>
密码：<input type="password" name="password"/>
</form>
以下是课上例子参考:
<form>
姓名:<input type ="text" name="name"/>
性别:
<input type="radio" name="sex" value="male" checked/>男性
<input type="radio" name="sex" value="female" />女性
爱好:
<input type="checkbox "name="n1" value="" checked/>唱歌
<input type="checkbox "name="n2" value="">跳舞
<input type="checkbox "name="n3" value="" />篮球
<input type="checkbox "name="n4" value="" />长跑
<br />
佐证材料:
<input type="file" name="file"/>
<br />
<form>
用户名: <input type="text" name=user"" />
密码:<input type="password"name="password"/>
<input type="submit" value="登录" />
<br />
<input type="reset"/>
<input type="button" value="注册" onclick="javascript:alert('注册新用户')" />
<input type="file" name="file"/>
<input type="hidden" name="asd" value="123" />
</form>
<form>
<select name="course" multiple>
<option value=""> 网页</option>
<option value=""> java</option>
<option value=""> 安卓</option>
<option value=""> python</option>
</select>
</form>
请输入您的宝贵意见:
<textarea nsame="info" rows="4" cols="50"></textarea>
</form>
</form>
3.4.3 表单信息输入
3.4.3.1 单行文本输入框
<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>
3.4.3.2 密码输入框
<form>
密码：<input type="password" name="password"/>
</form>
3.4.3.3 复选框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置单元格跨列、跨行属性</title></head><body>
</head>
<body>
<form>
姓名：<input type="text" name="name"/>
爱好：
<input type="checkbox" name="1" value="sing" checked/>唱歌
<input type="checkbox" name="2" value="dance"/>跳舞
<input type="checkbox" name="3" value="basketball"/>打篮球
<!-- checked默认选中，也可以取消 -->
</form>
<form>
姓名：<input type="text" name="name"/>
性别：
<input type="radio" name="sex" value="female" checked/>女性
<input type="radio" name="sex" value="male" checked/>男性
<br/>
爱好：
<input type="checkbox" name="1" value="sing" checked/>唱歌
<input type="checkbox" name="2" value="dance"/>跳舞
<input type="checkbox" name="3" value="basketball"/>打篮球
<br />
</form>
</body>
</html>
</body>
</html>
3.4.3.4 单选按钮
<form>
姓名：<input type="text" name="name"/>
性别：
<input type="radio" name="sex" value="female" checked/>女性
<input type="radio" name="sex" value="male" checked/>男性
<br/>
</form>
3.4.3.5 图像按钮
<input type="image" name="start" src="../img/bg.jpg"/>
3.4.3.6 提交按钮
<input type="file" name="file"/>
3.4.3.7 重置按钮
<input type="submit" name="submit" value="提交"/>
3.4.3.8 普通按钮
<input type="button" name="button" value="注册" onclick="javascript:alert('注册新用户')"/>
3.4.3.9 文件选择框
<input type="file" name="file"/>
3.4.3.10 隐藏框
<input type="hidden" name="abc" value="123"/>
3.4.4 多行文本输入框
请输入您的宝贵意见
<textarea name="info" rows="4" cols="50"></textarea>
3.4.5 下拉列表框
<form>
请选择您的课程:
<select name="course" multiple>
<option value=""> 网页</option>
<option value=""> java</option>
<option value=""> 安卓</option>
<option value=""> python</option>
</select>
</form>
3.5 综合案例——表格与表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>达维工作室---联系我们</title>
<style type="text/css">
.chu{
font-weight:bold;
}
.zi1{
font-weight:微软雅黑;
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="O" 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" 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"> </td>
<td widih="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">地址：广东省江门市xXXXXXXXX<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="zil">关于我们</td>
</tr>
<tr>
<td height="278" valign="top" bgcolor="#FC880D">
<p class="zibai">达维工作室是专业事互联网相关开发的公司。<br/>
专门提供全方们的优质服务和最专业的网站建设方案为企业打造全新电子商务平台。<br/>
达维工作室成立于2014年，已经成为国内著名的网站建设提供商。多年的风雨历程……</p>
<p class="zibai"> </p>
<p class="zibai chu">更多>></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="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"> </p>
<p class ="zibai chu">更多 >></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
