📄 表格 标记.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0041)http://www.zjou.edu.cn/te/html/table.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)标记(TAGS)</H1>
<CENTER>
<P>
<HR>
<P></P></CENTER>
<P><!--################## Basic ########################--><A
name=basic></A></P>
<H2><IMG height=20 alt=+ src="表格 标记.files/br20t.gif" width=20
tppabs="http://webclass/html/br20t.gif"> 表格的基本语法</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=1>
<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><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>
<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><!--################## Table Span ########################--><A
name=span></A></P>
<H2><IMG height=20 alt=+ src="表格 标记.files/br20t.gif" width=20
tppabs="http://webclass/html/br20t.gif"> 跨多行、多列的表元(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=1>
<TBODY>
<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></TBODY></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=1>
<TBODY>
<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></TBODY></TABLE><PRE></PRE>
<P><!--################## Size ########################--><A name=size></A></P>
<H2><IMG height=20 alt=+ src="表格 标记.files/br20t.gif" width=20
tppabs="http://webclass/html/br20t.gif"> 表格尺寸设置</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>
<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><!------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 height=100 width=170 border=1>
<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><!------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 cellSpacing=10 border=1>
<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><!------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 cellPadding=10 border=1>
<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><!--################## Text in Table ########################--><A
name=text></A></P>
<H2><IMG height=20 alt=+ src="表格 标记.files/br20t.gif" width=20
tppabs="http://webclass/html/br20t.gif"> 表格内文字的对齐/布局</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 width=160 border=1>
<TBODY>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH></TR>
<TR>
<TD align=left>A</TD>
<TD align=middle>B</TD>
<TD align=right>C</TD></TR></TBODY></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 height=100 border=1>
<TBODY>
<TR>
<TH>Food</TH>
<TH>Drink</TH>
<TH>Sweet</TH>
<TH>Other</TH></TR>
<TR>
<TD vAlign=top>A</TD>
<TD vAlign=center>B</TD>
<TD vAlign=bottom>C</TD>
<TD vAlign=baseline>D</TD></TR></TBODY></TABLE><PRE></PRE>
<P><!--################## Floating Table ########################--><A
name=float></A></P>
<H2><IMG height=20 alt=+ src="表格 标记.files/br20t.gif" width=20
tppabs="http://webclass/html/br20t.gif"> 表格在页面中的对齐/布局(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=1>
<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>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=1>
<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>My favorites...<BR>cookies, chocolates, and more. <BR clear=all></P><PRE></PRE>
<H3><table vspace=# hspace=#> #=space value <IMG height=14
src="表格 标记.files/netscape.gif" width=80
tppabs="http://webclass/html/netscape.gif"> </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=1 hspace="30" vspace="20">
<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>My favorites...<BR>cookies, chocolates, and more. <BR clear=all></P><PRE></PRE>
<P><!--################## Table Caption ########################--><A
name=caption></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><!------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=1>
<CAPTION align=center>
<P>Lunch</P></CAPTION>
<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><!------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=1>
<CAPTION vAlign=bottom>
<P>Lunch</P></CAPTION>
<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><BR>
<HR>
<IMG height=58 alt="NCD HOME" hspace=3 src="表格 标记.files/angel-homeg.gif"
width=69 align=left vspace=10 border=0> <A
href="http://www.zjou.edu.cn/te/html/html.htm">(返回) HTML 语言教程：目录</A>
<BR></BODY></HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -