Table

来源：互联网发布：cl.d5j.xyz index.php 编辑：程序博客网时间：2024/05/21 07:47

<TD></TD>是表格中的一个单元格；

<TH></TH>是表格中的表头，即TableHead的缩写，与<TD>标记相比，它通常具有其他特定格式，如单元格中的内容加粗、居中显示。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
更多可参考：

HTML表格制作

一、创建表格

在HTML中可使用<TABLE>、<CAPTION>、<TR>、<TH>、<TD>等标记符来创建和设计表格。

1）<TABLE>标记符

双标记符<TABLE>和</TABLE>用于定义表格，一个表格的所有内容都放在这2个标记符之间。它具有多个属性，具体内容在后面述叙。

2）创建表格标题

双标记符<CAPTION>和</CAPTION>用于建立表格的标题，并使用ALIGN属性定义标题的位置。ALIGN位置属性有4个值，即top（标题放在表格的上方）、bottom（标题放在表格的下方）、left（标题放在表格的左上方）、right（标题放在表格的右上方）。一个表格只能有一个标题。

例如：

<CAPTION align=bottom>颜色与颜色值对应表</CAPTION>，表示将表格标题放在表格的下面且居中。

3）建立表头

表头是表格中行或列的标题，即表项的名称。使用<TH>可以在表的第一行或第一列加表头，表头内容写在<TH> 和</TH>之间，显示时将采用粗体字以醒目。

在表格的第一行加表头的格式为：

<TH>表头1</TH><TH>表头2</TH><TH>表头3</TH>

在表格的第一列加表头的格式为：

<TH>表头1</TH><TD>表项1</TD><TD>表项2< /TD><TD>表项3</TD>

4）表格行与列的定义

表格的内容是由行定义标记符<TR>和</TR>以及列定义标记符<TD>与</TD>来确定的。</TR>可以省略，即一个新的<TR>开始，表示前一个<TR>的结束。一般的</TD>也可以省略。

在<TR>、<TD>、<TH>标记符中可使用ROWSPAN和COLSPAN属性对行、列合并。

例如：<TD ROWSPAN=3>表项1</TD>表示在纵向上合并3行；而标记符<TD COLSPAN=3>表项2</TD>表示在水平方向上合并的列数。利用这一功能可制作出较为复杂的多层表头的表格。下面的HTML代码产生一个具有多层表头的表格。

<BODY>
<TABLE BORDER=2 WIDTH="95%">
<CAPTION>跨行跨列的表格例</CAPTION>
<TR><TH ROWSPAN=2>
<TH COLSPAN=2 BORDERCOLOR=red>平均<TH ROWSPAN=2>其他<BR>
类号<TH COLSPAN=2>性能
<TR><TH>数据1<TH>数据2<TH>MAX<TH>MIN
<TR ALIGN=left><TH>甲种（高级）<TD>1.9<TD>0.03<TD>0.34& lt;TD>3.3<TD>0.3
<TR ALIGN=right><TH ROWSPAN=2>乙种<TD>1.7<TD>8<TD>66<TD>89<TD& gt;88
</TABLE>
</BODY>

总之，构造表格时，每个<TR>标记符产生一行，表格有多少行就应有多少个<TR>标记符；表格的列数则由<TH> 或<TD>的个数而定；若表的单元格中无任何内容，则使用无内容的<TH> </TH>或<TD> </TD>标记符即可。

二、表格的修饰

1）表格边框和分隔线

在<TABLE>标记符内使用FRAME、RULES、BORDER属性可以设置表格的边框和单元格分隔线。

FRAME属性用于控制是否显示边框以及如何显示边框,其值可以是void（默认值无边框）、above（只有顶框）、below（只有底框）、 hsides（只有顶框和底框）、vsides(只有左右侧框)、lhs（只有左侧框）、rhs（只有右侧框）、box（包含4个边框）。

ROLES属性用于控制单元格之间的分隔线，其值可以是：none（无分隔线）、groups（只在行组和列组间有分隔线）、rows（仅有行分隔线）、 cols（仅有列分隔线）、all（具有所有分隔线）。none为默认值。

BORDER属性用于设置边框线的宽度。若BORDER="0"，则表示无边框，无分隔线；若取其他值，则意味着包含所有边框和分隔线。若使用< TABLE BORDER>，相当于为BORDER设置了非零值。

2）表格的对齐

表格的对齐指表格在页面中的对齐方式。

表格在页面中的对齐可在<TABLE>标记符中使用ALIGN属性，其取值可有left、centen和right。默认值为left、即为页面中左对齐。当表格与文字混合编排时，则文件中安排在表格后面的文字会显示在表格的右边或左边，形成文字与表格环绕的效果。

3）单元格中内容的对齐

单元格内容的对齐包括数据项在水平方向上的对齐和在垂直方向上的对齐。设置数据水平方向对齐是在表格内容标记符<TH>、<TD>、<TR>中使用ALIGN属性。其取值可以是center、left、right、 justify（两端对齐）、char（按特定字体对齐）。默认为左对齐。

垂直对齐则是使用VALIGN属性，其取值为top（单元格顶部）、bottom（单元格底部）、middle（垂直方向的中部）、baseline（同行单元格一致）。默认值为居中（middle）对齐。

4）单元格之间的间隔

在<TABLE>标记符中可使用CELLSPACING属性来调节单元格之间的间隔；使用CELLPADDING属性来调节表格分隔线和数据（即数据与单元格边线）之间的间隔。它们的属性项取值为象素值。

三、使用表格设计页面布局

HTML中有多种安排页面内容、设计页面布局的方法，运用表格就是方法之一。如果将整个窗口或整个显示的页面定义为一个表格，但隐去表格线，则在每个单元格中可以安排不同的内容（文本或图像）、甚至设置不同的背景，这样便可获得特殊的页面布局。

1）用色块进行页面布局

在标记符<TABLE>、<TR>、<TD>内使用BGCOLOR属性可设置单元格的背景色；使用 BACKGROUND属性可设置背景图案。例如：<TABL BGCOLOR="gray">可使表格背景为灰色，而<TD BGCOLOR="yellow">则可使某单元格为黄色。通过大的色块分割，可使整个页面窗口分为几个明显的部分，以使信息归类组织，即醒目又有序。

2）用表格嵌套实现页面布局

将表格作为一个单元格的内容，安排在<TD>和</TD>标记符之间，即可实现表格的嵌套的页面布局。以下代码使用了表格嵌套的方法和不同色块方法构造页面布局。

<HTML>
<HEAD></HEAD>
<BODY>
<TABLE border="0" cellspacing="0" cellpadding="0" align = "center">
<TR> <TD width="160" height="200" bgcolor="d9b719" align="center"> 第一框（单元格）内的数据
<TD> <TABLE border = "1" width = "250" bgcolor = "f0fdf9">
<TR height = "100"> <TD align = "center" >第一部分数据
<TR height = "100"> <TD align = "center" >第二部分数据
</TABLE>
</TD>
<TD width="160" height="200" bgcolor="d9b719" align="center"> 第三框（单元格）内的数据
<TR><TD colspan = "3" bgcolor = "538e63" height="100"align = "center"> 第四框（单元格）内的数据
</TABLE>
</BODY>
</HTML>