HTML表格用<table>表示。一個表格可以分成很多行(row)，用<tr>表示；每行又可以分成很多單元格(cell)，用<td>表示。
這三個Tag是創(chuàng)建表格最常用的Tag。
1)
<html>
<body>
<p>
表格所用到的Tag：整個表格開始要用table；每一行開始要用tr；每一單元格開始要用td。
</p>
<h4>只有一行(Row)一列(Column)的表格</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列的表格</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>兩行三列的表格</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
2)
<html>
<head>
<title>萬里獨行客</title>
</head>
<body>
<p>仁為己任不亦重乎？<b>死而后已不亦遠(yuǎn)乎？</b></p>
<table width="100" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<p> </p>
</body>
</html>
查找補(bǔ)充
在缺省情況下，如果不設(shè)置表格的邊界，表格是不顯示邊界的。
1)
<html>
<body>
<h4>缺省情況下，表格沒有邊界。</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>表格Border設(shè)為0，也不顯示邊界：</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
2)
<table border="0">
<html>
<head>
<title>NO IS COO BOY<title>
</held>
<body bgcolor="red">
<p>See you tomorrow.<b>What are you doing</b></p>
<form name="form1" method="post" action="">
<table width="100" border="0">
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</table>
</form>
<p> </p>
</body>
</html>
要顯示表格的邊界，可使用border這個屬性。
<html>
<body>
<h4>表格的邊界值設(shè)為1：</h4>
<table border="1">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>表格的邊界值設(shè)為8，邊界更粗：</h4>
<table border="8">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>表格的邊界值設(shè)為15，邊界更粗：</h4>
<table border="15">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td></tr>
</table>
</body>
</html>
用<th>來表示表格的表頭，表頭的字是粗體顯示的。
<html>
<body>
<h4>有表頭的表格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>電話</th>
<th>傳真</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>豎直方向的表頭：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>電話</th>
<td>555 77 854</td>
</tr>
<tr>
<th>傳真</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
如果表格的單元格<td></td>之間沒有內(nèi)容，那么這個單元格的邊界是不會被顯示出來的，盡管整個表格已設(shè)置邊界值。要顯示這個單元格的邊界，可以插入一個 空格符。
<html>
<body>
<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td></td>
<td>Some text</td>
</tr>
</table>
<p>上面的表格中，有一個單元格里是沒有任何內(nèi)容的，這個空的單元格沒有顯示邊界，雖然整個表格設(shè)了邊界值。</p>
<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td> </td>
<td>Some text</td>
<html>
<body>
<h4>
這個表格有標(biāo)題：
</h4>
<table border="6">
<caption>表格標(biāo)題</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
這個示例演示如何用<caption>在一個表格上加上標(biāo)題。
<html>
<body>
<h4>用colpsan屬性，設(shè)置包含多列的單元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">聯(lián)系方式</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>用rowspan這個屬性，設(shè)置包含多行的單元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">聯(lián)系方式</th>
<td>555 77 854</td>
這個示例演示如何用colspan，rowspan設(shè)置多列或者多行的單元格。
這個例子演示單元格<td></td>里面的內(nèi)容。單元格的內(nèi)容可以是文字，圖片，超鏈接，Form，表格等。
1)
<html>
<body>
<table border="1">
<tr>
<td>
<p>這是一段</p>
<p>這是另外一段。</p>
</td>
<td>這個單元格里包含了一個表格：
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>這個單元格里包含了一個圖片：
<img src = "../images/html_tutorials/mail.gif">
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
2)
在表格中插入文字 示例 插入“0” 把“ ”換成“0”
<html>
<head>
<title>萬里獨行客</title>
</head>
<body>
<p>仁為己任不亦重乎？<b>死而后已不亦遠(yuǎn)乎？</b></p>
<table width="100" height="100" border=="0">
<tr>
<td>0</td>
<td>0</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td> </td>
<td> </td>
</tr>
</table>
<p> </p>
</body>
</html>
<html>
<body>
<h4>沒有cellpadding的表格：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<p>設(shè)置cellpadding屬性，可以改變單元格內(nèi)容和單元格邊界之間的距離。</p>
<h4>以下是設(shè)置了cellpadding屬性的表格：</h4>
<table border="1" cellpadding="10">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>cellpadding屬性值設(shè)置為30的表格：</h4>
<table border="1" cellpadding="30">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
</body>
</html>
這個示例教你如何用cellpadding這個屬性設(shè)置單元格內(nèi)容與單元格邊界之間的距離。
<html>
<body>
<p>Cellspacing屬性表示單元格之間的距離。</p>
<h4>如果表格里沒有設(shè)置cellspacing屬性，缺省情況下，cellspacing值為1。</h4>
<table border="1">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>Cellspacing屬性值設(shè)為0的表格：</h4>
<table border="1" cellspacing="0">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>Cellspacing屬性值設(shè)為20的表格：</h4>
<table border="1" cellspacing="20">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
</body>
</html>
這個示例教你如何用cellspacing這個屬性設(shè)置單元格之間的距離
<html>
<body>
<h4>給表格設(shè)置背景顏色：</h4>
<table border="1" bgcolor="red">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>給表格加背景圖片：</h4>
<table border="1" background="../images/html_tutorials/background.gif">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
</body>
</html>
這個示例演示如何用bgcolor屬性設(shè)置表格的背景顏色，如何用background屬性為表格添加背景圖片。
<html>
<body>
<h4>單元格背景色：</h4>
<table border="1">
<tr>
<td bgcolor="red">第一</td>
<td>行</td>
</tr>
<tr>
<td background="../images/html_tutorials/background.gif">第二</td>
<td>行</td>
</tr>
</table>
</body>
</html>
這個示例演示如何用bgcolor屬性設(shè)置單元格的背景顏色，如何用background屬性為單元格添加背景圖片。
<html>
<body>
<table width="350" border="1">
<tr>
<th align="center">分?jǐn)?shù)</th>
<th align="center">期中考試</th>
<th align="center">期末考試</th>
</tr>
<tr>
<td align="left">芙蓉姐姐</td>
<td align="right">250.10</td>
<td align="right">50000.20</td>
</tr>
<tr>
<td align="left">程菊花</td>
<td align="right">1000.00</td>
<td align="right">5000.45</td>
</tr>
<tr>
<td align="left">周筆暢</td>
<td align="right">2000.40</td>
<td align="right">500.00</td>
</tr>
<tr>
<td align="left">黃新</td>
<td align="right">300.50</td>
<td align="right">800.65</td>
</tr>
</table>
</body>
</html>
這個示例教你如何用align屬性設(shè)置單元格的對齊方式。
