📄 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" tppabs="http://www.yessir.net/html/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" tppabs="http://www.yessir.net/html/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" tppabs="http://www.yessir.net/html/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" tppabs="http://www.yessir.net/html/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" tppabs="http://www.yessir.net/html/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" tppabs="http://www.yessir.net/html/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" tppabs="http://www.yessir.net/html/br20t.gif" ALT="+" HEIGHT="20" WIDTH="20"> 表格的标题 <img SRC="ie.gif" tppabs="http://www.yessir.net/html/ie.gif" WIDTH="80" HEIGHT="14"></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="../../tppmsgs/msgs0.htm#1" tppabs="http://ncdesign.kyushu-id.ac.jp/"><img SRC="angel-homeg.gif" tppabs="http://www.yessir.net/html/angel-homeg.gif" ALT="NCD HOME" HSPACE="3" VSPACE="10" BORDER="0" HEIGHT="46" WIDTH="55" ALIGN="LEFT"></a>
<b><a HREF="../../tppmsgs/msgs0.htm#2" tppabs="http://www.yessir.net/html_design.html">HTML
Design Guide Main Page<br>
<nobr></a></b><font FACE="'Times New Roman', Arial"><font SIZE="-1"><a HREF="../../tppmsgs/msgs0.htm#8" tppabs="http://www.yessir.net/html/html_design.html#content">Contents</a>
|| <a HREF="page.html" tppabs="http://www.yessir.net/html/page.html">Page</a>
|| <a HREF="font.html" tppabs="http://www.yessir.net/html/font.html">Font</a>
|| <a HREF="text_style.html" tppabs="http://www.yessir.net/html/text_style.html">Text
Style</a> || <a HREF="image.html" tppabs="http://www.yessir.net/html/image.html">Image</a>
|| <a HREF="form.html" tppabs="http://www.yessir.net/html/form.html">Form</a>
|| <a HREF="table.html" tppabs="http://www.yessir.net/html/table.html">Table</a>
|| <a HREF="table02.html" tppabs="http://www.yessir.net/html/table02.html">Table
Advanced</a> <br>
|| <a HREF="frame.html" tppabs="http://www.yessir.net/html/frame.html">Frames</a>
|| <a HREF="marquee.html" tppabs="http://www.yessir.net/html/marquee.html">Marquee</a>
|| <a HREF="inline.html" tppabs="http://www.yessir.net/html/inline.html">Alternative
Inline Elements</a> <br>
</font><font SIZE="-2"><a HREF="tag-index.html" tppabs="http://www.yessir.net/html/tag-index.html">Tag
Index</a> || <a HREF="new.html" tppabs="http://www.yessir.net/html/new.html">What's
New</a></font><font SIZE="-1"> </font></font><br clear="all">
</p>
<p>Network Communication Design<br>
<a HREF="../../tppmsgs/msgs0.htm#1" tppabs="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 + -