HTML <th> タグ

定義と使用方法

<th> タグはHTMLテーブルのタイトルセルを定義します。

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

  • タイトルセル - タイトル情報を含む（使用 <th> 要素の作成（）
  • データセル - データを含む（使用 <td> 要素の作成（）

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

デフォルトでは、<td>要素内のテキストは通常で左寄せです。

参照してください：

HTML チュートリアル：HTMLのテーブル

HTML DOM リファレンスマニュアル：TableHeader オブジェクト

CSS チュートリアル：フォームのスタイルを設定する

例

例 1

三行、二つのタイトルセル、四つのデータセルを含むシンプルなHTMLテーブル：

<table>
  <tr>
    <th>月份</th>
    <th>储蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>￥4500</td>
  </tr>
</table>

亲自试一试

例 2

どのようにアライメントするか <th> 中的内容（使用 CSS）：

<table style="width:100%">
  <tr>
    <th style="text-align:left">月</th>
    <th style="text-align:left">貯金</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>￥4500</td>
  </tr>
</table>

亲自试一试

例 3

テーブルのタイトルセルに背景色を追加する方法（CSSを使用）：

<table>
  <tr>
    <th style="background-color:#FF0000">月</th>
    <th style="background-color:#00FF00">貯金</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
 </table>

亲自试一试

例 4

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

<table>
  <tr>
    <th style="height:100px">月份</th>
    <th style="height:100px">储蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
</table>

亲自试一试

例子 5

如何在表格标题单元格中规定不换行（使用 CSS）：

<table>
  <tr>
    <th>月份</th>
    <th style="white-space:nowrap">为新车存的钱</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
</table>

亲自试一试

例子 6

如何垂直对齐 <th> 中的内容（使用 CSS）：

<table style="width:50%;">
  <tr style="height:100px">
    <th style="vertical-align:bottom">月份</th>
    <th style="vertical-align:bottom">储蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
</table>

亲自试一试

例子 7

如何设置表格标题单元格的宽度（使用 CSS）：

<table style="width:100%">
  <tr>
    <th style="width:70%">月份</th>
    <th style="width:30%">储蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
</table>

亲自试一试

例子 8

如何创建表格标题：

<table>
  <tr>
    <th>姓名</th>
    <th>电邮</th>
    <th>电话</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

亲自试一试

例子 9

如何创建带有标题的表格：

<table>
  <caption>每月储蓄</caption>
  <tr>
    <th>月份</th>
    <th>储蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>￥4500</td>
  </tr>
</table>

亲自试一试

例子 10

如何定义跨越多行或多列的表格单元格：

<table>
  <tr>
    <th>姓名</th>
    <th>电邮</th>
    <th colspan="2">电话</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

亲自试一试

属性

属性 值 描述
abbr 文本 指定标题单元格中内容的缩写版本。
colspan 数字 指定标题单元格应跨越的列数。
headers header_id 指定一个或多个与单元格相关的标题单元格。
rowspan 数字 指定标题单元格应跨越的行数。
scope
  • col
  • colgroup
  • row
  • rowgroup
 表頭セルは列のヘッダー、行のヘッダー、または一連の列や行のヘッダーですか。

グローバル属性

<th> タグは以下のイベント属性もサポートしています HTMLのグローバル属性。

イベント属性

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

デフォルトのCSS設定

ほとんどのブラウザでは以下のデフォルト値を使用して表示されます <th> 要素：

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

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート