第3章 表格布局与表单交互
3.1 表格概述
表格式网页中的一个重要容器元素，可包含文字和图像。表格使网页结构紧凑整齐，使网页内容的显示一目了然。表格除了用来显示数据外，还用于搭建网页的结构。几乎所有HTML页面都或多或少地采用了表格。表格除了以简洁明了和高效快捷的方式将图片，文本，数据和表单的元素有序地显示在页面上，从而可以呈现出漂亮的页面。表格在网页设计中能将网页分成多个任意的矩形区域。
3.1.1 表格的结构
表格是由行和列组成的二维表，而每行又由一个或多或少个单元格组成，用于放置数据或其他内容。表格中的单元格是行与列的交叉部分，是组成表格的最基本单元。单元格的内容是数据，也称数据单元格。数据单元格可以包含文本、图片、列表、段落、表单、水平线或表格等元素。表格中的内容按照相应的行或列进行分类和显示。
3.1.2 表格的基本语法
<table (创建表格） background=（设置背景图片） bgcolor=（背景颜色）width=（宽度）height（高度）（高度、宽度加上%成为百分比放大缩小）px>
<caption>表格标题<caption>
<tr> <!--表格的行都用 tr -->
<th> 序号 <th> （表头）
<tr>
<tr>
<td>1<td> （内容）
<tr>
3.2表格属性设置
表格是网页文件中布局的重要元素，制作网页的过程中常常需要对网页中的表格做一些设置，对表格的设置实质是对表格标记属性的一些设置。
3.2.1表格边框属性
3.2.3 表格背景颜色与背景图像属性
（内容方式都放在3.1.2表格的基本语法里）
3.2.4表格边框样式属性
<table frame=" " rules=" ">
3.2.5 表格单元格间距、单元格边距属性
<table cellspacing=（单元格的间距）
cellpadding=（单元格边距）
3.2.6 表格水平对齐属性
左右对齐方式
align 取值（ center居中 right 居右 left居左）
align="center"
上下对齐方式
valign 取值（top middle bottom）
valign="top"
valign="middle"
valign="bottom"
单元格对齐方式
<tr align="right">
<td>1</td>
<td align="right" valign="bottom" （在单元格里还可以设置背景颜色等）>鲲 </td>
<td>鲲之大</td>
</tr>
3.2.9 表单元格跨行、跨列属性
rowspan 可以设置单元格跨行
colspan 可以设置单元格跨列
rowspan="2" （代表垮2行）
rowspan="2" （代表垮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>专业研讨会日程安排</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:30px;}
</style>
</head>
<body>
<h4 align="center">嵌套表格布局页面</h4>
<table width="660px" border="1" align="center" bordercolor="#3333ff">
<tr>
<td height="100">
<table width="100%" border="1" bordercolor="red">
<tr heigth="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="#33ff99">
<tr align="center">
<td height="300" width="30%">左栏木</td>
<td height="300" width="30%">正文内容</td>
</tr>
</table>
</td>
</tr>
<tr align="center">
<td heigth="100">版权信息</td>
</tr>
</table>
</body>
</html>
3.4 表单
表单标记 定义域和域标题 表单信息输入
<form> <!--单行文本输入框-->
用户名：<input type="text" name="user"/>
<!--密码输入框-->
密码：<input type="password" name="password"/>
<br />
姓名：
<input type="text" name="name"/>
<br />
性别：
<!--radio单选按钮-->
<input type="radio" name="sex" value="man"checked/>男性
<!--checked默认选择这一项-->
<input type="radio" name="sex" value="female"/>女性
<br />
爱好： <!--checkbox复选框-->
<input type="checkbox" name="n1" value="sing"/>唱歌 <!--规定value的值-->
<input type="checkbox" name="n2" value="dance"/>跳舞
<input type="checkbox" name="n3" value="basketall"/>游泳
<input type="checkbox" name="n3" value="run"/>跑步
<br />
<!--image图像按钮-->
<input type="image" src="img/123.jpg"/>
<br />
<input type="submit" value="登入"/> <!--submit提交的按钮-->
<input type="reset"/><!--reset重置按钮-->
<input type="button" value="注册" οnclick="javascript:alert('注册新用户')"/>
<!--button普通按钮（空白的）用value规定值-->
<!--onclick 绑定事件代码（提示框这种)-->
<br />
<!--文件选择框 file-->
请选择佐证材料<input type="file"/>
<br />
<!--隐藏框 hidden-->
<input type="hidden" name="abc" value="123"/>
<br />
<!--多行文本输入框 textarea rows代表几行，cols代表一行的字数-->
请输入您宝贵的意见：
<br />
<textarea rows="5" cols="30"></textarea>
<br />
<!--下拉列表框 select <option>某某<option>-->
请选择课程:
<select> <!-- 加入 multiple变成多选 -->
<option>网页</option>
<option>PS</option>
<option>网络</option>
<option>安卓</option>
</select>
<br />
请选择课程:
<select multiple>
<option>网页</option>
<option>PS</option>
<option>网络</option>
<option>安卓</option>
<option>java</option>
</select>
</form>
<form> <!--定义域和域标题-->
<fieldset>
<legend>个人信息</legend> <!--域标题-->
姓名：
<input type="text" name="name"/>
<br />
性别：
<input type="radio" name="sex" value="man"checked/>男性
<input type="radio" name="sex" value="female"/>女性
</fieldset>
</form>
综合案例-表格与表单
案例1-达维工作室“练习我们”子页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 设置标题 -->
<title>达维工作室————联系我们</title>
<!-- 以文本内容定义css格式（页面样式），后面方便调用 -->
<style type="text/css">
.chu{
/* bold:加粗 */
font-weight: bold;
}
.zi1{
font-family: "微软雅黑";
font-size: 20px;
font-weight: bold;
color:#ED630A;
}
.zi2{
font-family: "微软雅黑";
font-weight: bold;
color:#F60;
/* underline:文本下方添加一条水平线 */
text-decoration: underline;
}
.zibai{
font-family: "微软雅黑";
color: #FFF;
}
boby{
background-image: url(img/bj.jpg);
}
</style>
</head>
<body background="img/bj.jpg">
<table width="1190" border="0px" cellpadding="0px" cellspacing="0px">
<tr>
<td>
<!-- width：设置宽度 表格的间距：cellspacing属性（格子与格子之间的距离）、边距：cellpadding（表格的内容与边框的距离） -->
<table width="1190" border="0px" cellpadding="0px" cellspacing="5px">
<tr>
<td widh="100" align="center" valign="middle" bgcolor="#FFFFFF"><img src="img/logo.jpg" alt="" width="100" height="63"/></td>
<td widh="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">网站首页</td>
<td widh="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">关于我们</td>
<td widh="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">团队合作</td>
<td widh="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">相关作品</td>
<td widh="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">设计理念</td>
<td widh="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">人物介绍</td>
<td widh="100" align="center" valign="middle" bgcolor="#FFFFFF" class="zi1">联系我们</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0px" cellpadding="0px" cellspacing="20px">
<tr>
<!-- ' ',表示空格 -->
<td height="318"> </td>
<td width="280" valign="top">
<table width="100%" border="0px" cellpadding="20px" cellspacing="0px">
<tr>
<td widh="30" align="center" bgcolor="#FFFFFF" class="zi1">联系我们</td>
</tr>
<tr>
<td height="196" bgcolor="#FFAF03">
<p class="zibai">
地址：广东省江门市XXXXXXXX<br />
电话：0750-XXXXXX<br />
传真：0750-XXXXXX<br />
QQ：123456789<br />
电子邮箱：<br />
123@163.com<br />
工作室网站：<br />
www.XXX.com
</p>
</td>
</tr>
</table>
</td>
<td width="280" valign="top">
<table width="100%" border="0px" cellpadding="20px" cellspacing="0px">
<tr>
<td widh="100" align="center" bgcolor="#FFFFFF" class="zi1">关于我们</td>
</tr>
<tr>
<td heigth="278" valign="top" bgcolor="#FC880D">
<p>
达维工作室是专业从事互联网相关开发的公司。<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="0px" cellpadding="20px" cellspacing="0px">
<tr>
<td widh="100" 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">更多>></p >
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
案例2-用户注册信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用户注册信息</title>
<style>
fieldset{
width: 700px;
}
</style>
</head>
<body>
<!-- 设置表单 -->
<form>
<fieldset>
<legend>用户注册信息</legend>
<table width="600px" border="0" align="center" cellpaddding="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 type="radio" name="radio" id="radio" value="radio" checked/>男
<input type="radio" name="radio" id="radio2" value="radio2"/>女
</td>
</tr>
<tr>
<td width="200" align="right">出生年月：</td>
<td>
<input type="text" name="textfield4" id="textfield4" size="12px"/> 年
<!-- select属性：设置下拉列表 -->
<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" value="checkbox"/>看书
<input type="checkbox" name="checkbox2" value="checkbox2"/>上网
<input type="checkbox" name="checkbox3" value="checkbox3"/>打球
</td>
</tr>
<tr>
<td width="200" align="right">相片：</td>
<!-- 设置文件选择框 -->
<td><input type="file"/></td>
</tr>
<tr>
<td width="200" align="right">意见或建议：</td>
<td><textarea rows="4" cols="40"></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>
扫一扫
1023
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
