6表格的制作和应用.pptVIP

* 6-1 制作您的第1个表格——TABLE、TR、ＴＤ、TH标记 当您要制作一个简单的表格时，您至少会用到TABLE…/TABLE、TR…/TR、 TD…/TD、TH…/TH等４个标记。 TABLE…/TABLE标记 标记说明：在HTML文件中标示一个表格。 属性说明： ALIGN=“{LEFT，RIGHT，CENTER}” 指定表格的对齐方式（左对齐、右对齐、居中） BACKGROUND=“URL” 指定表格背景图片的相对或绝对位置 BORDER=“n” 指定表格的框线大小 BGCOLOR=“#RRGGBB” 指定表格的背景颜色 标记说明：在表格中表示一行(Row),结束标记/TR可省略不写。 TR…/TR标记 属性说明： 指定某一行单元格内容的水平对齐方式（左对齐、右对齐、居中对齐、对齐指定的字符） ALIGN=“{LEFT，RIGHT，CENTER，JUSTIFY，CHAR}” BGCOLOR=“#RRGGBB” 指定某一单元格的背景颜色 TD…/TD标记 标记说明：在一行中标示一个单元格，结束标记/TD可省略不写 属性说明： ALIGN=“{LEFT，RIGHT，CENTER，JUSTIFY，CHAR}” 指定某个单元格内容的水平对齐方式（左对齐、右对齐、居中、左右对齐、对齐指定的字符） 指定某个单元格的背景图处相对或绝对位置 BACKGROUD=“URL” TH…/TH标记 标记说明：在一行中标示标题单元格，结束标记/TH可省略不写 属性说明：TH标记的属性和TD标记相同，但TH标记内的文字会居中并加上粗体。在看过TABLE、TR、ID、TH等标记的说明之后，现在，我们来做个练习： 图6-1 竖的为例（Column） 标题行 横的为行（Row） 您可以在各个单元格内插入图片或输入任意文字，同时可以将图片或文字格式化，有需要的话，还可以设置超链接；您也可以利用TABLE、TR、TD、TH等标记的属性来设置表格或单元格的格式（背景颜色、背景图片、框线颜色、对齐方式…） 6-2-3 设置表格的对齐方式 TABLE标记的ALIGN属性提供了LEFT（左对齐）、CENTER（居中）、RIGHT（右对齐）3种对齐方式。 TABLE BORDER=“1”ALIGN=“Left”，令表格向左对齐，如图6-5a所示。 图6-5a TABLE BORDER=“1”ALIGN=“Center”，令表格向左对齐，如图6-5a所示。 图6-5b TABLE BORDER=“1”ALIGN=“Right”，令表格向左对齐，如图6-5a所示。 图6-5c 6-2-4 设置表格的背景颜色与背景图片 我们可以使用TABLE标记的BGCOLOR、BACKGROUND属性设置表格的背景颜色与背景图片。如图6-6。 图6-6 设置背景颜色（#FFE6F2） 图6-1 设置背景图片（bg.gif） 6-2-5 设置单元格的对齐方式 单元格的对齐方式分成水平及垂直两个方向，若要设置整行单元格的水平或垂直对齐方式，可以分别使用TR标记的ALIGN和VALIGN属性；若要设置单一单元格的水平或垂直对齐方式，可以分别使用TD标记的ALIGN和VALIGN属性。如图6-7。 图6-7 6-2-6 设置单元格的背景图片与背景颜色 如果您要设置某一行单元格、某一个单元格或标题单元格的背景图片与背景颜色，可以分别使用TR、TD、TH标记的BACKGROUND和BGCOLOR属性。 图6-8 每一行单无格设置不同的背景颜色 取消表格框线的结果 6-3设置表格标题——CAPTION标记 CAPTION…/CAPTION标记（表格标题） 标记说明：CAPTION标记可以用来指定表格的标题，而且标题可以是文字，也可以是图片（须搭配IMG标记）。 TABLE BORDER=“1” CAPTIONFONT FACE=“方正舒体”SIZE=“5” COLOR=“Olive”泰山 TARZAN/FONT /CAPTION 指定表格标题 图6-10 表格标题默认的位置 图6-11d 若要使表格标题放在表格下方，可以在CAPTION标记加上ALIGN=“Bottom”属性。 6-4 单元格的合并 单元格的合并牵涉到TD标记的COLSPAN=“n”和ROWSPAN=“n”属性，COLSPAN 属性可以将同一行的n个单元格合并为一个单元格，ROWSPAN可以将同一样的n个单元格合并为一个单元存格。 1.在营收.htm的TABLE语句后面插入如下语句，使表格的最上方新增一行（为了让网页显示出新增的单元格，我们在每个单元格填上空格nbsp;）。如图6-13。 TABLE BORDER=“5”BACKGROUND=“babybg.gif”ALIGN=“Center” TR ALIGN=“Center”