📄 table.html
字号:
<HTML>
<HEAD>
<TITLE>清华大学图书馆主页 - INTERNET 教室 - HTML 语言教程</TITLE>
</HEAD>
<BODY BGCOLOR="#D4D4D4">
<H1 ALIGN=CENTER>表格(TABLE)标记(TAGS)</H1>
<CENTER><P>
<HR></P></CENTER>
<P><!--################## Basic ########################--><A NAME="basic"></A></P>
<H2><IMG SRC="br20t.gif" ALT="+" HEIGHT=20 WIDTH=20> 表格的基本语法</H2>
<H3><table>...</table> - 定义表格<BR>
<tr> - 定义表行<BR>
<th> - 定义表头<BR>
<td> - 定义表元(表格的具体数据)</H3>
带边框的表格：
<PRE><table border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
</PRE>
<TABLE BORDER>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</TABLE>
<P>
<BR>
不带边框的表格：
<PRE><table>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
</PRE>
<TABLE>
<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><!--################## Table Span ########################--><A NAME="span"></A></P>
<H2><IMG SRC="br20t.gif" ALT="+" HEIGHT=20 WIDTH=20> 跨多行、多列的表元(Table Span)</H2>
<P><!------Colspan-------></P>
<H3>跨多列的表元 <th colspan=#></H3>
<PRE><table border>
<tr><th colspan=3> Morning Menu</th>
<tr><th>Food</th> <th>Drink</th> <th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
</PRE>
<TABLE BORDER>
<TR>
<TH colspan=3>Morning Menu</TH>
</TR>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</TABLE>
<P><!------Rowspan-------></P>
<H3>跨多行的表元 <th rowspan=#></H3>
<PRE><table border>
<tr><th rowspan=3> Morning Menu</th>
<th>Food</th> <td>A</td></tr>
<tr><th>Drink</th> <td>B</td></tr>
<tr><th>Sweet</th> <td>C</td></tr>
</table>
</PRE>
<TABLE BORDER>
<TR>
<TH rowspan=3>Morning Menu</TH>
<TH>Food</TH>
<TD>A</TD>
</TR>
<TR>
<TH>Drink</TH>
<TD>B</TD>
</TR>
<TR>
<TH>Sweet</TH>
<TD>C</TD>
</TR>
</TABLE>
<PRE>
</PRE>
<P><!--################## Size ########################--><A NAME="size"></A></P>
<H2><IMG SRC="br20t.gif" ALT="+" HEIGHT=20 WIDTH=20> 表格尺寸设置</H2>
<P><!------Border-------></P>
<H3><table border=#></H3>
边框尺寸设置：
<PRE><table border=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
</PRE>
<TABLE BORDER=10 >
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</TABLE>
<P><!------Length-------></P>
<H3><table border width=# height=#></H3>
表格尺寸设置：
<PRE><table border width=170 height=100>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
</PRE>
<TABLE border WIDTH="170" HEIGHT="100" >
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</TABLE>
<P><!------CellSpacing-------></P>
<H3><table border cellspacing=#></H3>
表元间隙设置：
<PRE><table border cellspacing=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
</PRE>
<TABLE border CELLSPACING=10 >
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</TABLE>
<P><!------CellPadding-------></P>
<H3><table border cellpadding=#></H3>
表元内部空白设置：
<PRE><table border cellpadding=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
</PRE>
<TABLE border CELLPADDING=10 >
<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><!--################## Text in Table ########################--><A NAME="text"></A></P>
<H2><IMG SRC="br20t.gif" ALT="+" HEIGHT=20 WIDTH=20> 表格内文字的对齐/布局</H2>
<P><!------ALIGN-------></P>
<H3><tr align=#> </H3>
<H3><th align=#> #=left, center, right</H3>
<H3><td align=#> </H3>
<PRE><table border width=160>
<tr>
<th>Food</th><th>Drink</th><th>Sweet</th>
<tr>
<td align=left>A</td>
<td align=center>B</td>
<td align=right>C</td>
</table>
</PRE>
<TABLE border WIDTH="160" >
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
</TR>
<TR>
<TD align=left>A</TD>
<TD align=center>B</TD>
<TD align=right>C</TD>
</TR>
</TABLE>
<P><!------VALIGN-------></P>
<H3><tr valign=#> </H3>
<H3><th valign=#> #=top, middle, bottom, baseline</H3>
<H3><td valign=#> </H3>
<PRE><table border height=100>
<tr>
<th>Food</th><th>Drink</th>
<th>Sweet</th><th>Other</th>
<tr>
<td valign=top>A</td>
<td valign=middle>B</td>
<td valign=bottom>C</td>
<td valign=baseline>D</td>
</table>
</PRE>
<TABLE border HEIGHT="100" >
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TH>Other</TH>
</TR>
<TR>
<TD valign=top>A</TD>
<TD valign=middle>B</TD>
<TD valign=bottom>C</TD>
<TD valign=baseline>D</TD>
</TR>
</TABLE>
<PRE>
</PRE>
<P><!--################## Floating Table ########################--><A NAME="float"></A></P>
<H2><IMG SRC="br20t.gif" ALT="+" HEIGHT=20 WIDTH=20> 表格在页面中的对齐/布局(Floating Table)</H2>
<P><!------left-------></P>
<H3><table align=left> </H3>
<DL>
<PRE><table align="left" border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
My favorites...<br>
cookies, chocolates, and more.
</PRE>
</DL>
<TABLE ALIGN=LEFT border>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</TABLE>
<P>My favorites...<BR>
cookies, chocolates, and more. <BR clear=all>
</P>
<PRE>
</PRE>
<P><!------right-------></P>
<H3><table align=right> </H3>
<TABLE ALIGN=RIGHT border>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</TABLE>
<P>My favorites...<BR>
cookies, chocolates, and more. <BR clear=all>
</P>
<PRE>
</PRE>
<H3><table vspace=# hspace=#> #=space value <IMG SRC="netscape.gif" HEIGHT=14 WIDTH=80>
</H3>
<DL>
<PRE><table align="left" border vspace=20 hspace=30>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
My favorites...<br>
cookies, chocolates, and more.
</PRE>
</DL>
<TABLE ALIGN=LEFT border vspace="20" hspace="30" >
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</TABLE>
<P>My favorites...<BR>
cookies, chocolates, and more. <BR clear=all>
</P>
<PRE>
</PRE>
<P><!--################## Table Caption ########################--><A NAME="caption"></A></P>
<H2><IMG SRC="br20t.gif" ALT="+" HEIGHT=20 WIDTH=20> 表格的标题 <IMG SRC="ie.gif"></H2>
<P><!------Caption align-------></P>
<H3><caption align=#> ... </caption> #=left, center, right</H3>
<PRE><table border>
<caption align=center>Lunch</caption>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
</PRE>
<TABLE border>
<CAPTION align=center>
<P>Lunch</P>
</CAPTION>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</TABLE>
<P><!------Caption Valign-------></P>
<H3><caption valign=#> ... </caption> #=top, bottom</H3>
<UL>
<LI><FONT SIZE=-1>valign=top is default.</FONT></LI>
</UL>
<PRE><table border>
<caption valign=bottom>Lunch</caption>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
</PRE>
<TABLE border>
<CAPTION valign=bottom>
<P>Lunch</P>
</CAPTION>
<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><!--################## (^^) 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 + -