📄 table02.html
字号:
<HTML>
<HEAD>
<TITLE>清华大学图书馆主页 - INTERNET 教室 - HTML 语言教程</TITLE>
</HEAD>
<BODY BGCOLOR="#D4D4D4">
<H1 ALIGN=CENTER>表格进阶(TABLE ADVANCED)</H1>
<CENTER><P>
<HR></P></CENTER>
<P><!--################## Table Color ########################--><A NAME="color"></A></P>
<H2><IMG SRC="br20t.gif" ALT="+" HEIGHT=20 WIDTH=20> 表格的色彩</H2>
<P><!------Background Color & Image-------></P>
<H3>表元的背景色彩和背景图象<BR>
<th bgcolor=#> <BR>
<th background="URL"> <IMG SRC="ie.gif" HEIGHT=14 WIDTH=80>
</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>表格边框的色彩 <IMG SRC="ie.gif" HEIGHT=14 WIDTH=80><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>表格边框色彩的亮度控制 <IMG SRC="ie.gif" HEIGHT=14 WIDTH=80><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><IMG SRC="br20t.gif" ALT="+" HEIGHT=20 WIDTH=20> 表格的分组显示(Structured Table) <IMG SRC="ie.gif" HEIGHT=14 WIDTH=80></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><thead></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></thead><tbody></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></tbody></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><thead></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></thead><tbody></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></tbody></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><thead></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></thead><tbody></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></tbody></TD>
</TR>
</TABLE>
<P><!--################## Frame ########################--><A NAME="frame"></A></P>
<H2><IMG SRC="br20t.gif" ALT="+" HEIGHT=20 WIDTH=20> 表格中边框的显示 <IMG SRC="ie.gif" HEIGHT=14 WIDTH=80></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><thead></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></thead><tbody></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></tbody></TD>
</TR>
</TABLE>
<P><!------above-------></P>
<H3>只显示上边框 <table frame=above></H3>
<TABLE border frame="above" >
<CAPTION>
<P><thead></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></thead><tbody></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></tbody></TD>
</TR>
</TABLE>
<P><!------below-------></P>
<H3>只显示下边框 <table frame=below></H3>
<TABLE border frame="below" >
<CAPTION>
<P><thead></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></thead><tbody></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></tbody></TD>
</TR>
</TABLE>
<P><!------hsides-------></P>
<H3>只显示上、下边框 <table frame=hsides></H3>
<TABLE border frame="hsides" >
<CAPTION>
<P><thead></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></thead><tbody></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></tbody></TD>
</TR>
</TABLE>
<P><!------vsides-------></P>
<H3>只显示左、右边框 <table frame=vsides></H3>
<TABLE border frame="vsides" >
<CAPTION>
<P><thead></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></thead><tbody></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></tbody></TD>
</TR>
</TABLE>
<P><!------lhs-------></P>
<H3>只显示左边框 <table frame=lhs></H3>
<TABLE border frame="lhs" >
<CAPTION>
<P><thead></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></thead><tbody></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></tbody></TD>
</TR>
</TABLE>
<P><!------rhs-------></P>
<H3>只显示右边框 <table frame=rhs></H3>
<TABLE border frame="rhs" >
<CAPTION>
<P><thead></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></thead><tbody></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></tbody></TD>
</TR>
</TABLE>
<P><!------void-------></P>
<H3>不显示任何边框 <table frame=void></H3>
<TABLE border frame="void" >
<CAPTION>
<P><thead></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></thead><tbody></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></tbody></TD>
</TR>
</TABLE>
<P><!--################## Rule ########################--><A NAME="rule"></A></P>
<H2><IMG SRC="br20t.gif" ALT="+" HEIGHT=20 WIDTH=20> 表格中分隔线(Rules)的显示 <IMG SRC="ie.gif" HEIGHT=14 WIDTH=80></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><thead></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></thead><tbody></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></tbody><tbody></TD>
</TR>
<TR>
<TD colspan=3 align=right>Total $-00.0</TD>
<TD></tbody></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><thead></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></thead><tbody></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></tbody><tbody></TD>
</TR>
<TR>
<TD colspan=3 align=right>Total $-00.0</TD>
<TD></tbody></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><thead></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></thead><tbody></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></tbody><tbody></TD>
</TR>
<TR>
<TD colspan=3 align=right>Total $-00.0</TD>
<TD></tbody></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><thead></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></thead><tbody></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></tbody><tbody></TD>
</TR>
<TR>
<TD colspan=3 align=right>Total $-00.0</TD>
<TD></tbody></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><thead></P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></thead><tbody></TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
<TD></tbody><tbody></TD>
</TR>
<TR>
<TD colspan=3 align=right>Total $-00.0</TD>
<TD></tbody></TD>
</TR>
</TABLE>
<P><!--################## (^^) Jump & Add (^^) ########################-->
<HR><A HREF="http://ncdesign.kyushu-id.ac.jp/"><IMG SRC="angel-homeg.gif" ALT="NCD HOME" HSPACE=3 VSPACE=10 BORDER=0 HEIGHT=46 WIDTH=55 ALIGN=LEFT></A>
<B><A HREF="../html_design.html">HTML
Design Guide Main Page<BR>
<NOBR></A></B><FONT FACE="'Times New Roman', Arial"><FONT SIZE=-1><A HREF="html_design.html#content">Contents</A>
|| <A HREF="page.html">Page</A>
|| <A HREF="font.html">Font</A>
|| <A HREF="text_style.html">Text
Style</A> || <A HREF="image.html">Image</A>
|| <A HREF="form.html">Form</A>
|| <A HREF="table.html">Table</A>
|| <A HREF="table02.html">Table
Advanced</A> <BR>
|| <A HREF="frame.html">Frames</A>
|| <A HREF="marquee.html">Marquee</A>
|| <A HREF="inline.html">Alternative
Inline Elements</A> <BR>
</FONT><FONT SIZE=-2><A HREF="tag-index.html">Tag
Index</A> || <A HREF="new.html">What's
New</A></FONT><FONT SIZE=-1> </FONT></FONT><BR clear=all>
</P>
<P>Network Communication Design<BR>
<A HREF="http://ncdesign.kyushu-id.ac.jp/">http://ncdesign.kyushu-id.ac.jp/<BR>
</A>C&P 1994-1996 Yuriko Ienaga <FONT SIZE=-1><A HREF="mailto:v91102@vgenda.kyushu-id.ac.jp">v91102@vgenda.kyushu-id.ac.jp</A></FONT>
<!--################## (^^) END (^^) ########################--></P>
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -