📄 html7.htm
字号:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb_2312-80">
<META NAME="Generator" CONTENT="Microsoft Word 97">
<TITLE>HTML语言教程之七：表格进阶(TABLE ADVANCED)</TITLE>
<META NAME="Template" CONTENT="C:\PROGRAM FILES\MICROSOFT OFFICE\OFFICE\html.dot">
<link rel="stylesheet" href="../../cpcw.css"></HEAD>
<BODY LINK="#0000ff" VLINK="#800080" background="../bg.gif">
<table width="85%" border="0" align="center">
<tr bgcolor="#FFFFFF">
<td>
<p align="CENTER"><font size="6" lang="ZH-CN"><font color="#FF3333" class="title"><b>HTML语言教程之七：表格进阶(TABLE
ADVANCED)</b></font></font></p>
<p align="JUSTIFY"></p>
<hr>
<H1 ALIGN=left><!--################## Table Color ########################--><A NAME="color"></A></H1>
<H2> 表格的色彩</H2>
<P><!------Background Color & Image-------></P>
<H3>表元的背景色彩和背景图象<BR>
<th bgcolor=#> <BR>
<th background="URL"> </H3>
<DL>
<DD>#=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：<BR>
<FONT COLOR="#000000">Black</FONT>, <FONT COLOR="#808000">Olive</FONT>,
<FONT COLOR="#008080">Teal</FONT>, <FONT COLOR="#FF0000">Red</FONT>, <FONT COLOR="#0000FF">Blue</FONT>,
<FONT COLOR="#800000">Maroon</FONT>, <FONT COLOR="#000080">Navy</FONT>,
<FONT COLOR="#808080">Gray</FONT>, <FONT COLOR="#00FF00">Lime</FONT>, <BR>
<FONT COLOR="#FF00FF">Fuchsia</FONT>, <FONT COLOR="#FFFFFF">White</FONT>,
<FONT COLOR="#008000">Green</FONT>, <FONT COLOR="#800080">Purple</FONT>,
<FONT COLOR="#C0C0C0">Silver</FONT>, <FONT COLOR="#FFFF00">Yellow</FONT>,
<FONT COLOR="#00FFFF">Aqua</FONT> </DD>
</DL>
<PRE><table border>
<tr><th bgcolor=ffaa00>Food</th>
<th bgcolor=Red>Drink</th>
<th rowspan=2 background="image.gif">Sweet</th>
<tr bgcolor=white><td>A</td><td>B</td>
</table>
</PRE>
<TABLE border>
<TR>
<TH bgcolor=ffaa00>Food</TH>
<TH bgcolor=Red>Drink</TH>
<TH rowspan=2 background="image.gif">Sweet </TH>
</TR>
<TR bgcolor=white>
<TD>A</TD>
<TD>B</TD>
</TR>
</TABLE>
<PRE>
</PRE>
<P><!------Border Color-------></P>
<H3>表格边框的色彩 <BR>
<table bordercolor=#></H3>
<PRE><table cellspacing=5 border=5 bodercolor=#ffaa00>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
</PRE>
<TABLE BORDER=5 CELLSPACING=5 bordercolor="#ffaa00" >
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</TABLE>
<P><!------Light & Dark Border Color-------></P>
<H3>表格边框色彩的亮度控制 <BR>
<table bordercolorlight=#><BR>
<table bordercolordark=#> </H3>
<PRE><table cellspacing=5 border=5
bordercolorlight=White bordercolordark=Maroon>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
</PRE>
<TABLE BORDER=5 CELLSPACING=5 bordercolorlight="White" bordercolordark="Maroon" >
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</TABLE>
<PRE>
</PRE>
<P><!--################## Structured Table ########################--><A NAME="group"></A></P>
<H2>表格的分组显示(Structured Table)
</H2>
<P><!------Groups of Rows-------></P>
<H3>按行分组 <BR>
<thead> ... </thead> - 表的题头(Header) <BR>
<tbody> ... </tbody> - 表的正文(Body) <BR>
<tfoot> ... </tfoot> - 表的脚注(Footer) </H3>
<PRE><table border>
<thead>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
</thead>
<tbody>
<tr><td>A</td><td>B</td><td>C</td>
<tr><td>D</td><td>E</td><td>F</td>
</tbody>
</table>
</PRE>
<TABLE border>
<CAPTION>
<P>
</P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD> </TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD> </TD>
</TR>
</TABLE>
<P><!------Groups of Columns-------></P>
<H3>按列分组 <BR>
<colgroup align=#> #=left, right, center </H3>
<PRE><table border width=160>
<colgroup align=left>
<colgroup align=center>
<colgroup align=right>
<thead>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
</thead>
<tbody>
<tr><td>A</td><td>B</td><td>C</td>
<tr><td>D</td><td>E</td><td>F</td>
</tbody>
</table>
</PRE>
<TABLE border WIDTH="160" >
<CAPTION>
<P><colgroup align=left><colgroup align=center><colgroup align=right>
</P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD> </TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD> </TD>
</TR>
</TABLE>
<P><!------Groups of Columns-------></P>
<H3>列的属性控制 <BR>
<col span=#> #=从左数起，具有指定属性的列的列数<BR>
<col align=#> #=left, right, center </H3>
<PRE><table border width=160>
<colgroup>
<col align=center span=2>
<colgroup align=right>
<thead>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
</thead>
<tbody>
<tr><td>A</td><td>B</td><td>C</td>
<tr><td>D</td><td>E</td><td>F</td>
</tbody>
</table>
</PRE>
<TABLE border WIDTH="160" >
<CAPTION>
<P><colgroup><col align=center span=2><colgroup align=right>
</P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD> </TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD> </TD>
</TR>
</TABLE>
<P><!--################## Frame ########################--><A NAME="frame"></A></P>
<H2> 表格中边框的显示 </H2>
<P><!------all-------></P>
<H3>显示所有 4 个边框 <table frame=box></H3>
<PRE><table border frame=box>
<thead>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
</thead>
<tbody>
<tr><td>A</td><td>B</td><td>C</td>
<tr><td>D</td><td>E</td><td>F</td>
</tbody>
</table>
</PRE>
<TABLE border frame="box" >
<CAPTION>
<P>
</P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD> </TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD> </TD>
</TR>
</TABLE>
<P><!------above-------></P>
<H3>只显示上边框 <table frame=above></H3>
<TABLE border frame="above" >
<CAPTION>
<P>
</P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD> </TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD> </TD>
</TR>
</TABLE>
<P><!------below-------></P>
<H3>只显示下边框 <table frame=below></H3>
<TABLE border frame="below" >
<CAPTION>
<P>
</P>
</CAPTION>
<TR>
<TH width="36">Food</TH>
<TH width="45">Drink</TH>
<TH width="46">Sweet</TH>
<TD width="8"> </TD>
</TR>
<TR>
<TD width="36">A</TD>
<TD width="45">B</TD>
<TD width="46">C</TD>
</TR>
<TR>
<TD width="36">D</TD>
<TD width="45">E</TD>
<TD width="46">F</TD>
<TD width="8"> </TD>
</TR>
</TABLE>
<P><!------hsides-------></P>
<H3>只显示上、下边框 <table frame=hsides></H3>
<TABLE border frame="hsides" >
<CAPTION>
<P></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></TD>
</TR>
</TABLE>
<P><!------vsides-------></P>
<H3>只显示左、右边框 <table frame=vsides></H3>
<TABLE border frame="vsides" >
<CAPTION>
<P></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></TD>
</TR>
</TABLE>
<P><!------lhs-------></P>
<H3>只显示左边框 <table frame=lhs></H3>
<TABLE border frame="lhs" >
<CAPTION>
<P></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></TD>
</TR>
</TABLE>
<P><!------rhs-------></P>
<H3>只显示右边框 <table frame=rhs></H3>
<TABLE border frame="rhs" >
<CAPTION>
<P></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></TD>
</TR>
</TABLE>
<P><!------void-------></P>
<H3>不显示任何边框 <table frame=void></H3>
<TABLE border frame="void" >
<CAPTION>
<P></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></TD>
</TR>
</TABLE>
<P><!--################## Rule ########################--><A NAME="rule"></A></P>
<H2> 表格中分隔线(Rules)的显示 </H2>
<P><!------all-------></P>
<H3>显示所有分隔线 <table rules=all> </H3>
<PRE><table border rules=all>
<colgroup><col align=center span=2>
<colgroup align=right>
<thead>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
</thead>
<tbody>
<tr><td>A</td><td>B</td><td>C</td>
<tr><td>D</td><td>E</td><td>F</td>
</tbody>
<tbody>
<tr><td rowspan=3 align=right>Total $-00.0</td>
</tbody>
</table>
</PRE>
<TABLE border rules="all" >
<CAPTION>
<P><colgroup><col align=center span=2><colgroup align=right></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></TD>
</TR>
<TR>
<TD colspan=3 align=right>Total $-00.0</TD>
<TD></TD>
</TR>
</TABLE>
<P><!------groups-------></P>
<H3>只显示组(Groups)与组之间的分隔线 <table rules=groups> </H3>
<TABLE border rules="groups" >
<CAPTION>
<P><colgroup><col align=center span=2><colgroup align=right></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></TD>
</TR>
<TR>
<TD colspan=3 align=right>Total $-00.0</TD>
<TD></TD>
</TR>
</TABLE>
<P><!------rows-------></P>
<H3>只显示行与行之间的分隔线 <table rules=rows> </H3>
<TABLE border rules="rows" >
<CAPTION>
<P><colgroup><col align=center span=2><colgroup align=right></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></TD>
</TR>
<TR>
<TD colspan=3 align=right>Total $-00.0</TD>
<TD></TD>
</TR>
</TABLE>
<P><!------cols-------></P>
<H3>只显示列与列之间的分隔线 <table rules=cols> </H3>
<TABLE border rules="cols" >
<CAPTION>
<P><colgroup><col align=center span=2><colgroup align=right></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></TD>
</TR>
<TR>
<TD colspan=3 align=right>Total $-00.0</TD>
<TD></TD>
</TR>
</TABLE>
<P><!------none-------></P>
<H3>不显示任何分隔线 <table rules=none> </H3>
<TABLE border rules="none" >
<CAPTION>
<P><colgroup><col align=center span=2><colgroup align=right></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></TD>
</TR>
<TR>
<TD colspan=3 align=right>Total $-00.0</TD>
<TD></TD>
</TR>
</TABLE>
<p> </p>
<p align="center"><a href="html1.htm">页面标记|</a>
<a href="html2.htm">字体标记|</a>
<a href="html3.htm">文字布局|</a>
<a href="html4.htm">图像标记|</a>
<a href="html5.htm">表单标记|</a>
<a href="html6.htm">表格标记|</a>
<a href="html7.htm">表格进阶|</a>
<a href="html8.htm">多窗口|</a>
<a href="html9.htm">移动文字|</a>
<a href="html10.htm">多媒体</a><br>
<a href="html6.htm">上一节</a> <a href="start.html">首页</a> <a href="html8.htm">下一节</a><font face="宋体" lang="ZH-CN">
</td>
</tr>
</table>
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -