HTML <td> 標籤
示例
一個簡單的 HTML 表格,有兩行和四個表格單元格
<table>
<tr>
<td>單元格 A</td>
<td>單元格 B</td>
</tr>
<tr>
<td>單元格 C</td>
<td>單元格 D</td>
</tr>
</table>
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
<td> 標籤定義了 HTML 表格中的標準資料單元格。
HTML 表格有兩種單元格
- 表頭單元格 - 包含表頭資訊(使用 <th> 元素建立)
- 資料單元格 - 包含資料(使用
<td>
元素建立)
預設情況下,<td>
元素中的文字是常規的,並左對齊。
預設情況下,<th> 元素中的文字是粗體且居中的。
瀏覽器支援
元素 | |||||
---|---|---|---|---|---|
<td> | 是 | 是 | 是 | 是 | 是 |
屬性
Attribute | 值 | 描述 |
---|---|---|
colspan | 數字 | 指定單元格應跨越的列數 |
headers | header_id | 指定一個單元格所關聯的一個或多個表頭單元格 |
rowspan | 數字 | 設定單元格應跨越的行數 |
全域性屬性
<td> 標籤還支援 HTML 全域性屬性。
事件屬性
<td> 標籤還支援 HTML 事件屬性。
更多示例
示例
如何對 <td> 中的內容進行對齊(使用 CSS)
<table style="width:100%">
<tr>
<th>月份</th>
<th>儲蓄</th>
</tr>
<tr>
<td>一月</td>
<td style="text-align:right">$100</td>
</tr>
<tr>
<td>二月</td>
<td style="text-align:right">$80</td>
</tr>
</table>
自己動手試一試 »
示例
如何為表格單元格新增背景顏色(使用 CSS)
<table>
<tr>
<th>月份</th>
<th>儲蓄</th>
</tr>
<tr>
<td style="background-color:#FF0000">一月</td>
<td style="background-color:#00FF00">$100</td>
</tr>
</table>
自己動手試一試 »
示例
如何設定表格單元格的高度(使用 CSS)
<table>
<tr>
<th>月份</th>
<th>儲蓄</th>
</tr>
<tr>
<td style="height:100px">一月</td>
<td style="height:100px">$100</td>
</tr>
</table>
自己動手試一試 »
示例
如何指定表格單元格不換行(使用 CSS)
<table>
<tr>
<th>詩歌</th>
</tr>
<tr>
<td style="white-space:nowrap">永遠不要在解釋任何事物時,增加多於解釋該事物所必需的實體數量</td>
</tr>
</table>
自己動手試一試 »
示例
如何垂直對齊 <td> 中的內容(使用 CSS)
<table style="width:50%;">
<tr>
<th>月份</th>
<th>儲蓄</th>
</tr>
<tr style="height:100px">
<td style="vertical-align:bottom">一月</td>
<td style="vertical-align:bottom">$100</td>
</tr>
</table>
自己動手試一試 »
示例
如何設定表格單元格的寬度(使用 CSS)
<table style="width:100%">
<tr>
<th>月份</th>
<th>儲蓄</th>
</tr>
<tr>
<td style="width:70%">一月</td>
<td style="width:30%">$100</td>
</tr>
</table>
自己動手試一試 »
示例
如何建立表頭
<table>
<tr>
<th>姓名</th>
<th>電子郵件</th>
<th>電話</th>
</tr>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>123-45-678</td>
</tr>
</table>
自己動手試一試 »
示例
如何建立帶標題的表格
<table>
<caption>每月儲蓄</caption>
<tr>
<th>月份</th>
<th>儲蓄</th>
</tr>
<tr>
<td>一月</td>
<td>$100</td>
</tr>
<tr>
<td>二月</td>
<td>$80</td>
</tr>
</table>
自己動手試一試 »
示例
如何定義跨越多行或多列的表格單元格
<table>
<tr>
<th>姓名</th>
<th>電子郵件</th>
<th colspan="2">電話</th>
</tr>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>123-45-678</td>
<td>212-00-546</td>
</tr>
</table>
自己動手試一試 »
相關頁面
HTML 教程:HTML 表格
HTML DOM 參考:TableData 物件
CSS 教程:表格樣式
預設 CSS 設定
大多數瀏覽器會顯示 <td>
元素具有以下預設值
td {
display: table-cell;
vertical-align: inherit;
}