3.1 表格概述
表格是网页中的一个重要容器，可包含文字和图像，表格使网页结构紧凑整齐，使网页内容的显示一目了然
3.1.1 表格的结构
表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或其他内容
3.1.2 表格的基本语法
| 标记形式 | 说明 |
| <table> | 表格标记 |
| <caption> | 表格标题标记 |
| <th> | 会默认加粗）表头标记 |
| <tr> | （是表格的每一行，其中包括<th>和<td> |
| <td> | 表格的列标记 |
3.2 表格属性的设置
3.2.1 表格边框属性
设置表格中的边框属性可以改变表格的外观
语法：
<table border=" " bordercolor=" " bordercolorlight=" " bordercolordack=" ">…</table>
属性：
border：用于设置边框的粗细，单位是像素
bordercolor:用于设置表格边框的颜色，可以使用rgb函数、十六进制数和颜色英文名称来设置
bordercolorlight：用于设置表格亮边框，对表格左上边框生效
bordercolordack：用于设置表格暗边框，对表格右下边框生效
3.2.2 表格的宽度和高度属性
语法：
<table width=" " height=" ">…</table>
width:用于定义表格宽度，单位可以是长度单位或百分比
height：用于定义表格长度，单位可以是长度单位或百分比
3.2.3 表格背景颜色与背景图属性
语法：
<table bgcolor=" " background=" ">…<table/>
属性：
bgcolor:用于设置表格的背景颜色，可以使用rgb函数、十六进制数和颜色英文名称来设置
background:设置背景图像，图像的路径可以是绝对路径和相对路径
注意：同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色
3.2.4 表格边框样式属性
| frame属性 | 说明 | rules属性值 | 说明 |
|---|---|---|---|
| above | 显示上边框 | all | 显示所有内部边框 |
| below | 显示下边框 | none | 不显示内部边框 |
| hsides | 显示上下边框 | rows | 仅显示行边框 |
| vsides | 显示左右边框 | cols | 仅显示列边框 |
| lhs | 显示左边框 | groups | 显示介于行列间边框 |
| rhs | 显示右边框 | border | 显示上下、左右边框 |
| void | 不显示边框 |
frame：显示外边框
rules：显示内部边框
3.2.5 表格单元格间距、单元格边距属性
单元格间距:格子和格子之间的距离
边距：单元格的内容和单元格边框之间的距离
3.2.6 表格水平对齐属性
通过表格标记的align属性设定，由居中、右对齐、左对齐三种
3.2.7 设置表格<tr>标记属性
表格行tr标记的属性用于设置表格某一行样式
3.2.8 设置单元格属性
| 属性值 | 说明 | 属性值 | 说明 |
| align | 单元格内容水平对齐 | bordercolorlight | 单元格的亮边框颜色 |
| valign | 单元格内容垂直对齐 | bordercolordack | 单元格的暗边框颜色 |
| bgcolor | 单元格的背景颜色 | rowspan | 单元格跨行 |
| background | 单元格的背景图像 | colspan | 单元格跨列 |
| bordercolor | 单元格的边框颜色 | width | 单元格高度 |
| height | 单元格高度 |
3.2.9 表格单元格跨行、跨列属性
<!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 height="100">
<table width="100%" border="1" bordercolor="red">
<tr height="50" align="center">
<td rowspan="2" width="100">logo</td>
<td>广告条</td>
</tr>
</table>
</td>
</tr>
<tr>
<td heigth="300">
<table width="100%" border="1" bordercolor="#33ff99">
<tr align="center">
<td height="300" width="30%">左栏目</td>
<td height="300" widht="70%">正文内容</td>
</tr>
</table>
</td>
</tr>
<tr align="center">
<td height="100">版权信息</td>
</tr>
</table>
</body>
</html>
3.4 表单
3.4.1 表单标记
表单form标记为成对标记，表单定义了采集数据的范围，其所包含的数据内容将被完整的提交给服务器
3.4.2 定义域和域标题
利用fieldset标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分组，fieldes标记将表单内容一部分打包，成成一组相关表单字段
域标题标记：legend标记必须位于fieldset标记内，是成对标记
3.4.3 表单信息输入
语法：
<input type="text " name=" " maxlength=" " size=" " value=" " readonly/>
属性：
text:单行文本输入框，只能输入一行
name: 定义input元素的名称
maxlength： 规定输入字段中的字符最大长度
size：定义输入字段的宽度
value：规定input元素的默认值
readonly：规定文本框中的内容只读，不能编辑和修改
1.单行文本框输入
设置input标记的type属性值，文本框中可以输入任意类型的数据，但是输入的数据只能单行显示
2.密码输入框
语法：
<input type="password" name=" "/>
设置input标记的type为password，可以实现向表单中插入一个密码输入框，密码框中可以输入任意类型的数据，且这些数据不是实时显示在页面中的，而是会被字符“.”所取代
3.复选框
<input type="checkbox" name=" " value=" " />
<input type="checkbox" name=" " value=" " checkbox/>
属性：
value：控制提交按钮中的文字
checkbox: 为复选框提前设置默认值
4.单选按钮
语法：
<input type=" " name=" " value=" " checkbox/>
其属性、取值、说明与复选框相同。由于单选按钮必须是唯一的，在一组单选按钮中，只能选择一个单选按钮，所以一组单选按钮的所有name属性值必须相同，value
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 多行文本输入框
多行输入文本框texyarea标记是成对标记
属性：
rows：规定文本区内的可见行数
cols：规定文本区内的可见宽度
3.4.5 下拉列表框
下拉列表通常需要同时使用select（成对标记）和option（单个标记）标记再表单中插入下列菜单和列表项
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" align="center" 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" valing="middle" bgcolor="#FFFFFF" class="zi1">网站首页</td>
<td width="100" align="center" valing="middle" bgcolor="#FFFFFF" class="zi1">关于我们</td>
<td width="100" align="center" valing="middle" bgcolor="#FFFFFF" class="zi1">团队合作</td>
<td width="100" align="center" valing="middle" bgcolor="#FFFFFF" class="zi1">相关作品</td>
<td width="100" align="center" valing="middle" bgcolor="#FFFFFF" class="zi1">设计理念</td>
<td width="100" align="center" valing="middle" bgcolor="#FFFFFF" class="zi1">人物介绍</td>
<td width="100" align="center" valing="middle" bgcolor="#FFFFFF" class="zi1">联系我们</td>
</tr>
</table>
</td>
</tr>
<tr>
<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">地址：广东省江门市XXXXXX<br/>
电话：0750-XXXXXX<br />
传真：1750-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>
案例二 ———— 用户注册信息
利用表单注册一个“用户注册信息”表
<!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" cellpading="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" value="radio" checked="checked"/>
男<img src="img/Male.gif" width="22" height="21" align="absmiddle"/>
<input type="radio" name="radio" id="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 winth="200" align="right">业余爱好：</td>
<td>
<input type="checkbox" name="checkbox" id="checkbox"/>看书
<input type="checkbox" name="checkbox" id="checkbox2"/>上网
<input type="checkbox" name="checkbox" 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>
第三章总结代码及运行结果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table background="img/school.jpg">
<caption>设置了图片背景的表格</caption>
<tr>
<th>序号</th>
<th>性别</th>
<th>姓名</th>
</tr>
<tr>
<td>1</td><!--<td>控制行数-->
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
<br />
<table bgcolor="#aaaaff"><!--添加了背景色-->
<caption>设置了背景颜色的表格</caption>
<tr>
<th>序号</th><!--<th>控制列数-->
<th>性别</th>
<th>姓名</th>
</tr>
<tr>
<td>1</td><!--<td>控制行数-->
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
<br/>
<table border="3px">
<caption>设置过边框后的表格</caption>
<tr>
<th>序号</th><!--<th>控制列数-->
<th>性别</th>
<th>姓名</th>
</tr>
<tr>
<td>1</td><!--<td>控制行数-->
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
<br/>
<table width="20%" height="20%"><!--响应式布局，表格大小会随着浏览器窗口的大小随百分比改变-->
<caption>运用响应式布局设置表格宽高</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>
<br/>
<table width="200px" height="150px"><!--如果设置的宽度和高度都太小的话，那么表格会成功实现宽度而忽略高度-->
<caption>给单元格设置了宽度和高度的表格</caption>
<tr>
<th>序号</th>
<th>性别</th>
<th>姓名</th>
</tr>
<tr>
<td>1</td><!--<td>控制行数-->
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
<br/>
</table>
<table frame="below" rules="all">
<caption>设置了frame和rules属性的表格</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>
<br/>
<!--单元格间距与边距-->
<table border="2px">
<caption>没有设置过单元格间距、边距的表格</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 cellspacing="10px"border="2px"><!--设置了间距的表格-->
<caption>设置了间距的表格</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>
<br/>
<br/>
<table cellpadding="10px" border="2px">
<caption>设置了边距后的表格</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>
<br/>
<br/>
<!--3.2.6 表格水平对其属性-->
<table cellpadding="10px" border="2px" align="center">
<caption>给表格设置居中对齐</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>
<br/>
<br/>
<!--3.2.7设置表格的标记行属性-->
<table width="200px" height="150px" border="2px">
<caption>给每一行设置不同对齐方式</caption>
<tr align="left" valign="top">
<th>序号</th>
<th>性别</th>
<th>姓名</th>
</tr>
<tr align="center" valign="middle">
<td>1</td>
<td align="left">张三</td>
<td>男</td>
</tr>
<tr align="right" valign="bottom">
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
<br/>
<br/>
<!--3.2.8设置单元格属性-->
<table cellpadding="10px" border="2px">
<caption>设置了边距后的表格</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>
<br/>
<br/>
<!--3.4 表单-->
<!--3.4.1 表单标记-->
<!--3.4.2 定义域和域标题-->
<form>
<fieldset>
<legend align="center">个人信息</legend>
姓名：<input type="text" name="user"/>
性别：
<input type="radio" name="sex" value="male"/>男性
<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">ps</option>
<option name="s">安卓</option>
<option name="s">JAVA</option>
<option name="s">网络</option>
</select>
请输入您的宝贵意见：
<textarea rows="5" cols="30" ></textarea>
</fieldset>
</form>
<!--3.4.3 表单信息输入-->
<!--1.单行文本框输入-->
<form>
用户名：<input type="text" name="user"/>
</form>
<br />
<!--2.密码输入框-->
<form>
用户名：<input type="text" name="user"/>
密码：<input type="password" name="password"/>
</form>
<br />
<!--3.复选框-->
<form>
姓名：<input type="text" name="user"/>
爱好：<!--checked用于设置默认选项-->
<input type="checkbox" name="n1" value="sing" checked/> 唱歌<!--value的值就是要传到后端去的值，存入value的值首选英文，以防乱码-->
<input type="checkbox" name="n2" value="dance" />跳舞
<input type="checkbox" name="n3" value="basketball"/> 篮球
<input type="checkbox" name="n4" value="run" /> 长跑
</form>
<br />
<!--4.单选按钮-->
<form>
姓名：<input type="text" name="user"/>
性别：
<input type="radio" name="sex" value="male"/>男性
<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" /> 长跑
</form>
<br />
<!--5.图像按钮-->
<form>
<input type="image" src="img/start.jpg"/>
</form>
<br />
<!--6.提交按钮-->
<form>
用户名：<input type="text" name="user"/>
密码：<input type="password" name="password"/>
<br />
<input type="submit" value="登录"/><!--value 控制提交按钮中的文字-->
</form>
<br />
<!--7.重置按钮-->
<form>
用户名：<input type="text" name="user"/>
密码：<input type="password" name="password"/>
<br />
<input type="submit" value="登录"/>
<input type="reset"/>
</form>
<br />
<!--8.普通按钮-->
<form>
用户名：<input type="text" name="user"/>
密码：<input type="password" name="password"/>
<br />
<input type="submit" value="登录"/>
<input type="reset"/>
<input type="button" value="注册" onclick="javascript:alert('注册新用户')"/>
</form>
<br />
<!--9.文件选择框-->
<form>
姓名：<input type="text" name="user"/>
性别：
<input type="radio" name="sex" value="male"/>男性
<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"/>
</form>
<br />
<!--10.隐藏框-->
<footer>
<input type="hidden" name="abc" value="123"/>
</footer>
<br />
<!--3.4.4 多行文本输入框-->
<form>
请输入您的宝贵意见：<br/>
<textarea rows="5" cols="30"></textarea><!--rows用来控制文本域的行数，cols用来控制每行可输入的字数-->
</form>
<br />
<!--3.4.5 下拉列表框-->
<form>
请选择课程：
<select multiple><!--加上multiple后可以用ctrl达到多选的效果-->
<option name="s">网页</option>
<option name="s">ps</option>
<option name="s">安卓</option>
<option name="s">JAVA</option>
<option name="s">网络</option>
</select>
</form>
</body>
</html>
扫一扫
585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
