HTML基礎(chǔ)
HTML 簡(jiǎn)介
HTML基本標(biāo)簽
HTML 元素
HTML 屬性
HTML 標(biāo)題
HTML 段落
HTML 文本格式化
HTML 編輯器
HTML CSS
HTML 鏈接
HTML 圖像
HTML 表格
HTML 列表
HTML 塊
HTML 布局
HTML 表單和輸入
HTML 框架
HTML Iframe
HTML 背景
HTML 顏色
HTML 顏色名
HTML 快速參考
HTML高級(jí)
HTML <!DOCTYPE>
HTML 頭部元素
HTML 腳本
HTML 字符實(shí)體
HTML 統(tǒng)一資源定位器
HTML URL 字符編碼
HTML Web Server
HTML媒體
HTML 多媒體
HTML Object 元素
HTML 音頻
HTML 視頻
?
本文檔使用 PHP中文網(wǎng)手冊(cè) 發(fā)布
文字
HTML 表格
你可以使用 HTML 創(chuàng)建表格。
實(shí)例
表格
<html> <body> <p>每個(gè)表格由 table 標(biāo)簽開(kāi)始。</p> <p>每個(gè)表格行由 tr 標(biāo)簽開(kāi)始。</p> <p>每個(gè)表格數(shù)據(jù)由 td 標(biāo)簽開(kāi)始。</p> <h4>一列：</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>
表格邊框
<html> <body> <h4>帶有普通的邊框：</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>帶有粗的邊框：</h4> <table border="8"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>帶有很粗的邊框：</h4> <table border="15"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>
（可以在本頁(yè)底端找到更多實(shí)例。）
表格
表格由 <table> 標(biāo)簽來(lái)定義。每個(gè)表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
在瀏覽器顯示如下：
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
表格和邊框?qū)傩?!-- /react-text -->
如果不定義邊框?qū)傩裕砀駥⒉伙@示邊框。有時(shí)這很有用，但是大多數(shù)時(shí)候，我們希望顯示邊框。
使用邊框?qū)傩詠?lái)顯示一個(gè)帶有邊框的表格：
<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>
表格的表頭
表格的表頭使用 <th> 標(biāo)簽進(jìn)行定義。
大多數(shù)瀏覽器會(huì)把表頭顯示為粗體居中的文本：
<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
在瀏覽器顯示如下：
| Heading | Another Heading |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
表格中的空單元格
在一些瀏覽器中，沒(méi)有內(nèi)容的表格單元顯示得不太好。如果某個(gè)單元格是空的（沒(méi)有內(nèi)容），瀏覽器可能無(wú)法顯示出這個(gè)單元格的邊框。
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td></td> <td>row 2, cell 2</td> </tr> </table>
瀏覽器可能會(huì)這樣顯示：
注意：這個(gè)空的單元格的邊框沒(méi)有被顯示出來(lái)。為了避免這種情況，在空單元格中添加一個(gè)空格占位符，就可以將邊框顯示出來(lái)。
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td> </td> <td>row 2, cell 2</td> </tr> </table>
在瀏覽器中顯示如下：
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 2 |
<a id="more_examples">更多實(shí)例</a>
沒(méi)有邊框的表格
<html> <body> <h4>這個(gè)表格沒(méi)有邊框：</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>這個(gè)表格也沒(méi)有邊框：</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>
表格中的表頭(Heading)
<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>
空單元格
<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>正如您看到的，其中一個(gè)單元沒(méi)有邊框。這是因?yàn)樗强盏?。在該單元中插入一個(gè)空格后，仍然沒(méi)有邊框。</p>
<p>我們的技巧是在單元中插入一個(gè) no-breaking 空格。</p>
<p>no-breaking 空格是一個(gè)字符實(shí)體。如果您不清楚什么是字符實(shí)體，請(qǐng)閱讀關(guān)于字符實(shí)體的章節(jié)。</p>
<p>no-breaking 空格由和號(hào)開(kāi)始 ("&")，然后是字符"nbsp"，并以分號(hào)結(jié)尾(";")。</p>
</body>
</html>
帶有標(biāo)題的表格
<html> <body> <h4>這個(gè)表格有一個(gè)標(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> <body> <h4>橫跨兩列的單元格：</h4> <table border="1"> <tr> <th>姓名</th> <th colspan="2">電話</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 rowspan="2">電話</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html>
表格內(nèi)的標(biāo)簽
<html> <body> <table border="1"> <tr> <td> <p>這是一個(gè)段落。</p> <p>這是另一個(gè)段落。</p> </td> <td>這個(gè)單元包含一個(gè)表格： <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>這個(gè)單元包含一個(gè)列表： <ul> <li>蘋(píng)果</li> <li>香蕉</li> <li>菠蘿</li> </ul> </td> <td>HELLO</td> </tr> </table> </body> </html>
單元格邊距(Cell padding)
<html> <body> <h4>沒(méi)有 cellpadding：</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>帶有 cellpadding：</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>
單元格間距(Cell spacing)
<html> <body> <h4>沒(méi)有 cellspacing：</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>帶有 cellspacing：</h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>
向表格添加背景顏色或背景圖像
<html> <body> <h4>背景顏色：</h4> <table border="1" bgcolor="red"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>背景圖像：</h4> <table border="1" background="/i/eg_bg_07.gif"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>
向表格單元添加背景顏色或者背景圖像
<html> <body> <h4>單元背景：</h4> <table border="1"> <tr> <td bgcolor="red">First</td> <td>Row</td> </tr> <tr> <td background="/i/eg_bg_07.gif"> Second</td> <td>Row</td> </tr> </table> </body> </html>
在表格單元中排列內(nèi)容
<html> <body> <table width="400" border="1"> <tr> <th align="left">消費(fèi)項(xiàng)目....</th> <th align="right">一月</th> <th align="right">二月</th> </tr> <tr> <td align="left">衣服</td> <td align="right">$241.10</td> <td align="right">$50.20</td> </tr> <tr> <td align="left">化妝品</td> <td align="right">$30.00</td> <td align="right">$44.45</td> </tr> <tr> <td align="left">食物</td> <td align="right">$730.40</td> <td align="right">$650.00</td> </tr> <tr> <th align="left">總計(jì)</th> <th align="right">$1001.50</th> <th align="right">$744.65</th> </tr> </table> </body> </html>
框架(frame)屬性
<html> <body> <p><b>注釋：</b>frame 屬性無(wú)法在 Internet Explorer 中正確地顯示。</p> <p>Table with frame="box":</p> <table frame="box"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="above":</p> <table frame="above"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="below":</p> <table frame="below"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="hsides":</p> <table frame="hsides"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="vsides":</p> <table frame="vsides"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> </body> </html>
表格標(biāo)簽
| 表格 | 描述 |
|---|---|
<table> | 定義表格 |
<caption> | 定義表格標(biāo)題。 |
<th> | 定義表格的表頭。 |
<tr> | 定義表格的行。 |
<td> | 定義表格單元。 |
<thead> | 定義表格的頁(yè)眉。 |
<tbody> | 定義表格的主體。 |
<tfoot> | 定義表格的頁(yè)腳。 |
<col> | 定義用于表格列的屬性。 |
<colgroup> | 定義表格列的組。 |