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) | 定义表格的页脚 |