Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

トップページ
HTMLタグ辞典
<table> / <tr> / <td> / <th>

<table> / <tr> / <td> / <th>

『<table>』はHTMLでテーブル（表）を作成するための要素で、『<tr>』で行、『<td>』でデータセル、『<th>』で見出しセルを定義します。

構文

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
</table>

タグ・属性一覧

タグ / 属性	概要
<table>	テーブル全体を囲むコンテナ要素です。
<tr>	テーブルの1行（Table Row）を表します。
<td>	テーブルのデータセル（Table Data）を表します。通常のデータを入れます。
<th>	テーブルの見出しセル（Table Header）を表します。テキストは太字・中央揃えになります。
scope	『<th>』の見出しがどの方向のセルに対応するかを指定します。『col』（列）・『row』（行）・『colgroup』・『rowgroup』が指定できます。

サンプルコード

<table border="1">
  <tr>
    <!-- scope="col" で列方向の見出しと明示 -->
    <th scope="col">名前</th>
    <th scope="col">言語</th>
    <th scope="col">用途</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>マークアップ言語</td>
    <td>Webページの構造</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>スタイルシート言語</td>
    <td>Webページの見た目</td>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>プログラミング言語</td>
    <td>Webページの動き</td>
  </tr>
</table>

実行結果

3列4行のテーブルが表示されます。1行目が太字の見出し（名前・言語・用途）、2〜4行目が各言語のデータになります。

| 名前       | 言語               | 用途              |
|------------|--------------------|-------------------|
| HTML       | マークアップ言語   | Webページの構造   |
| CSS        | スタイルシート言語 | Webページの見た目 |
| JavaScript | プログラミング言語 | Webページの動き   |

概要

HTMLのテーブルは**表形式のデータ**を表示する目的に使います。かつてはテーブルを使ってページのレイアウトを組む手法がありましたが、現在はCSSのFlexboxやGridを使うのが正しい方法です。テーブルはあくまでデータの表示に使いましょう。

『<th>』に『scope』属性を付けると、見出しセルがどの行・列に対応するかをスクリーンリーダーなどの支援技術に明示できます。アクセシビリティ向上のために積極的に活用しましょう。列の見出しには『scope="col"』、行の見出しには『scope="row"』を使います。

テーブルをより意味のある構造にするための要素（『<thead>』・『<tbody>』・『<tfoot>』・『<caption>』）については『thead / tbody / tfoot / caption』をご覧ください。セルの結合については『colspan / rowspan』を参照してください。