HTML 表格

你可以使用 HTML 创建表格。

实例

表格

这个例子演示如何在 HTML 文档中创建表格。 

  1. <html>
  3. <body>
  5. <p>每个表格由 table 标签开始。</p>
  6. <p>每个表格行由 tr 标签开始。</p>
  7. <p>每个表格数据由 td 标签开始。</p>
  9. <h4>一列：</h4>
  10. <table border="1">
  11. <tr>
  12.   <td>100</td>
  13. </tr>
  14. </table>
  16. <h4>一行三列：</h4>
  17. <table border="1">
  18. <tr>
  19.   <td>100</td>
  20.   <td>200</td>
  21.   <td>300</td>
  22. </tr>
  23. </table>
  25. <h4>两行三列：</h4>
  26. <table border="1">
  27. <tr>
  28.   <td>100</td>
  29.   <td>200</td>
  30.   <td>300</td>
  31. </tr>
  32. <tr>
  33.   <td>400</td>
  34.   <td>500</td>
  35.   <td>600</td>
  36. </tr>
  37. </table>
  39. </body>
  40. </html>

表格边框

本例演示各种类型的表格边框。 

  1. <html>
  3. <body>
  5. <h4>带有普通的边框：</h4>  
  6. <table border="1">
  7. <tr>
  8.   <td>First</td>
  9.   <td>Row</td>
  10. </tr>   
  11. <tr>
  12.   <td>Second</td>
  13.   <td>Row</td>
  14. </tr>
  15. </table>
  17. <h4>带有粗的边框：</h4>  
  18. <table border="8">
  19. <tr>
  20.   <td>First</td>
  21.   <td>Row</td>
  22. </tr>   
  23. <tr>
  24.   <td>Second</td>
  25.   <td>Row</td>
  26. </tr>
  27. </table>
  29. <h4>带有很粗的边框：</h4>  
  30. <table border="15">
  31. <tr>
  32.   <td>First</td>
  33.   <td>Row</td>
  34. </tr>   
  35. <tr>
  36.   <td>Second</td>
  37.   <td>Row</td>
  38. </tr>
  39. </table>
  41. </body>
  42. </html>

（更多实例。）

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

  1. <table border="1">
  2. <tr>
  3. <td>row 1, cell 1</td>
  4. <td>row 1, cell 2</td>
  5. </tr>
  6. <tr>
  7. <td>row 2, cell 1</td>
  8. <td>row 2, cell 2</td>
  9. </tr>
  10. </table>

在浏览器显示如下：

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

  1. <table border="1">
  2. <tr>
  3. <td>Row 1, cell 1</td>
  4. <td>Row 1, cell 2</td>
  5. </tr>
  6. </table>

表格的表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

  1. <table border="1">
  2. <tr>
  3. <th>Heading</th>
  4. <th>Another Heading</th>
  5. </tr>
  6. <tr>
  7. <td>row 1, cell 1</td>
  8. <td>row 1, cell 2</td>
  9. </tr>
  10. <tr>
  11. <td>row 2, cell 1</td>
  12. <td>row 2, cell 2</td>
  13. </tr>
  14. </table>

在浏览器显示如下：

Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

  1. <table border="1">
  2. <tr>
  3. <td>row 1, cell 1</td>
  4. <td>row 1, cell 2</td>
  5. </tr>
  6. <tr>
  7. <td></td>
  8. <td>row 2, cell 2</td>
  9. </tr>
  10. </table>

浏览器可能会这样显示：

表格中的空单元格

注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

  1. <table border="1">
  2. <tr>
  3. <td>row 1, cell 1</td>
  4. <td>row 1, cell 2</td>
  5. </tr>
  6. <tr>
  7. <td>&nbsp;</td>
  8. <td>row 2, cell 2</td>
  9. </tr>
  10. </table>

在浏览器中显示如下：

row 1, cell 1 row 1, cell 2
row 2, cell 2

更多实例

没有边框的表格

本例演示一个没有边框的表格。 

  1. <html>
  3. <body>
  5. <h4>这个表格没有边框：</h4>
  6. <table>
  7. <tr>
  8.   <td>100</td>
  9.   <td>200</td>
  10.   <td>300</td>
  11. </tr>
  12. <tr>
  13.   <td>400</td>
  14.   <td>500</td>
  15.   <td>600</td>
  16. </tr>
  17. </table>
  19. <h4>这个表格也没有边框：</h4>
  20. <table border="0">
  21. <tr>
  22.   <td>100</td>
  23.   <td>200</td>
  24.   <td>300</td>
  25. </tr>
  26. <tr>
  27.   <td>400</td>
  28.   <td>500</td>
  29.   <td>600</td>
  30. </tr>
  31. </table>
  33. </body>
  34. </html>

表格中的表头(Heading)

本例演示如何显示表格表头。 

  1. <html>
  3. <body>
  5. <h4>表头：</h4>
  6. <table border="1">
  7. <tr>
  8.   <th>姓名</th>
  9.   <th>电话</th>
  10.   <th>电话</th>
  11. </tr>
  12. <tr>
  13.   <td>Bill Gates</td>
  14.   <td>555 77 854</td>
  15.   <td>555 77 855</td>
  16. </tr>
  17. </table>
  19. <h4>垂直的表头：</h4>
  20. <table border="1">
  21. <tr>
  22.   <th>姓名</th>
  23.   <td>Bill Gates</td>
  24. </tr>
  25. <tr>
  26.   <th>电话</th>
  27.   <td>555 77 854</td>
  28. </tr>
  29. <tr>
  30.   <th>电话</th>
  31.   <td>555 77 855</td>
  32. </tr>
  33. </table>
  35. </body>
  36. </html>

空单元格

本例展示如何使用 "&nbsp;" 处理没有内容的单元格。 

  1. <html>
  3. <body>
  5. <table border="1">
  6. <tr>
  7.   <td>Some text</td>
  8.   <td>Some text</td>
  9. </tr>
  10. <tr>
  11.   <td></td>
  12.   <td>Some text</td>
  13. </tr>
  14. </table>
  16. <p>正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。</p>
  18. <p>我们的技巧是在单元中插入一个 no-breaking 空格。</p>
  20. <p>no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体，请阅读关于字符实体的章节。</p>
  22. <p>no-breaking 空格由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")。</p>
  24. </body>
  25. </html>

带有标题的表格

本例演示一个带标题 (caption) 的表格 

  1. <html>
  3. <body>
  5. <h4>这个表格有一个标题，以及粗边框：</h4>
  7. <table border="6">
  8. <caption>我的标题</caption>
  9. <tr>
  10.   <td>100</td>
  11.   <td>200</td>
  12.   <td>300</td>
  13. </tr>
  14. <tr>
  15.   <td>400</td>
  16.   <td>500</td>
  17.   <td>600</td>
  18. </tr>
  19. </table>
  21. </body>

跨行或跨列的表格单元格

本例演示如何定义跨行或跨列的表格单元格。 

  1. <html>
  3. <body>
  5. <h4>横跨两列的单元格：</h4>
  6. <table border="1">
  7. <tr>
  8.   <th>姓名</th>
  9.   <th colspan="2">电话</th>
  10. </tr>
  11. <tr>
  12.   <td>Bill Gates</td>
  13.   <td>555 77 854</td>
  14.   <td>555 77 855</td>
  15. </tr>
  16. </table>
  18. <h4>横跨两行的单元格：</h4>
  19. <table border="1">
  20. <tr>
  21.   <th>姓名</th>
  22.   <td>Bill Gates</td>
  23. </tr>
  24. <tr>
  25.   <th rowspan="2">电话</th>
  26.   <td>555 77 854</td>
  27. </tr>
  28. <tr>
  29.   <td>555 77 855</td>
  30. </tr>
  31. </table>
  33. </body>
  34. </html>

表格内的标签

本例演示如何显示在不同的元素内显示元素。 

  1. <html>
  3. <body>
  5. <table border="1">
  6. <tr>
  7.   <td>
  8.    <p>这是一个段落。</p>
  9.    <p>这是另一个段落。</p>
  10.   </td>
  11.   <td>这个单元包含一个表格：
  12.    <table border="1">
  13.    <tr>
  14.      <td>A</td>
  15.      <td>B</td>
  16.    </tr>
  17.    <tr>
  18.      <td>C</td>
  19.      <td>D</td>
  20.    </tr>
  21.    </table>
  22.   </td>
  23. </tr>
  24. <tr>
  25.   <td>这个单元包含一个列表：
  26.    <ul>
  27.     <li>苹果</li>
  28.     <li>香蕉</li>
  29.     <li>菠萝</li>
  30.    </ul>
  31.   </td>
  32.   <td>HELLO</td>
  33. </tr>
  34. </table>
  36. </body>
  37. </html>

单元格边距(Cell padding)

本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。 

  1. <html>
  3. <body>
  5. <h4>没有 cellpadding：</h4>
  6. <table border="1">
  7. <tr>
  8.   <td>First</td>
  9.   <td>Row</td>
  10. </tr>   
  11. <tr>
  12.   <td>Second</td>
  13.   <td>Row</td>
  14. </tr>
  15. </table>
  17. <h4>带有 cellpadding：</h4>
  18. <table border="1" 
  19. cellpadding="10">
  20. <tr>
  21.   <td>First</td>
  22.   <td>Row</td>
  23. </tr>   
  24. <tr>
  25.   <td>Second</td>
  26.   <td>Row</td>
  27. </tr>
  28. </table>
  30. </body>
  31. </html>

单元格间距(Cell spacing)

本例演示如何使用 Cell spacing 增加单元格之间的距离。 

  1. <html>
  3. <body>
  5. <h4>没有 cellspacing：</h4>
  6. <table border="1">
  7. <tr>
  8.   <td>First</td>
  9.   <td>Row</td>
  10. </tr>   
  11. <tr>
  12.   <td>Second</td>
  13.   <td>Row</td>
  14. </tr>
  15. </table>
  17. <h4>带有 cellspacing：</h4>
  18. <table border="1" 
  19. cellspacing="10">
  20. <tr>
  21.   <td>First</td>
  22.   <td>Row</td>
  23. </tr>   
  24. <tr>
  25.   <td>Second</td>
  26.   <td>Row</td>
  27. </tr>
  28. </table>
  30. </body>
  31. </html>

向表格添加背景颜色或背景图像

本例演示如何向表格添加背景。 

  1. <html>
  3. <body>
  5. <h4>背景颜色：</h4>
  6. <table border="1" 
  7. bgcolor="red">
  8. <tr>
  9.   <td>First</td>
  10.   <td>Row</td>
  11. </tr>   
  12. <tr>
  13.   <td>Second</td>
  14.   <td>Row</td>
  15. </tr>
  16. </table>
  18. <h4>背景图像：</h4>
  19. <table border="1" 
  20. background="/i/eg_bg_07.gif">
  21. <tr>
  22.   <td>First</td>
  23.   <td>Row</td>
  24. </tr>   
  25. <tr>
  26.   <td>Second</td>
  27.   <td>Row</td>
  28. </tr>
  29. </table>
  31. </body>
  32. </html>

向表格单元添加背景颜色或者背景图像

本例演示如何向一个或者更多表格单元添加背景。 

  1. <html>
  3. <body>
  5. <h4>单元背景：</h4>  
  6. <table border="1">
  7. <tr>
  8.   <td bgcolor="red">First</td>
  9.   <td>Row</td>
  10. </tr>   
  11. <tr>
  12.   <td 
  13.   background="/i/eg_bg_07.gif">
  14.   Second</td>
  15.   <td>Row</td>
  16. </tr>
  17. </table>
  19. </body>
  20. </html>

在表格单元中排列内容

本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。 

  1. <html>
  3. <body>
  5. <table width="400" border="1">
  6.  <tr>
  7.   <th align="left">消费项目....</th>
  8.   <th align="right">一月</th>
  9.   <th align="right">二月</th>
  10.  </tr>
  11.  <tr>
  12.   <td align="left">衣服</td>
  13.   <td align="right">$241.10</td>
  14.   <td align="right">$50.20</td>
  15.  </tr>
  16.  <tr>
  17.   <td align="left">化妆品</td>
  18.   <td align="right">$30.00</td>
  19.   <td align="right">$44.45</td>
  20.  </tr>
  21.  <tr>
  22.   <td align="left">食物</td>
  23.   <td align="right">$730.40</td>
  24.   <td align="right">$650.00</td>
  25.  </tr>
  26.  <tr>
  27.   <th align="left">总计</th>
  28.   <th align="right">$1001.50</th>
  29.   <th align="right">$744.65</th>
  30.  </tr>
  31. </table>
  33. </body>
  34. </html>

框架(frame)属性

本例演示如何使用 "frame" 属性来控制围绕表格的边框。 

  1. <html>
  2. <body>
  4. <p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>
  6. <p>Table with frame="box":</p>
  7. <table frame="box">
  8.   <tr>
  9.     <th>Month</th>
  10.     <th>Savings</th>
  11.   </tr>
  12.   <tr>
  13.     <td>January</td>
  14.     <td>$100</td>
  15.   </tr>
  16. </table>
  18. <p>Table with frame="above":</p>
  19. <table frame="above">
  20.   <tr>
  21.     <th>Month</th>
  22.     <th>Savings</th>
  23.   </tr>
  24.   <tr>
  25.     <td>January</td>
  26.     <td>$100</td>
  27.   </tr>
  28. </table>
  30. <p>Table with frame="below":</p>
  31. <table frame="below">
  32.   <tr>
  33.     <th>Month</th>
  34.     <th>Savings</th>
  35.   </tr>
  36.   <tr>
  37.     <td>January</td>
  38.     <td>$100</td>
  39.   </tr>
  40. </table>
  42. <p>Table with frame="hsides":</p>
  43. <table frame="hsides">
  44.   <tr>
  45.     <th>Month</th>
  46.     <th>Savings</th>
  47.   </tr>
  48.   <tr>
  49.     <td>January</td>
  50.     <td>$100</td>
  51.   </tr>
  52. </table>
  54. <p>Table with frame="vsides":</p>
  55. <table frame="vsides">
  56.   <tr>
  57.     <th>Month</th>
  58.     <th>Savings</th>
  59.   </tr>
  60.   <tr>
  61.     <td>January</td>
  62.     <td>$100</td>
  63.   </tr>
  64. </table>
  66. </body>
  67. </html>

表格标签

表格 描述
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。