HTML <td>タグ

❮前へ完全なHTMLリファレンス次へ❯

例

2行と4つのテーブルセルを持つ単純なHTMLテーブル：

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

<td>タグは、HTMLテーブルの標準データセルを定義します。

HTMLテーブルには2種類のセルがあります。

ヘッダーセル-ヘッダー情報が含まれます（ <th>要素で作成されます）
データセル-データが含まれています（<td>要素で作成されます）

要素内のテキスト<td>は通常であり、デフォルトでは左揃えになっています。

<th>要素のテキストは太字で、デフォルトでは中央に配置されています。

ブラウザのサポート

Element
<td>	Yes	Yes	Yes	Yes	Yes

属性

Attribute	Value	Description
colspan	number	Specifies the number of columns a cell should span
headers	header_id	Specifies one or more header cells a cell is related to
rowspan	number	Sets the number of rows a cell should span

グローバル属性

この<td>タグは、HTMLのグローバル属性もサポートしています。

イベント属性

この<td>タグは、HTMLのイベント属性もサポートしています。

その他の例

例

<td>内のコンテンツを（CSSを使用して）整列させる方法：

<table style="width:100%">
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr>
    <td>January</td>
    <td style="text-align:right">$100</td>
</tr>
<tr>
    <td>February</td>
    <td style="text-align:right">$80</td>
</tr>
</table>

例

表のセルに背景色を追加する方法（CSSを使用）：

<table>
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr>
    <td style="background-color:#FF0000">January</td>
    <td style="background-color:#00FF00">$100</td>
</tr>
</table>

例

テーブルセルの高さを設定する方法（CSSを使用）：

<table>
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr>
    <td style="height:100px">January</td>
    <td style="height:100px">$100</td>
</tr>
</table>

例

テーブルセルでワードラップを指定しない方法（CSSを使用）：

<table>
<tr>
<th>Poem</th>
</tr>
<tr>
<td style="white-space:nowrap">Never increase, beyond what is necessary, the number of entities required to explain anything</td>
</tr>
</table>

例

<td>内のコンテンツを垂直方向に整列する方法（CSSを使用）：

<table style="width:50%;">
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr style="height:100px">
    <td style="vertical-align:bottom">January</td>
    <td style="vertical-align:bottom">$100</td>
</tr>
</table>

例

テーブルセルの幅を設定する方法（CSSを使用）：

<table style="width:100%">
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr>
    <td style="width:70%">January</td>
    <td style="width:30%">$100</td>
</tr>
</table>

例

テーブルヘッダーを作成する方法：

<table>
<tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
</tr>
<tr>
    <td>John Doe</td>
    <td>[email protected]</td>
    <td>123-45-678</td>
</tr>
</table>

例

キャプション付きのテーブルを作成する方法：

<table>
<caption>Monthly savings</caption>
<tr>
    <th>Month</th>
    <th>Savings</th>
</tr>
<tr>
    <td>January</td>
    <td>$100</td>
</tr>
<tr>
    <td>February</td>
    <td>$80</td>
</tr>
</table>

例

複数の行または1つの列にまたがるテーブルセルを定義する方法：

<table>
<tr>
    <th>Name</th>
    <th>Email</th>
    <th colspan="2">Phone</th>
</tr>
<tr>
    <td>John Doe</td>
    <td>[email protected]</td>
    <td>123-45-678</td>
    <td>212-00-546</td>
</tr>
</table>

デフォルトのCSS設定

ほとんどのブラウザは<td>、次のデフォルト値で要素を表示します。

td {
display: table-cell;
vertical-align: inherit;
}