HTML <th>タグ

例

3行、2つのヘッダーセル、4つのデータセルを持つ単純なHTMLテーブル：

<table>
<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>

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

定義と使用法

タグは、HTMLテーブルの<th>ヘッダーセルを定義します。

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

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

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

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

ブラウザのサポート

Element
<th>	Yes	Yes	Yes	Yes	Yes

属性

Attribute	Value	Description
abbr	text	Specifies an abbreviated version of the content in a header cell
colspan	number	Specifies the number of columns a header cell should span
headers	header_id	Specifies one or more header cells a cell is related to
rowspan	number	Specifies the number of rows a header cell should span
scope	col colgroup row rowgroup	Specifies whether a header cell is a header for a column, row, or group of columns or rows

グローバル属性

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

イベント属性

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

その他の例

例

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

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

例

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

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

例

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

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

例

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

<table>
<tr>
    <th>Month</th>
    <th style="white-space:nowrap">My Savings for a new car</th>
</tr>
<tr>
    <td>January</td>
    <td>$100</td>
</tr>
</table>

例

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

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

例

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

<table style="width:100%">
<tr>
    <th style="width:70%">Month</th>
    <th style="width:30%">Savings</th>
</tr>
<tr>
    <td>January</td>
    <td>$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設定

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

th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;
}

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

HTMLリファレンス

HTML Tags