HTML 表格 · HTML開發手冊

# HTML 表格 HTML 表格 HTML 表格實例: First Name Last Name Points Jill Smith 50 Eve Jackson 94 John Doe 80 Adam Johnson 67 在線實例表格這個例子演示如何在 HTML 文檔中創建表格。（可以在本頁底端找到更多實例。）.. * * * ## HTML 表格實例: | First Name | Last Name | Points | | --- | --- | --- | | Jill | Smith | 50 | | Eve | Jackson | 94 | | John | Doe | 80 | | Adam | Johnson | 67 | ## 在線實例表格這個例子演示如何在 HTML 文檔中創建表格。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <body> <p> 每個表格從一個?table?標簽開始。? 每個表格行從?tr?標簽開始。每個表格的數據從?td?標簽開始。 </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> <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> ~~~ [運行實例 ?](https://www.php.cn/html/html-tables.html#) 點擊 "運行實例" 按鈕查看在線實例（可以在本頁底端找到更多實例。） * * * ## HTML 表格表格由標簽來定義。每個表格均有若干行（由標簽定義），每行被分割為若干單元格（由標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。 ## 表格實例 ~~~ <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 1row 1, cell 2row 2, cell 1row 2, cell 2 * * * ## HTML 表格和邊框屬性如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。使用邊框屬性來顯示一個帶有邊框的表格： ~~~ <table?border="1"> <tr> <td>Row?1,?cell?1</td> <td>Row?1,?cell?2</td> </tr> </table> ~~~ * * * ## HTML 表格表頭表格的表頭使用標簽進行定義。大多數瀏覽器會把表頭顯示為粗體居中的文本： ~~~ <table?border="1"> <tr> <th>Header?1</th> <th>Header?2</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> ~~~ 在瀏覽器顯示如下： | Header 1 | Header 2 | | --- | --- | | row 1, cell 1 | row 1, cell 2 | | row 2, cell 1 | row 2, cell 2 | ## 更多實例沒有邊框的表格本例演示一個沒有邊框的表格。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <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>這個表格沒有邊框:</h4> <table?border="0"> <tr> ??<td>100</td> ~~~ [運行實例 ?](https://www.php.cn/html/html-tables.html#) 點擊 "運行實例" 按鈕查看在線實例表格中的表頭(Heading) 本例演示如何顯示表格表頭。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <body> <h4>水平標題:</h4> <table?border="1"> <tr> ??<th>Name</th> ??<th>Telephone</th> ??<th>Telephone</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>First?Name:</th> ??<td>Bill?Gates</td> </tr> <tr> ??<th>Telephone:</th> ??<td>555?77?854</td> </tr> <tr> ??<th>Telephone:</th> ??<td>555?77?855</td> </tr> </table> </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-tables.html#) 點擊 "運行實例" 按鈕查看在線實例帶有標題的表格本例演示一個帶標題 (caption) 的表格 ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <body> <h4>水平標題:</h4> <table?border="1"> <tr> ??<th>Name</th> ??<th>Telephone</th> ??<th>Telephone</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>First?Name:</th> ??<td>Bill?Gates</td> </tr> <tr> ??<th>Telephone:</th> ??<td>555?77?854</td> </tr> <tr> ??<th>Telephone:</th> ??<td>555?77?855</td> </tr> </table> </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-tables.html#) 點擊 "運行實例" 按鈕查看在線實例跨行或跨列的表格單元格本例演示如何定義跨行或跨列的表格單元格。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <body> <h4>單元格跨兩格:</h4> <table?border="1"> <tr> ??<th>Name</th> ??<th?colspan="2">Telephone</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>First?Name:</th> ??<td>Bill?Gates</td> </tr> <tr> ??<th?rowspan="2">Telephone:</th> ??<td>555?77?854</td> </tr> <tr> ??<td>555?77?855</td> </tr> </table> </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-tables.html#) 點擊 "運行實例" 按鈕查看在線實例表格內的標簽本例演示如何顯示在不同的元素內顯示元素。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <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>這個單元格包含一個列表 ???<ul> ????<li>apples</li> ????<li>bananas</li> ????<li>pineapples</li> ???</ul> ??</td> ??<td>HELLO</td> </tr> </table> </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-tables.html#) 點擊 "運行實例" 按鈕查看在線實例單元格邊距(Cell padding) 本例演示如何使用 Cell padding 來創建單元格內容與其邊框之間的空白。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <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="1"? cellpadding="10"> <tr> ??<td>First</td> ??<td>Row</td> </tr>??? <tr> ??<td>Second</td> ??<td>Row</td> </tr> </table> </body> </html> ~~~ [運行實例 ?](https://www.php.cn/html/html-tables.html#) 點擊 "運行實例" 按鈕查看在線實例單元格間距(Cell spacing) 本例演示如何使用 Cell spacing 增加單元格之間的距離。 ## 實例 ~~~ <!DOCTYPE?html> <html> <head>? <meta?charset="utf-8">? <title>php中文網(php.cn)</title>? </head> <body> <h4>沒有單元格間距:</h4> <table?border="1"> <tr> ??<td>First</td> ??<td>Row</td> </tr> <tr> ??<td>Second</td> ??<td>Row</td> </tr> </table> <h4>單元格間距="0":</h4> <table?border="1"?cellspacing="0"> <tr> ??<td>First</td> ??<td>Row</td> </tr> <tr> ??<td>Second</td> ??<td>Row</td> </tr> </table> <h4>單元格間距="10":</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> ~~~ [運行實例 ?](https://www.php.cn/html/html-tables.html#) 點擊 "運行實例" 按鈕查看在線實例 * * * ## HTML 表格標簽 | 標簽 | 描述 | | :-- | :-- | | [](http://www.php.cn/dic/html/table.html) | 定義表格 | | [](http://www.php.cn/dic/html/th.html) | 定義表格的表頭 | | [](http://www.php.cn/dic/html/tr.html) | 定義表格的行 | | [](http://www.php.cn/dic/html/td.html) | 定義表格單元 | | [](http://www.php.cn/dic/html/caption.html) | 定義表格標題 | | [](http://www.php.cn/dic/html/colgroup.html) | 定義表格列的組 | | [](http://www.php.cn/dic/html/col.html) | 定義用于表格列的屬性 | | [](http://www.php.cn/dic/html/thead.html) | 定義表格的頁眉 | | [](http://www.php.cn/dic/html/tbody.html) | 定義表格的主體 | | [](http://www.php.cn/dic/html/tfoot.html) | 定義表格的頁腳 |