3.1 表格概述
3.1.2 表格的基本语法
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<table border="1">
<caption>23软件一班名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
</table>
<body>
</body>
</html>
结果：
3.2 表格属性的设置
代码示例：
<table border="1"width="500px" height="20%">
<caption>专业研讨会日程安排</caption>
<tr>
<td colspan="2">上午</td>
<td colspan="2">下午</td>
</tr>
<tr>
<td>8.00-10.00</td>
<td>8.00-10.00</td>
<td>8.00-10.00</td>
<td>8.00-10.00</td>
</tr>
<tr>
<td rowspan="2">学校领导讲话</td>
<td>大会主题报告</td>
<td>行业企业专题报告</td>
<td rowspan="2">总结报告</td>
</tr>
<tr>
<td>专家报告</td>
<td>分组讨论</td>
</tr>
<tr>
<td colspan="4">全天参观人工智能实训中心</td>
</tr>
</table>
结果：
3.2.1 表格边框属性
语法：
<table border = " " bordercolor=" " bordercolorlight =" " bordercolordark ="">...</table>
（1）border 属性。用于设置边框的粗细，单位是像素。
（2）bordercolor 属性。用于设置表格边框的颜色，可以使用rgb函数、十六进制数和》色英文名称。
（3）bordercolorlight属性。用于设置表格亮边框，对表格左上边框生效。
（4）bordercolordark 属性。用于设置表格暗边框，对表格右下边框生效。
3.2.2 表格的宽度和高度属性 表格背景颜色与表格图像属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<table border="1"width="20%" height="20%" bgcolor="#99cccc" background="img/tian.jpg">
<caption>23软件一班名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
</table>
<body>
</body>
</html>
结果：
3.2.3 表格边框样式属性
3.2.5 表格单元格间距、单元格边距属性
设置表格标记中的cellpadding属性可以增加表格单元格的内容与内容框之间的距离。
语法：
<table cellspacing="" cellpadding=""</table>
(1)cellspacing.值的单位为像素或百分比，默认为2px
（2）cellpadding。值的单位为像素或百分比。
代码：
<style>
strong{
background:#ccffcc;
}
td{
background:#99ccff;
}
</style>
<body>
<b>设置单元格间距和边距</b>
<table width="380"border="4"cellspacing="50px"cellpadding="20px"bgcolor="#9966ff">
<tr>
<td><strong>网页设计</strong></td>
<td><strong>大学体育</strong></td>
</tr>
</tr>
</table>
</body>结果：
3.2.6 表格水平对齐属性
对齐方式有居左、居右、居中
语法：
<table align="left|center|right">....</table>
3.2.7 设置表格的（tr）标记行的属性
通过t标记的align 属性可以设置行内容的水平对齐方式。水平对齐方式有居左对齐、居中对齐和居右对齐。通过tr标记的 valign 属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。
语法：
<table align =" center" >
<tr align = "left I center I right" valign = "top I middle | bottom">
<td>•••</td>
</tr>
3.2.8 设置单元格的属性
3.2.9 表格单元格跨行、跨列属性
1)单元格跨行
使用单元格td标记的rowspan属性可以设置单元格跨行合并。
语法：
<td rowspan="行数" •••</td>
说明：rowspan属性可以设置单元格跨行。通过 rowspan=”n"（n 是正整数），可以置某一单元格跨n行，当前行下的n-1行内的单元格数量都需要减少一个，即少定义-
td标记。
2.）单元格跨列
使用单元格td 标记的 colspan属性可以设置单元格跨列合并。
语法：
<td colspan="列数">•••</td>
说明：colspan 属性可以设置单元格跨列。通过 colspan="n”（n是正整数），可以说某一单元格跨n列，当前行内的单元格数量需要减少n-1个，即删除n-1个td标记。
代码：
<table border="1"width="500px" height="20%">
<caption>专业研讨会日程安排</caption>
<tr>
<td colspan="2">上午</td>
<td colspan="2">下午</td>
</tr>
<tr>
<td>8.00-10.00</td>
<td>8.00-10.00</td>
<td>8.00-10.00</td>
<td>8.00-10.00</td>
</tr>
<tr>
<td rowspan="2">学校领导讲话</td>
<td>大会主题报告</td>
<td>行业企业专题报告</td>
<td rowspan="2">总结报告</td>
</tr>
<tr>
<td>专家报告</td>
<td>分组讨论</td>
</tr>
<tr>
<td colspan="4">全天参观人工智能实训中心</td>
</tr>
</table>结果：
3.3 表格嵌套
语法：
<table>
<tr>
.......
</tr>
<tr>
<td> <!--单元格内嵌表格-->
<table>
<tr>
......
</tr>
</table>
</td>
</tr>
<tr>
.......
</tr>
</table>
3.4 表单
3.4.1 表单标记
表单form标记为成对标记，已<form>开始</form>结束。表单定义了采集数据的范围，其所包括的数据内容将被完整的提交给服务器。
表单标记属性主要有name，action，method，enctype等，其属性、取值及说明如下图所示：
利用嵌套表格布局页面：
<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 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"bordercolo"#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.2 定义域和域标题
3.4.3 表单信息输入、
1.单行文本输入框
设置input标记的type属性值为text，可以实现像表单中插入一个单行文本框。在单行文本框中可以输入任意数据的类型的数据，但是输入的数据只能是单行显示不能换行。
2.密码输入框
设置input标记的type属性值为password，可以实现向表单中插入一个密码输入框
语法：<input name=""type="password"maxlength=""size=""/>
3.复选框
复选框是一种基础控件，也被称为CheckBox，它允许用户同时选中多个选项。复选框通常由一个小框和一个标签组成，用户可以通过点击小框来选择或取消选择某个选项。
4.单选按钮
设置 input 标记的type 属性值为 radio，可以实现向表单中插人一个单选按钮，用户可利用单选按钮在网页上为某一选择设置多个单选项。
语法：
<input name=" " type =" radio" value = ""
checked/>
说明：单选按钮的属性有 name,vale 和I checked 等，其属性、取值及说明与复选框相同。由于单选按钮必须是唯一的，在一组单选按钮中，只能选择一个单选按钮，所以一组单选按钮的所有 name属性值必须相同，value 属性取值应该不同。
还有多种按钮，用法如下代码所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单的使用示例</title>
</head>
<body>
<form name="form1"method="post"action="form_action.jsp"enctype="text/plain">
<h3>输入课程成绩</h3>
姓名：<input type="text"/><br/>
网页设计:<input type="text"/>
数据结构：<input type="text"/><br/><br/>
<input type="submit"value="成绩提交"/>
<input type="reset"value="成绩重置"/><br/><br/>
用户类型:<input type="text"name="usertype"value="学生"readonly/>
<!--密码-->
密码：<input type="password"name="password"/><br/>
<!--复选框与单选框按钮-->
性别：<input type="radio"name="sex"value="female"/>女
<input type="radio"name="sex"value="male"/>男<br/>
爱好:<input type="checkbox"name="n1"value="dance"checked/>跳舞
<input type="checkbox"name="n2"value="sing"/>唱歌
<input type="checkbox"name="n3"value="basketball"/>打篮球<br/>
<!--图像按钮-->
<input type="image"name="start"src="img/5931ad113f2d6dbe8ba2bc93f811d63.png"/><br/><br/>
<!--提交按钮-->
<input type="submit"name="submit"value="登录"/>
<!--重置按钮-->
<input type="reset"name="reset"/>
<!--普通按钮-->
<input type="button"name="button"value="注册"onclick="javascript:alert('注册新用户')"/><br/>
<!--文件选择框-->
<input type="file"name="file"/><br/>
<!--隐藏框-->
<input type="hidden"name="hidden"value="123"/>
请输入您的宝贵意见
<textarea name="info"row="4"cols="50"wrap=""></textarea><br/>
请选择职业规划
<select name="abc">
<option value="s1">前端</option>
<option value="s2">后端</option>
<option value="s3">开发</option>
</select><br/>
</form>
</body>
</html>运行结果如图：
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/第三章综合案例1图片/bj.jpg);
}
</style>
</head>
<body>
<table width="1190" border="0" cellpadding="0"cellspacing="5">
<tr>
<td>
<table width="1190"border="0"clign="center"valign="middle"cellpadding="0"cellspacing="5">
<tr>
<td width="1190"align="center"valign="middle"bgcolor="#FFFFFF">
<img src="img/第三章综合案例1图片/logo.jpg"alt=" "width="100"height="63"/>
</td>
<td width=" 600"align="center"valign="middle"bgcolor="#FFFFFF"class="zi1">网站首页</td>
<td width=" 600"align="center"valign="middle"bgcolor="#FFFFFF"class="zi1">关于我们</td>
<td width=" 600"align="center"valign="middle"bgcolor="#FFFFFF"class="zi1">团队合作</td>
<td width=" 600"align="center"valign="middle"bgcolor="#FFFFFF"class="zi1">相关作品</td>
<td width=" 600"align="center"valign="middle"bgcolor="#FFFFFF"class="zi1">设计理念</td>
<td width=" 600"align="center"valign="middle"bgcolor="#FFFFFF"class="zi1">人物介绍</td>
<td width=" 600"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="30"bgcolor="#FFAF03">
<p class="zibai">地址：广东省江门市XXXXXXX<br/>
电话：0750-XXXXXXXX<br/>
传真：0750-XXXXXXXX<br/>
QQ:12345678<br/>
电子邮箱：<br/>
123@163.com<br/>
工作室网站：<br/>
ww.XXXXX.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 heght="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">更多 >></p >
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>结果：
案例二：
利用表单制作一个“用户注册信息”表
<!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="form1"id="form1">
<fieldset>
<legend>用户注册信息</legend>
<table width="800" 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" height="100"align="right">密码:</td>
<td><input type="password" name="textfield2" id="textfield2"/></td>
</tr>
<tr>
<td width="200" align="right">确认密码:</td>
<td><input type="text" name="textfield3" id="textfield3"/></td>
</tr>
<tr>
<td width="200" align="right">性别：</td>
<td><input type="radio" name="radio" id="radio" value="radio" checked="check"/>
男<img src="img/第三章综合案例1图片/Male.gif" width="22" height="21" align="absmiddle"/>
<input type="radio" name="radio" id="radio2" value="radio2"/>
女<img src="img/第三章综合案例1图片/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>结果：
扫一扫
1405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
