3.1 表格概述
表格是网页中的一个重要容器元素，可包含文字和图像。表格使网页结构紧凑整齐，使网页内容的显示一目了然。表格除了用来显示数据外，还用于搭建网页的结构。
3.1.1 表格的结构
3.1.2 表格的基本语法
(1)<table>表示表格开始，</table>表示表格结束。
(2) <caption>表示标题开始，</caption>表示标题结束。使用 caption 标记可以给表格添加标题，该标题应位于table标记与tr标记之间的位置。
(3) <tr>表示行开始，</tr>表示行结束。
(4) <th>表示表头开始，</th>表示表头结束
（5）<td>定义单元格或列，以<td>开始,以</td>结束，<td></td>两标记之间内容不自动居中，不加粗。
<table >
<caption>23软件2班名单</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 表格边框属性
<table border="3px">
<caption>23软件2班名单</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.2 表格的宽度和高度属性
<table width="200px" height="150px">
<table width="20%" height="20%">
<caption>23软件2班名单</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 表格背景颜色与表格图像属性
<table bgcolor="#0000ff">
<caption>23软件2班名单</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.4 表格边框样式属性
<table frame-"hsides" rules="all">
<caption>23软件2班名单</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.5 表格单元格间距、单元格边距属性
<table cellspacing="10px" border="2px">
<caption>23软件2班名单</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>
<table cellpadding="10px" border="2px">
<caption>23软件2班名单</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.6 表格水平对齐属性
<table align="center">
<caption>23软件2班名单</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>
<table align="left">
<caption>23软件2班名单</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>
<table align="right">
<caption>23软件2班名单</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.7 设置表格的（tr）标记行的属性
<table border="3px" width="200px" height="150px">
<caption>23软件2班名单</caption>
<tr align="left">
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>女</td>
</tr>
<tr align="right">
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
<table border="3px" width="200px" height="150px">
<caption>23软件2班名单</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">
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
3.2.8 设置单元格的属性
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>
说明:colspan属性可以设置单元格跨列。通过colspan="n"(n是正整数)，可以设置某一单元格跨n列，当前行内的单元格数量需要减少n-1个，即删除n-1个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>
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 heigh="100">
<table width="100%" border="1" bordercolor="red">
<tr height="50" alignss="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 表单
3.4.1 表单标记
3.4.2 定义域和域标题
<fieldset>
<legend align="center">个人信息</legend>
姓名：<input type="text" name="name"/>
性别：
<input type="radio" name="sex" value="male" checked/>男性
<input type="radio" name="sex" value="female" />女性
<br />
爱好：
<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" />长跑
<br/>
请选择佐证材料：<input type="file"/>
</fieldset>
<fieldset>
<legend align="center">教学评价</legend>
请选择课程：
<select multiple>
<option name="s" >网页</option>
<option name="s">网络</option>
<option name="s">安卓</option>
<option name="s">Java</option>
<option name="s">ps</option>
</select>
<br/>
请输入您的宝贵意见：
<textarea rows="4" cols="30"></textarea>
</fieldset>
3.4.3 表单信息输入
3.4.3.1 单行文本输入框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<from>
用户名：<input type="text name="user"/>
</from>
</body>
</html>
3.4.3.2 密码输入框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<from>
用户名：<input type="text name="user"/>
密码：<input type="password" name="password"/>
</from>
</body>
</html>
3.4.3.3 复选框
<body>
<from>
姓名：<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" />长跑
</from>
</body>
3.4.3.4 单选按钮
性别：
<input type="radio" name="sex" value="male" checked/>男性
<input type="radio" name="sex" value="female" />女性
3.4.3.5 图像按钮
<input type="image" src="img/start.jpg"/>
3.4.3.6 提交按钮
<input type="submit" value="登录"/>
3.4.3.7 重置按钮
设置input 标记的type属性值为reset，可以实现向表单中插入一个重置按钮，重置按钮用于将表单中所有的输入信息清空，然后让用户可以重新填写。
语法: <input name=" "type=" reset" value=""/>
说明:重置按钮的属性主要有name和value，其属性、取值及说明与提交按钮的相同。
3.4.3.8 普通按钮
<input type="button" value="注册" onclick="javascript:alert('注册新用户')"/>
3.4.3.9 文件选择框
请选择佐证材料：<input type="file"/>
3.4.3.10 隐藏框
<input type="hidden" name="abc" value="123"/>
3.4.4 多行文本输入框
请输入您的宝贵意见：
<textarea rows="4" cols="30"></textarea>
3.4.5 下拉列表框
<body>
<from>
请选择课程：
<select multiple>
<option name="s" >网页</option>
<option name="s">网络</option>
<option name="s">安卓</option>
<option name="s">Java</option>
<option name="s">ps</option>
</select>
<br/>
请输入您的宝贵意见：
<textarea rows="4" cols="30"></textarea>
</from>
</body>
3.5 综合案例——表格与表单
案例一：达维工作室 “联系我们” 子页
<!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" 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 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">地址：广东省江门市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="zi1">关于我们</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"><a href="#">更多></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"> </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>
<from action="" method="post" enctyoe="multipart/from-data" name="form1" id="from1">
<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>
</from>
</body>
</html>
扫一扫
1308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
