第七章 TABLE表格

表格在网站应用中非常广泛,可以方便灵活的排版,很多动态大型网站也都是借助表格排版,表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然.所以说要制作好网页,就要学好表格

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>。

实例：7-1.html

<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 单元格内容与单元格边界之间的空白距离的大小

实例：7-2-1.html

<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>
</html>

7-2（2） 表格的边框显示状态 frame

表格的边框分别有上边框、下边框、左边框、右边框。这四个边框都可以设置为显示或隐藏状态

语法格式：<table frame="边框显示值">

表格边框显示状态frame的值的设定

frame的值 描 述
box 显示整个表格边框
void 不显示表格边框
hsides 只显示表格的上下边框
vsides 只显示表格的左右边框
alove 只显示表格的上边框
below 只显示表格的下边框
lhs 只显示表格的左边框
rhs 只显示表格的右边框

实例：7-2-2.html

<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 所有分隔线都不显示

实例:7-2-3.html

<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>