表格属性设置

知足常乐WQL 2006-08-24

展开全文

表格属性设置 (TABLE ADVANCED)

表格的色彩

表元的背景色彩和背景图象
<th bgcolor=#>
<th background="URL">

#=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

<th bgcolor=Red>Drink</th>

<th rowspan=2 background="image.gif">Sweet</th>

</table>

Food	Drink	Sweet
A	B	Sweet

表格边框的色彩
<table bordercolor=#>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

</table>

Food	Drink	Sweet
A	B	C

表格边框色彩的亮度控制
<table bordercolorlight=#>
<table bordercolordark=#>

<table cellspacing=5 border=5

bordercolorlight=White bordercolordark=Maroon>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

</table>

Food	Drink	Sweet
A	B	C

表格的分组显示(Structured Table)

按行分组
<thead> ... </thead> - 表的题头(Header)
<tbody> ... </tbody> - 表的正文(Body)
<tfoot> ... </tfoot> - 表的脚注(Footer)

<thead>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

</thead>

<tbody>

</tbody>

</table>

Food	Drink	Sweet
A	B	C
D	E	F

按列分组
<colgroup align=#> #=left, right, center

<thead>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

</thead>

<tbody>

</tbody>

</table>

Food	Drink	Sweet
A	B	C
D	E	F

列的属性控制
<col span=#> #=从左数起，具有指定属性的列的列数
<col align=#> #=left, right, center

<thead>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

</thead>

<tbody>

</tbody>

</table>

Food	Drink	Sweet
A	B	C
D	E	F

表格中边框的显示

显示所有 4 个边框 <table frame=box>

<thead>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

</thead>

<tbody>

</tbody>

</table>

Food	Drink	Sweet
A	B	C
D	E	F

只显示上边框 <table frame=above>

Food	Drink	Sweet
A	B	C
D	E	F

只显示下边框 <table frame=below>

Food	Drink	Sweet
A	B	C
D	E	F

只显示上、下边框 <table frame=hsides>

Food	Drink	Sweet
A	B	C
D	E	F

只显示左、右边框 <table frame=vsides>

Food	Drink	Sweet
A	B	C
D	E	F

只显示左边框 <table frame=lhs>

Food	Drink	Sweet
A	B	C
D	E	F

只显示右边框 <table frame=rhs>

Food	Drink	Sweet
A	B	C
D	E	F

不显示任何边框 <table frame=void>

Food	Drink	Sweet
A	B	C
D	E	F

表格中分隔线(Rules)的显示

显示所有分隔线 <table rules=all>

<thead>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

</thead>

<tbody>

</tbody>

<tbody>

<tr><td rowspan=3 align=right>Total $-00.0</td>

</tbody>

</table>

Food	Drink	Sweet
A	B	C
D	E	F
Total $-00.0

只显示组(Groups)与组之间的分隔线 <table rules=groups>

Food	Drink	Sweet
A	B	C
D	E	F
Total $-00.0

只显示行与行之间的分隔线 <table rules=rows>

Food	Drink	Sweet
A	B	C
D	E	F
Total $-00.0

只显示列与列之间的分隔线 <table rules=cols>

Food	Drink	Sweet
A	B	C
D	E	F
Total $-00.0

不显示任何分隔线 <table rules=none>

Food	Drink	Sweet
A	B	C
D	E	F
Total $-00.0

表格的边框不断在闪

以下方法可以令表格的边框不断在闪，很实用的
在BODY区加上

<table border="0" width="280" id="myexample"
style="border:5px solid yellow">

<tr>

<td>加入任意的物件.加入任意的物件.

<br>加入任意的物件.加入任意的物件.

<br>加入任意的物件.加入任意的物件.</td>

</tr>

</table>

<script language="JavaScript1.2">



</script>

3.表格分行下载

这个对表哥内容很大比较实用

在需要分行下载处加上 <tbody >

比如：
<table >
<tbody >
<tr >
<td >flsdjfsdjfkdsjf</td >
</tr >
<tr >
<td >skdjfsdjfksd</td >
</tr >
</tbody >

<tbody >
<tr >
<td >flsdjfsdjfkdsjf</td >
</tr >
<tr >
<td>skdjfsdjfksd</td >
</tr >
</tbody >
</table >

4.几种样式不同的表格

<table border="1" width="220" style="position: absolute; left:
11; top: 11" height="26" >

<tr>

<td width="100%">普通表格</td>

</tr>

</table>

5.正立方表格

<table border="1" width="220" bordercolorlight="#eeeeee"
bordercolordark="#000000" style="position: absolute; left: 10; top:
49" height="26">

<tr>

<td width="100%">正立方表格</td>

</tr>

</table>

6.细表格

<table border="0" frame=vsides width="219"
bgcolor="#000000" cellspacing="1" cellpadding="0"
height="22" style="position: absolute; left: 11; top: 86">

<tr bgcolor="#FFFFFF">

<td width="100%" height="2">细表格</td>

</tr>

</table>

7.立体表格

<table border="1" width="220" bordercolorlight="#ffffff"
bordercolordark="#ffffff" style="position: absolute; left: 10; top:
112" height="34">

<tr>

<td width="100%" bgcolor="#B7B7B7"
bordercolorlight="#000000" bordercolordark="#eeeeee" >立体表格</td>

</tr>

</table>

8.无名表格

<table width="220" align="center" style="position: absolute;
left: 246; top: 12" height="51">

<tr>

<td><fieldset style="width:220" align="center">
<legend> 无名表格 </legend> 　<p align="right">　</fieldset>
<br>

</td>

</tr>

</table>

9.表中表效果Ⅱ

<table width="220" align="center" style="position:
absolute; left: 245; top: 89" height="110">
<tr>
<td height="75"><fieldset style="width:220"
align="center"> <legend> 表中表效果Ⅱ </legend> <table
frame="hsides" border="1"
bordercolorlight="#000000" bordercolordark="#ffffff"
width="100%" cellspacing="1" cellpadding="0" height="78">
<tr bgcolor="#ffffff">
<td width="100%" height="76"></fieldset></td>
</tr>
</table>

10.表中表效果Ⅰ

<table width="220" align="center" style="position: absolute;
left: 10; top: 120" height="138" cellspacing="1"
cellpadding="0">

<tr>

<td height="126"><fieldset style="width: 220; color: #B7B7B7;
border-style: groove" align="center"> <legend style="color:
#FFFFFF; border: 1 solid #808080" > <font color="#000000">表中表效果Ⅰ</font>
</legend> 　<p align="right">　</fieldset>

</td>

</tr>

</table>

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>(或<th>)和一组<td>标签。

实例：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

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="groups" 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	行内容的水平对齐
valgn	行内容的垂直对齐
bgcolor	行的背景颜色
bordercolo	行的边框颜色
bordercolorlight	行的亮边框颜色
bordercolordark	行的暗边框颜色

<TR> 的参数设定（常用）：
<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">

实例：7-3.html

<HTML>
<HEAD>
<TITLE>表格行的控制</TITLE>
</HEAD>
<BODY>
<TABLE border=1 align="center" width="80%" height="150">
<TR ALIGN="CENTER">
<TH>姓名</TH>
<TH>性别</TH>
<TH>年龄</TH>
<TH>专业</TH>
</TR>
<TR ALIGN=CENTER bordercolor="#336600" bgcolor="#C1FFC1">
<TD>咚咚</TD>
<TD>男</TD>
<TD>18</TD>
<TD>学生</TD>
</tr>
<tr align=center height=50 bordercolor=navy bgcolor="#86B8E1" valign=bottom bordercolorlight="#E1F0FD" bordercolordark="#002346">
<TD>楠楠</TD>
<TD>女</TD>
<TD>17</TD>
<TD>学生</TD>
</TR>
</TABLE>
</BODY>
</HTML>

7-4 单元格的设定

<th>和<td>都是插入单元格的标签，是成对出现的。<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	单元格　纸，与 bgcolor 任用其一

<TD> 的参数设定（常用）：
<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-4.html

<HTML>
<HEAD>
<TITLE>单元格的设定</TITLE>
</HEAD>
<BODY>
<TABLE border=1 align="center" height="150" width="80%">
<TR>
<TH width=70 bgcolor="#FFCC00">姓名</TH>
<TH bgcolor="#FFCCFF">性别</TH>
<TH background="../../imge/b0024.gif">年龄</TH>
<TH background="../../imge/aki-5.gif">专业</TH>
</TR>
<TR>
<TD bordercolor=red align="left">笨笨猫</TD>
<TD bordercolorlight="#FFCCFF" bordercolordark="#FF0000" align="center">女</TD>
<TD bgcolor="#FFFFCC" valign="bottom" align="center">18</TD>
<TD bgcolor="#CCFFFF" align="right">学生</TD>
</TR>
</TABLE>
</BODY>
</HTML>

7-5 设定跨多行多列单元格

要创建跨多行、多列的单元格，只需在<TH>或<TD>中加入ROWSPAN或COLSPAN属性的属性值，默认值为1。表明了表格中要跨越的行或列的个数。

　跨多列的语法： <th colspan=#>　<td colspan=#>

　　colspan表示跨越的列数，例如colspan=2表示这一格的宽度为两个列的宽度。

　跨多行的语法： <th rowspan=#>　<td rowspan=#>
　
　 rowspan所要表示的意义是指跨越的行数，例如rowspan=2就表示这一格跨越表格两个行的高度。

实例：7-5.html

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

</table>
</body>
</html>

7-6 表格的分组

7-6-1 表格的行分组<thead>/<tbody>/<tfoot>

html文档的表格按行分组是由表头标签<thead>、表格主体标签<tbody>和尾注标签<tfoot>三个部分组成的。其中尾注标签很少用。<thead>标签是成对标签，其标签内是由表头标签标识的表头元素。<tbody>标签用于规定表格主体部分的元素。<thead>和<tbody>标签的属性和<th><td>标签是一样的。

实例：7-6-1.html

<html>
<head>
<title>表格按行分组</title>
</head>
<body>
<center>
<table border=3 width=60% align="center" height="150">
<thead bgcolor="#CCFFCC">
<TR ALIGN=center>
<TH>姓名</TH>
<TH>性别</TH>
<TH>专业</TH>
</TR>
</thead>
<tbody bgcolor="#448FBD">
<TR ALIGN=center>
<TD>咚咚</TD><TD>男</TD><TD>计算机</TD>
</TR>
<TR ALIGN=center>
<TD>喃喃</TD><TD>女</TD><TD>园林</TD>
</TR>
</tbody>
</table>
</body>
</html>

7-6-2 表格按列分组<colgroup>

html使用<colgroup>标签来将表格分组。

语法格式：<colgroup span="数值" align="参数">

说明：<colgroup>标签有两个属性，span和align, 他们都是可选的。span属性的值是数字，表示该组包含的列数，默认值为1。align属性用以规定该组所跨列中所有单元格中内容在水平方向上的位置。该属性的值为left,center,right之一。它们表示单元格的内容是左对齐，水平居中还是右对齐。

实例：7-6-2.html

<html>
<head>
<title>表格按列分组</title>
</head>
<center>
<table border=10 width=80% height="160" align="center" bordercolorlight="#CCCCFF" bordercolordark="#9900FF">
<TR>
<TH>姓名</TH><TH>性别</TH><TH>专业</TH><TH>分数</TH>
</TR>
<colgroup SPAN=2 ALIGN=center>
<colgroup ALIGN=left>
<colgroup ALIGN=right>
<TR>
<TD>咚咚</TD><TD>男</TD><TD>计算机</TD><TD>79</TD>
</TR>
<TR>
<TD>喃喃</TD><TD>女</TD><TD>园林</TD><TD>90</TD>
</TR>
<TR>
<TD>依依</TD><TD>女</TD><TD>微波通信</TD><TD>76<TD>
</TR>
</table>
</body>
</html>

7-6-3 表格的行列分组

实例：7-6-3.html

<HTML>
<HEAD>
<TITLE>同时进行行列分组</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE BORDER=10 WIDTH=80% height="200" align="center" bordercolor="#9900FF">
<THEAD bgcolor="#FFFFCC">
<TR><TH>姓名</TH><TH>性别</TH><TH>专业</TH><TH>分数</TH>
<TR>
</THEAD>
<COLGROUP SPAN=2 ALIGN=CENTER>
<COLGROUP ALIGN=LEFT>
<COLGROUP ALIGN=RIGHT>
<TBODY bgcolor="#FFCCFF">
<TR>
<TD>咚咚</TD><TD>男</TD><TD>计算机</TD><TD>85</TD>
</TR>
<TR>
<TD>喃喃</TD><TD>女</TD><TD>园林</TD><TD>94</TD>
</TR>
<TR>
<TD>依依</TD><TD>女</TD><TD>微波通信</TD><TD>87</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>

7-7 表格的标题标签<caption>

表格标题的位置，可由ALIGN属性和VALIGN属性来设置，ALIGN属性设置标题位于文档的左，中，右。 VALIGN属性设置标题位于表格的上方和表格的下方。下面为表格标题位置的设置格式。

　　语法格式：

　　　　<caption align="值" valign="值" >表哥标题</caption>

　 <caption>应放在<table>标签内，在表格行标签<tr>标签之前。

<caption>标签的默认属性是标题位于表格的上方中间位置。

实例：7-7.html

<html>
<head>
<title>表格的标题标签</title>
</head>
<body>
<center>
<table border=10 width=80% align="center" height="150" background="../../imge/b0024.gif" bordercolorlight="#9999FF" bordercolordark="#9900CC">

<caption>学生信息表</caption>

<TR ALIGN=center>
<TH colspan=3> 学生基本信息</TH>
<TH colspan=2>成绩</TH>
</TR>

</body>
</html>

7-8 表格的嵌套

在html页面中，使用表格排版是通过嵌套来完成的，即一个表格内部可以嵌套另一个表格，用表格来排版页面的思路是：由总表格规划整体的结构，由嵌套的表格负责各个子栏目的排版，并插入到表格的相应位置，这样就可以使页面的各个部分有条不紊，互不冲突，看上去清晰整洁。在实际做网页时一般不显示边框,边框的显示可根据自己的爱好来设定。在实例中为了让大家能够看清楚，都设置了有边框。

实例7-8.html