3.1 表格概述
3.1.1 表格的结构
3.1.2 表格的基本
1.table 标记是成对标记,<table>表示表格开始,</table>表示表格结束。
2.caption 标记是成对标记,<caption>表示标题开始,</caption>表示标题结束。使用
caption 标记可以给表格添加标题,该标题应位于table标记与t标记之间的位置。
3.tr(Table Row)标记是成对标记,<tr>表示行开始,</tr>表示行结束。
4.th (Table Heading 表头)标记是成对标记,<th>表示表头开始,</th>表示表头结束。
5.td (Table Data) 标记是成对记号,定义单元格和列,<td>表示开始,</td>表示结束。
3.2表格属性设置
<table border="2px">
<caption>23软件4班学生名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
1.border属性。用于设置边框的粗细,单位是像素。
2.bordercolor 属性。用于设置表格边框的颜色,可以使用rgb函数、十六进制数和颜色英文名称。
3.bordercolorlight 属性。用于设置表格亮边框,对表格左上边框生效。
4.bordercolordark属性。用于设置表格暗边框,对表格右下边框生效。
3.2.2 表格的宽度和高度属性
1.width:其单位可以是长度单位或百分比,用于定义表格的宽度。
2.height:其单位可以是长度单位或百分比,用于定义表格的高度。
3.2.3 表格背景颜色与表格图像属性
<table border="2px" bordercolor="#0000ff">
<caption>23软件4班学生名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
<!--3.2-->
<table width="200px" height="150px">
<caption>23软件4班学生名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
<!--3.2.1-->
<table width="20%" height="20%">
<caption>23软件4班学生名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
<!--3.3-->
<table bgcolor="#aaaaff">
<caption>23软件4班学生名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
<table background="">
<caption>23软件4班学生名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
<table frame="hsides" rules="ail">
<caption>23软件4班学生名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
<table border="2px" cellspacing="10px">
<caption>23软件4班学生名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
<table align="center">
<caption>23软件4班学生名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
<table border="2px" width="200px0" height="150PX">
<caption>23软件4班学生名单</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
1.bgcolor:可以用rgb函数、十六进制、英文颜色名称来设置背景颜色
2.background。设置背景图像,图像的路径可以是绝对路径或相对路径。
3.同时设置背景颜色和背景图像属性时,背景图像会部分或完全覆盖背景颜色。
3.2.4 表格边框样式属性
<!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 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="#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.2.5 表格单元格间距、单元格边距属性
设置表格标记中的cellspacing 属性可以改变表格单元格之间的间隔,使网页中的表格西容稍微松散一些。设置表格标记中的cellpadding属性可以增加表格单元格的内容与内部法框之间的距离。
1.cellspacing:值的单位为像素或百分比,默认值为2px。
2.cellpadding:值的单位为像素或百分比。
3.2.6 表格水平对齐属性
通过设置表格标记的align属性,可以设定表格在水平方向上的对齐方式。对齐方式有
居左、居中、居右3种。
3.2.7 设置表格的(tr)标记行的属性
通过t标记的align属性可以设置行内容的水平对齐方式。水平对齐方式有居左对齐、居中对齐和居右对齐。通过tr标记的valign属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。
3.2.8 设置单元格的属性
3.2.9 表格单元格跨行、跨列属性
3.2.9.1 单元格跨行
使用单元格td标记的rowspan属性可以设置单元格跨行合并。
说明:rowspan 属性可以设置单元格跨行。通过rowspan="n”(n是正整数),可以设置某一单元格跨行,当前行下的n一1行内的单元格数量都需要减少一个,即少定义一个td标记。
3.2.9.2.单元格跨列
使用单元格td标记的colspan属性可以设置单元格跨列合并。
</table>
<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>
3.3 表格嵌套
表格嵌套是一种常用的页面布局方式。利用表格嵌套可以设计比较复杂且美观的页面效果。通常情况下,使用表格嵌套时,表格不宜过多使用,否则会降低网站访问速度。表格嵌套一般采用在单元格内嵌套表格。
3.4 表单
HTML中的表单是网页中最常用的元素,是网站服务器端与客户端之间沟通的桥梁。一个完整的交互表单由两部分组成:一是客户端包含的表单页面,用于填写浏览者进行交互的信息;另一个是服务端的应用程序,用于处理浏览者提交的信息,浏览者在表单中输入信息,然后将这些信息提交给服务器;服务器中的应用程序会对这些信息进行处理响应,这样就完成了浏览者和服务器之间的交互。
3.4.1 表单标记
表单form 标记为成对标记,以<form>开始和</fom>结束。表单定义了采集数据的范围,其所包含的数据内容将被完整地提交给服务器。
3.4.2 定义域和域标题
利用fieldset标记可以在网页上定义域,在表单中使用域可以将表单的相关元素进行分组,fieldset标记将表单内容的一部分打包,生成一组相关表单的字段。当一组表单元素放到fieldset标记内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D效果,或者可创建一个子表单来处理这些元素。legend标记为fieldset标记定义域标题。
<form>
用户名<input type="text" name="user"/>
</form>
<form>
用户名:<input type="text" name="user"/>
密码:<input type="password" name="password"/>
</form>
3.4.3 表单信息输入
表单的主要功能是为用户提供输入信息的接口,将输入信息发送到服务器并等待服务到
响应。表单中输入信息的标记是input标记,可以输入一行信息。input标记是单个标记
1.单行文本输入框
设置input标记的type 属性值为text,可以实现向表单中插入一个单行文本框。在单行文本框中可以输入任意类型的数据,但是输入的数据只能单行显示,不能换行。
1.单行文本输入框
设置input标记的type 属性值为text,可以实现向表单中插入一个单行文本框。在单行文本框中可以输入任意类型的数据,但是输入的数据只能单行显示,不能换行。
2.密码输入框
设置input 标记的type属性值为password,可以实现向表单中插入一个密码输入框。密码输入框中可以输入任意类型的数据,与单行文本输入框有所不同,这些数据不是实时地显示在页面上,而是被显示字符“·”所取代,这样设计可以保障用户输入的密码不被泄露。
3.复选框
设置imput 标记的type 属性值为checkbox,可以实现向表单中插入一个复选框,用用复选框在网页上设置多项选择。
4.单选按钮
设置input 标记的type属性值为radio,可以实现向表单中插入一个单选按钮,用户可利用单选按钮在网页上为某一选择设置多个单选项。
5.图像按钮
设置 input 标记的type属性值为image,可以实现向表单中插入一个图像按钮,用利用图像按钮在网页中插入一张图像,通过src属性加载图像。
6.提交按钮
设置input 标记的type属性值为submit,可以实现向表单中插入一个提交按钮,提交按钮用于将表单的信息提交至服务器进行处理。
7.重置按钮
设置 input 标记的type属性值为reset,可以实现向表单中插入一个重置按钮,重置接用于将表单中所有的输入信息清空,然后让用户可以重新填写。
8.普通按钮
设置input标记的type属性值为button,可以实现向表单中插入一个普通按钮。普通钮在网页设计中非常有用,如果不通过表单提交按钮来处理事件,则可以给普通按钮绑定件代码来实现所需的功能。
9.文件选择框
设置input标记的type属性值为file,可以实现向表单中插入一个文件选择框。
10.隐藏框
设置input 标记的type 属性值为hidden,可以实现向表单中插入一个隐藏框,用户提交表单时,隐藏框的信息也会一起提交到服务器,但隐藏框在网页中是不可见的。
3.4.4 多行文本输入框
textarea标记可以向表单中插入多行文本输入框。多行文本输入框可以用来输入较多的文字信息,而且可以换行,并将这些信息提交到服务器。
<form>
姓名:<input type="text" name="name"/>
性别:
<input type="radio" name="sex" value="male"/>男性
<input type="radio" name="sex" value="female"/>女性
<br/>
爱好:
<input type="checkbox" name="c1" value="sing"/>唱歌
<input type="checkbox" name="c2" value="dance"/>跳舞
<input type="checkbox" name="c3" value="baskrtball"/>篮球
<input type="checkbox" name="c4" value="run"/>长跑
</form>
3.4.5 下拉列表框
下拉列表可以在表单中接收用户的输入。下拉列表通常需要同时使用seleet和option标记来在表单中插入下拉菜单和列表项。
<form>
请选择课程:
<select multiple><form>
<fieldset>
<legend align="center">个人信息</legend>
姓名:<input type="text" name="name"/>
性别:
<input type="radio" name="sex" value="male"/>男性
<input type="radio" name="sex" value="female"/>女性
<br/>
爱好:
<input type="checkbox" name="c1" value="sing"/>唱歌
<input type="checkbox" name="c2" value="dance"/>跳舞
<input type="checkbox" name="c3" value="baskrtball"/>篮球
<input type="checkbox" name="c4" value="run"/>长跑
<br />
请上传佐证文件:<input type="file"/>
</fieldset>
</form>
<option value="">网页</option>
<option value="">java</option>
<option value="">安卓</option>
<option value="">ps</option>
<option value="">网络</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" 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"><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="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"><a href="#">更多 >></a></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="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>