2 つの見出しと 2 つのセルを持つ簡単な HTML テーブル:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Try it Yourself ❯
他の "Try it Yourself" の例が下にあります。
<th> タグは、HTML テーブルのヘッダセルを定義します。
HTML テーブルには、2 種類のセルがあります:
<th> 要素のテキストは、デフォルトで、太字・中央揃えに配置されます。
<td> 要素のテキストは、デフォルトで、通常の太さ・左揃えに配置されます。
要素 | |||||
---|---|---|---|---|---|
<th> | Yes | Yes | Yes | Yes | Yes |
チップ: コンテンツを複数の列や行にまたがるようにするには、colspan と rowspan 属性を使用してください!
すべてのレイアウト属性は、HTML5 から削除されました。
属性 | 値 | 説明 |
---|---|---|
abbr | text | ヘッダセルのコンテンツの短縮バージョンを指定する |
align | left right center justify char |
HTML5 ではサポート対象外。 ヘッダーセル内のコンテンツを配置する |
axis | category_name | HTML5 ではサポート対象外。 ヘッダーセルを分類する |
bgcolor | rgb(x,x,x) #xxxxxx colorname |
HTML5 ではサポート対象外。 ヘッダーセルの背景色を指定する |
char | character | HTML5 ではサポート対象外。 或る文字にヘッダーセル内のコンテンツを揃える |
charoff | number | HTML5 ではサポート対象外。 char 属性で指定した揃え文字から列のデータをオフセットする文字数を設定する |
colspan | number | ヘッダーセルがまたがる列数を指定する |
headers | header_id | セルが関連する 1 つ以上のヘッダセルを指定する |
height | pixels % |
HTML5 ではサポート対象外。 ヘッダーセルの高さを設定する |
nowrap | nowrap | HTML5 ではサポート対象外。 ヘッダーセル内のコンテンツが折り返されないように指定する |
rowspan | number | ヘッダーセルがまたがる行数を指定する |
scope | col colgroup row rowgroup |
ヘッダセルが列か、行か、列または行のグループのヘッダであるかどうかを指定する |
sorted | reversed number reversed number number reversed |
列のソート方向を定義する |
valign | top middle bottom baseline |
HTML5 ではサポート対象外。 ヘッダーセル内のコンテンツの縦方向の配置l |
width | pixels % |
HTML5 ではサポート対象外。 ヘッダーセルの幅を指定する |
<th> タグは、HTML のグローバル属性もサポートします。
<th> タグは、HTML のイベント属性もサポートします。
テーブルヘッダ
テーブルヘッダの作成方法。
表題付きテーブル
表題付きの HTML テーブル。
テーブル内のタグ
他の要素内に要素を表示する方法。
C複数の行/列にまたがるセル
複数の行または列にまたがるテーブル・セルの定義方法。
HTML チュートリアル:HTML Tables
HTML DOM リファレンス:TableHeader オブジェクト
CSS チュートリアル:Styling Tables
ほとんどのブラウザは、次のデフォルト値を使用して <th> 要素を表示しています:
th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;
}