7-1 定义表格的基本语法
在html文档中，表格是通过<table>,<th>,<tr>,<td>标签来完成的，如下表所示：
表格标记
|
标 签
|
描 述
|
| <table>...</table> | 用于定义一个表格开始和结束 |
| <th>...</th> | 定义表头单元格。表格中的文字将以粗体显示，在表格中也可以不用此标签，<th>标签必须放在<tr>标签内 |
| <tr>...</tr> | 定义一行标签，一组行标签内可以建立多组由<td>或<th>标签所定义的单元格 |
| <td>...</td> | 定义单元格标签，一组<td>标签将将建立一个单元格，<td>标签必须放在<tr>标签内 |
在一个最基本的表格中，必须包含一组<table>标签，一组标签<tr>和一组<td>标签或<th>。
实例：
<HEAD>
<TITLE>一个简单的表格</TITLE>
</HEAD>
<BODY>
<center>
<table>
<tr>
<td>第1行中的第1列</td>
<td>第1行中的第2列</td>
<td>第1行中的第3列</td>
</tr>
<tr>
<td>第2行中的第1列</td>
<td>第2行中的第2列</td>
<td>第2行中的第3列</td>
</tr>
</table>
</center>
</BODY>
</HTML>
7-2（1)表格<table>标签的属性
表格标签<table>有很多属性，最常用的属性有：
<table>标签的属性
| 属 性 | 描 述 |
| width | 表格的宽度 |
| height | 表格的高度 |
| align | 表格在页面的水平摆放位置 |
| background | 表格的背景图片 |
| bgcolor | 表格的背景颜色 |
| border | 表格边框的宽度（以像素为单位） |
| bordercolor | 表格边框颜色 |
| bordercolorlight | 表格边框明亮部分的颜色 |
| bordercolordark | 表格边框昏暗部分的颜色 |
| cellspacing | 单元格之间的间距 |
| cellpadding | 单元格内容与单元格边界之间的空白距离的大小 |
实例：
<html>
<head>
<title>无标题文档</title>
</head>
<body>
<table border=10 bordercolor="#006803" align="center" bgcolor="#DDFFDD" width=500 height="200"bordercolorlight="#FFFFCC" bordercolordark="#660000" background="../../imge/b0024.gif" cellspacing="2" cellpadding="8">
<tr>
<td>第1行中的第1列</td>
<td>第1行中的第2列</td>
<td>第1行中的第3列</td>
</tr>
<tr>
<td>第2行中的第1列</td>
<td>第2行中的第2列</td>
<td>第2行中的第3列</td>
</tr>
</table>
</body>
7-2（2） 表格的边框显示状态 frame
表格的边框分别有上边框、下边框、左边框、右边框。这四个边框都可以设置为显示或隐藏状态
语法格式：<table frame="边框显示值">
表格边框显示状态frame的值的设定
| frame的值 | 描 述 |
| box | 显示整个表格边框 |
| void | 不显示表格边框 |
| hsides | 只显示表格的上下边框 |
| vsides | 只显示表格的左右边框 |
| alove | 只显示表格的上边框 |
| below | 只显示表格的下边框 |
| lhs | 只显示表格的左边框 |
| rhs | 只显示表格的右边框 |
实例：
<HTML>
<HEAD>
<TITLE>表格边框的显示状态</TITLE>
</HEAD>
<BODY >
<TABLE border=6 bgcolor="#FFFFCC" frame="hsides" bordercolor="#9900FF" width="400" height="160">
<TR>
<TH>姓名</TH>
<TH>性别</TH>
<TH>年龄</TH>
<TH>专业</TH>
</TR>
<TR>
<TD>卡卡</TD>
<TD>男</TD>
<TD>50</TD>
<TD>计算机</TD>
</TR>
</TABLE>
</BODY>
</HTML>
7-4（3） 设置分隔线的显示状态 rules
语法格式：<table rules="值">
分隔线的显示状态rules的值的设定
| rules的值 | 描 述 |
| all | 显示所有分隔线 |
| groups | 只显示组与组的分隔线 |
| rows | 只显示行与行的分隔线 |
| cols | 只显示列与列的分隔线 |
| none | 所有分隔线都不显示 |
实例:
<html>
<head>
<title>无标题文档</title>
</head>
<body>
<TABLE border=6 bgcolor="#FFFFCC" rules="cols" bordercolor="#9900FF" width="400" height="160" align="center">
<TR>
<TH>姓名</TH>
<TH>性别</TH>
<TH>年龄</TH>
<TH>专业</TH>
</TR>
<TR>
<TD>笨笨猫</TD>
<TD>女</TD>
<TD>99</TD>
<TD>计算机</TD>
</TR>
</TABLE><p>
<TABLE border=6 bgcolor="#FFFFCC" rules="rows" bordercolor="#9900FF" width="400" height="160" align="center">
<TR>
<TH>姓名</TH>
<TH>性别</TH>
<TH>年龄</TH>
<TH>专业</TH>
</TR>
<TR>
<TD>笨笨猫</TD>
<TD>女</TD>
<TD>99</TD>
<TD>计算机</TD>
</TR>
</TABLE>
</body>
</html>
7-3 表格行的设定
表格是按行和列（单元格）组成的，一个表格有几行组成就要有几个行标签<tr>，行标签用它的属性值来修饰，属性都是可选的。
<tr>标签的属性
| 属 性 | 描 述 |
| align | 行内容的水平对齐 |
| valign | 行内容的垂直对齐 |
| bgcolor | 行的背景颜色 |
| bordercolo | 行的边框颜色 |
| bordercolorlight | 行的亮边框颜色 |
| bordercolordark | 行的暗边框颜色 |
<TR> 的参数设定（常用）：
<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">
实例：
<HTML>
<HEAD>
<TITLE>表格行的控制
7-4 单元格的设定
<th>和<td>都是插入单元格的标签，这两个标签必须嵌套在<tr>标签内。是成对出现的。<th>用于表头标签，表头标签一般位于首行或首列，标签之间的内容就是位于该单元格内的标题内容，其中的文字以粗体居中显示。数据标签<td>就是该单元格中的具体数据内容,<th>和<td>标签的属性都是一样的，属性设定如下：
<th>和<td>的属性
| 属 性 | 描 述 |
| width/height | 单元格的宽和高，接受绝对值（如 80）及相对值（如 80%）。 |
| colspan | 单元格向右打通的栏数 |
| rowspan | 单元格向下打通的列数 |
| align | 单元格内字画等的摆放贴，位置（水平），可选值为： left, center, right。 |
| valign | 单元格内字画等的摆放贴 位置（垂直），可选值为： top, middle, bottom。 |
| bgcolor | 单元格的底色 |
| bordercolor | 单元格边框颜色 |
| bordercolorlight | 单元格边框向光部分的颜色 |
| bordercolordark | 单元格边框背光部分的颜色 |
| background | 单元格 背景图片 |
<TD> 的参数设定格式：
例如：<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif">
7-5 设定跨多行多列单元格
要创建跨多行、多列的单元格，只需在<TH>或<TD>中加入ROWSPAN或COLSPAN属性的属性值，默认值为1。表明了表格中要跨越的行或列的个数。
跨多列的语法： <th colspan=#> <td colspan=#>
colspan表示跨越的列数，例如colspan=2表示这一格的宽度为两个列的宽度。
跨多行的语法： <th rowspan=#> <td rowspan=#>
rowspan所要表示的意义是指跨越的行数，例如rowspan=2就表示这一格跨越表格两个行的高度。
<html>
<head>
<title>跨多行跨多列的单元格</title>
</head>
<body>
<center>
<table border=10 width=80% align="center" height="150" background="../../imge/b0024.gif" bordercolorlight="#9999FF" bordercolordark="#9900CC">
<TR ALIGN=center>
<TH colspan=3> 学生基本信息</TH>
<TH colspan=2>成 绩</TH>
</TR>
<TR ALIGN=center>
<TH>姓 名</TH>
<TH>性 别</TH>
<TH>专 业</TH>
<TH>课 程</TH>
<TH>分 数</TH>
</TR>
<TR ALIGN=center>
<TD>咚 咚</TD>
<TD>男</TD>
<TD rowspan=2>计算机</TD><TD rowspan=2>程序设计</TD>
<TD>68</TD>
</TR>
<TR ALIGN=center>
<TD>喃 喃</TD>
<TD>女</TD>
<TD>89</TD>
</TR>
</table>
</body>
</html>
在html页面中，使用表格排版是通过嵌套来完成的，即一个表格内部可以嵌套另一个表格，用表格来排版页面的思路是：由总表格规划整体的结构，由嵌套的表格负责各个子栏目的排版，并插入到表格的相应位置，这样就可以使页面的各个部分有条不紊，互不冲突，看上去清晰整洁。在实际做网页时一般不显示边框,边框的显示可根据自己的爱好来设定。在实例中为了让大家能够看清楚，都设置了有边框。
实例
<html>
<head>
<title>表格嵌套</title>
</head>
<body bgcolor="#555555" text="#FFFFFF">
<table width="560" border="3" cellspacing="1" cellpadding="1" align="center">
<tr>
<td width="100" height="69">网页标志</td>
<td colspan="2"><div align="center">广告条</div></td>
</tr>
<tr>
<td height="330"><table width="100" height="321" border="3" align="center" cellpadding="1" cellspacing="1">
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td>标题栏</td>
</tr>
<tr>
<td height="90">内容六</td>
</tr>
</table></td>
<td width="275"><table width="275" height="325" border="3" cellpadding="1" cellspacing="1">
<tr>
<td width="263">内容一</td>
</tr>
<tr>
<td>内容二</td>
</tr>
</table></td>
<td width="163"><table width="157" height="320" border="3" cellpadding="1" cellspacing="1" align="center">
<tr>
<td width="136" height="94">内容三</td>
</tr>
<tr>
<td height="62">内容四</td>
</tr>
<tr>
<td height="160">内容五</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
