HTML <td> 标签

实例

一个简单的 HTML 表格，包含两行两列：

  1. <table border="1">
  2.   <tr>
  3.     <th>Month</th>
  4.     <th>Savings</th>
  5.   </tr>
  6.   <tr>
  7.     <td>January</td>
  8.     <td>$100</td>
  9.   </tr>
  10. </table>

定义和用法

<td> 标签定义 HTML 表格中的标准单元格。

HTML 表格有两类单元格：

  • 表头单元 - 包含头部信息（由 th 元素创建）
  • 标准单元 - 包含数据（由 td 元素创建）

td 元素中的文本一般显示为正常字体且左对齐。

浏览器支持

元素 Chrome Internet Explorer / Edge Firefox Safari Opera
<td> Yes Yes Yes Yes Yes

所有浏览器都支持 <td> 标签。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中，td 元素的 “bgcolor”、”height”、”width” 以及 “nowrap” 是不被赞成使用的。

在 XHTML 1.0 Strict DTD 中，td 元素的 “bgcolor”、”height”、”width” 以及 “nowrap” 是不被支持的。

提示和注释

提示：请使用 colspan 和 rowspan 属性来实现内容横跨多个行或列。

可选的属性

属性 值 描述
abbr text 规定单元格中内容的缩写版本。
align left
right
center
justify
char		 规定单元格内容的水平对齐方式。
axis category_name 对单元进行分类。
bgcolor rgb(x,x,x)
#xxxxxx
colorname		 不赞成使用。请使用样式取而代之。
规定单元格的背景颜色。
char character 规定根据哪个字符来进行内容的对齐。
charoff number 规定对齐字符的偏移量。
colspan number 规定单元格可横跨的列数。
headers header_cells’_id 规定与单元格相关的表头。
height pixels
%		 不赞成使用。请使用样式取而代之。
规定表格单元格的高度。
nowrap nowrap 不赞成使用。请使用样式取而代之。
规定单元格中的内容是否折行。
rowspan number 规定单元格可横跨的行数。
scope col
colgroup
row
rowgroup		 定义将表头数据与单元数据相关联的方法。
valign top
middle
bottom
baseline		 规定单元格内容的垂直排列方式。
width pixels
%		 不赞成使用。请使用样式取而代之。
规定表格单元格的宽度。

全局属性

<td> 标签支持 HTML 中的全局属性。

事件属性

<td> 标签支持 HTML 中的事件属性。

TIY 实例

表格

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

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

表格边框

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

  1. <h4>带有普通的边框：</h4>
  2. <table border="1">
  3. <tr>
  4.   <td>First</td>
  5.   <td>Row</td>
  6. </tr>
  7. <tr>
  8.   <td>Second</td>
  9.   <td>Row</td>
  10. </tr>
  11. </table>
  13. <h4>带有粗的边框：</h4>
  14. <table border="8">
  15. <tr>
  16.   <td>First</td>
  17.   <td>Row</td>
  18. </tr>
  19. <tr>
  20.   <td>Second</td>
  21.   <td>Row</td>
  22. </tr>
  23. </table>
  25. <h4>带有很粗的边框：</h4>
  26. <table border="15">
  27. <tr>
  28.   <td>First</td>
  29.   <td>Row</td>
  30. </tr>
  31. <tr>
  32.   <td>Second</td>
  33.   <td>Row</td>
  34. </tr>
  35. </table>

没有边框的表格

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

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

表格中的标题(Headings)

本例演示如何显示表格标题。

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

空单元格

本例展示如何使用” ”处理没有内容的单元格。

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

带有标题的表格

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

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

跨行或跨列的表格单元格

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

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

表格内的标签

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

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

单元格填充(Cell padding)

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

  1. <h4>没有 cellpadding：</h4>
  2. <table border="1">
  3. <tr>
  4.   <td>First</td>
  5.   <td>Row</td>
  6. </tr>
  7. <tr>
  8.   <td>Second</td>
  9.   <td>Row</td>
  10. </tr>
  11. </table>
  13. <h4>带有 cellpadding：</h4>
  14. <table border="1"
  15. cellpadding="10">
  16. <tr>
  17.   <td>First</td>
  18.   <td>Row</td>
  19. </tr>
  20. <tr>
  21.   <td>Second</td>
  22.   <td>Row</td>
  23. </tr>
  24. </table>

单元格间距(Cell spacing)

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

  1. <h4>没有 cellspacing：</h4>
  2. <table border="1">
  3. <tr>
  4.   <td>First</td>
  5.   <td>Row</td>
  6. </tr>
  7. <tr>
  8.   <td>Second</td>
  9.   <td>Row</td>
  10. </tr>
  11. </table>
  13. <h4>带有 cellspacing：</h4>
  14. <table border="1"
  15. cellspacing="10">
  16. <tr>
  17.   <td>First</td>
  18.   <td>Row</td>
  19. </tr>
  20. <tr>
  21.   <td>Second</td>
  22.   <td>Row</td>
  23. </tr>
  24. </table>

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

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

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

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

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

  1. <h4>单元背景：</h4>
  2. <table border="1">
  3. <tr>
  4.   <td bgcolor="red">First</td>
  5.   <td>Row</td>
  6. </tr>
  7. <tr>
  8.   <td
  9.   background="/i/eg_bg_07.gif">
  10.   Second</td>
  11.   <td>Row</td>
  12. </tr>
  13. </table>

在表格单元中排列内容

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

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

框架(frame)属性

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

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

相关页面

HTML DOM 参考手册：TableData 对象