📄 表格进阶.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0043)http://www.zjou.edu.cn/te/html/table02.html -->
<HTML><HEAD><TITLE>HTML 语言教程</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2719.2200" name=GENERATOR></HEAD>
<BODY bgColor=#d4d4d4>
<H1 align=center>表格进阶(TABLE ADVANCED)</H1>
<CENTER>
<P>
<HR>
<P></P></CENTER>
<P><!--################## Table Color ########################--><A
name=color></A></P>
<H2><IMG height=20 alt=+ src="表格进阶.files/br20t.gif" width=20
tppabs="http://webclass/html/br20t.gif"> 表格的色彩</H2>
<P><!------Background Color & Image-------></P>
<H3>表元的背景色彩和背景图象<BR><th bgcolor=#> <BR><th background="URL"> <IMG
height=14 src="表格进阶.files/ie.gif" width=80 tppabs="http://webclass/html/ie.gif">
</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=1>
<TBODY>
<TR>
<TH bgColor=#ffaa00>Food</TH>
<TH bgColor=red>Drink</TH>
<TH background=表格进阶.files/image.gif rowSpan=2
tppabs="http://webclass/html/image.gif">Sweet </TH></TR>
<TR bgColor=white>
<TD>A</TD>
<TD>B</TD></TR></TBODY></TABLE><PRE></PRE>
<P><!------Border Color-------></P>
<H3>表格边框的色彩 <IMG height=14 src="表格进阶.files/ie.gif" width=80
tppabs="http://webclass/html/ie.gif"><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 borderColor=#ffaa00 cellSpacing=5 border=5>
<TBODY>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH></TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD></TR></TBODY></TABLE>
<P><!------Light & Dark Border Color-------></P>
<H3>表格边框色彩的亮度控制 <IMG height=14 src="表格进阶.files/ie.gif" width=80
tppabs="http://webclass/html/ie.gif"><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 cellSpacing=5 borderColorDark=maroon borderColorLight=white border=5>
<TBODY>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH></TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD></TR></TBODY></TABLE><PRE></PRE>
<P><!--################## Structured Table ########################--><A
name=group></A></P>
<H2><IMG height=20 alt=+ src="表格进阶.files/br20t.gif" width=20
tppabs="http://webclass/html/br20t.gif"> 表格的分组显示(Structured Table) <IMG
height=14 src="表格进阶.files/ie.gif" width=80
tppabs="http://webclass/html/ie.gif"></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=1>
<CAPTION>
<P></P>
<THEAD>
<P></P></CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></TR></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></TR></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 width=160 border=1>
<CAPTION>
<P></P>
<COLGROUP align=left>
<COLGROUP align=middle>
<COLGROUP align=right>
<THEAD>
<P></P></CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></TR></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></TR></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 width=160 border=1>
<CAPTION>
<P></P>
<COLGROUP>
<COL span=2 align=middle>
<COLGROUP align=right>
<THEAD>
<P></P></CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></TR></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></TR></TBODY></TD></TR></TABLE>
<P><!--################## Frame ########################--><A
name=frame></A></P>
<H2><IMG height=20 alt=+ src="表格进阶.files/br20t.gif" width=20
tppabs="http://webclass/html/br20t.gif"> 表格中边框的显示 <IMG height=14
src="表格进阶.files/ie.gif" width=80 tppabs="http://webclass/html/ie.gif"></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=1 frame=box>
<CAPTION>
<P></P>
<THEAD>
<P></P></CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></TR></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></TR></TBODY></TD></TR></TABLE>
<P><!------above-------></P>
<H3>只显示上边框 <table frame=above></H3>
<TABLE border=1 frame=above>
<CAPTION>
<P></P>
<THEAD>
<P></P></CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></TR></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></TR></TBODY></TD></TR></TABLE>
<P><!------below-------></P>
<H3>只显示下边框 <table frame=below></H3>
<TABLE border=1 frame=below>
<CAPTION>
<P></P>
<THEAD>
<P></P></CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TD></TR></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></TR></TBODY></TD></TR></TABLE>
<P><!------hsides-------></P>
<H3>只显示上、下边框 <table frame=hsides></H3>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -