3.1表格概述
3.1.1表格的结构
表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或其他内容。表格中的单元格是行与列的交叉部分，是组成表格的最基本单元。单元格的内容是数据，也称数据单元格。数据单元格可以包含文本、图片、列表、段落、表单、水平线或表格等元素。
3.1.2表格的基本语法
table=表格所有内容，每一个tr表示每一行，caption=标题，th=表头单元格，td=表格内容的单元格(1)table 标记是成对标记，<table>表示表格开始，</table>表示表格结束。
(2) caption标记是成对标记，<caption>表示标题开始，</caption>表示标题结束。使用 caption标记可以给添加标题，该标应位于table标记与t标记之间的位置。
(3) t(Table Row)标记是成对标记，<r>表示行开始，</tr>表示行结束。
(4) th (Table Heading表头)标记是成对标记，<th>表示表头开始，</th>表示表头结束，设计表格时，表头常常作为表格的第1行或者第1列，用来对表格单元格的内行说明。表头文字内容一般居中、加粗显示。
(5)td(Table Data)标记是成对标记，定义单元格或列。以<td>开始，以</td>结束。表头可以用山标记定义，也可以用td标记定义，但<1d></id>两标记之间的内容不自动居中、不加粗。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第三章</title>
</head>
<table>
<caption>23软件4班名单</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表格边框属性
border边框。光在左上角，右下角暗边框。bordercolor=边框颜色
light=亮边框调色，dack=暗边框调色
设置表格标记中的边框属性可以改变表格的外观。
(1)border属性。用于设置边框的粗细，单位是像素。
(2) bordercolor 属性。用于设置表格边框的颜色，可以使用rgb函数、十六进制数和颜色英文名称。
(3) bordercolorlight 属性。用于设置表格亮边框，对表格左上边框生效。
(4)bordercolordark 属性。用于设置表格暗边框，对表格右下边框生效。
3.2.2表格的宽度和高度属性
table width=宽度设置，height=高度设置，当表格内容不够宽度生效高度失效，百分比占比是按照浏览器的百分比来变化
通过设置 width 属性和height，属性可以设置表格的宽度和高度。
(1) width。其单位可以是长度单位或百分比，用于定义表格的宽度。
(2) height。其单位可以是长度单位或百分比，用于定义表格的高度。
3.2.3背景颜色与表格图像属性
bgcolor=设置背景颜色。background=表格背景图片
设置表格的bgcolor属性可以改变表格的背景颜色，设置表格的background 属性可以为表格增添背景图像效果，使表格更加美观。
(1)bgcolor。可以用rgb函数、十六进制、英文颜色名称来设置背景颜色。
(2) background。设置背景图像，图像的路径可以是绝对路径或相对路径。
(3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色。
3.2.4表格边框样式属性
frame有七种值rules有六种值
3.2.5单元格间距、单元格边距属性
设置表格标记中的cellspacing属性可以改变表格单元格之间的间隔，使网页中的表格内容稍微松散一些。设置表格标记中的cellpadding属性可以增加表格单元格的内容与内部边框之间的距离。cellspacing=单元格的间距border=边距
3.2.6表格的水平对齐属性
align=对齐方式
3.2.7设置表格的（tr）标记行的属性
valign=上下对齐方式
通过r标记的align属性可以设置行内容的水平对齐方式。水平对齐方式有居左对齐、居中对齐和居右对齐。通过tr标记的valign 属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。
3.2.8设置单元格的属性
表格的列（td）标记的属性可以设置表格单元格的显示风格。
3.2.9单元格跨行跨列
colspan=单元格跨列。rowspan=单元格跨行
3.3表格嵌套
表格嵌套是一种常见的页面布局方式。利用表格嵌套可以设计比较复杂且美观的页面效果。通常情况下，使用表格嵌套时，表格不宜过多使用，否则会降低网站访问速度。表格嵌套一般采用在单元格内嵌套表格。
3.4表单
表单form 标记为成对标记，以<form>开始和</form>结束。表单定义了采集数据的范围，其所包含的数据内容将被完整地提交给服务器。
input type=password name=password=密码框
checkbox=复选框
type="reset"=重置按钮
value=设置文字button=普通按钮
οnclick=单击按钮alert=弹框
textarea=文本框rows=行
select=下拉列表框+multiple=多选
利用fieldset标记可以在网页上定义域，在表单中使用可以将表单的相关元素进行分组，fieldset标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到fieldset标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，或者可创建一个子表单来处理这些元素。legend标记为fieldset标记定义域标题。
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" calss="zil">网站首页</td>
<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">关于我们</td>
<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">团队合作</td>
<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">相关作品</td>
<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">设计理念</td>
<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">人物介绍</td>
<td width="100" align="center" valign="middle" bgcolor="#FFFFFF" calss="zil">联系我们</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" aligh="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 calss="zibai"> </p>
<p calss="zibai chu"><a href="#">更多>></a></p>
</td>
</tr>
</table>
</td>
<td width="280">
<table widht="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" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>用户注册信息</title>
<style type="text/css">
fieldset{
width: 700px;
}
</style>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form" id="form">
<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="radio" name="radio" id="radio1" value="radio" checked="checked" />
男<img src="../img/di2nan.gif" width="22" height="21" align="absmiddle"/>
<input type="radio" name="radio" id="radio2" value="radio" />
女<img src="../img/di2nv.gif" width="23" height="21" align="absmiddle"/>
</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 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" />
<label for="checkbox">看书</label>
<input type="checkbox" name="checkbox2" id="checkbox2" />
<label for="checkbox2">上网</label>
<input type="checkbox" name="checkbox3" id="checkbox3" />
<label for="checkbox3">打球</label>
</td>
</tr>
<tr>
<td width="200" align="right">相片：</td>
<td><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>
扫一扫
124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
