実行できるHTMLドキュメント: HTML テーブル

Q: HTML で表を作るにはどうすればいいですか？

全体を で囲み、行ごとに を書いて、その中にセルを入れます。見出しセルは 、データのセルは です。複数の列にまたがるセルがない限り、どの行もセルの数を揃えます。

Q: th と td の違いは何ですか？

は列や行にラベルを付ける見出しセル、 はデータのセルです。ブラウザは を太字の中央揃えで表示し、スクリーンリーダーは各データセルの前に対応する見出しを読み上げるので、数字の意味が伝わります。

Q: HTML のテーブルに枠線が表示されないのはなぜですか？

テーブルには初期状態で枠線がありません。CSS で付けます: table { border-collapse: collapse; } th, td { border: 1px solid #ccc; }。古い border="1" 属性は廃止されています。

Q: HTML のテーブルをレスポンシブにするには？

テーブルを overflow-x: auto を指定した入れ物に入れます。狭い画面では、ページ全体が横に広がる代わりに、入れ物の中でテーブルが横スクロールします。

HTML でテーブルを作る方法

テーブルは行 (<tr>) でできた <table> 要素で、各行はセルでできています。見出しセルは <th>、データのセルは <td> です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table</title>
  <style>
    th, td { border: 1px solid #9ca3af; padding: 6px 10px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Language</th>
      <th>Year</th>
    </tr>
    <tr>
      <td>Ada</td>
      <td>Python</td>
      <td>2023</td>
    </tr>
    <tr>
      <td>Linus</td>
      <td>C</td>
      <td>2021</td>
    </tr>
  </table>
</body>
</html>

テーブル自体には枠線がないので、セルが見えるように CSS のルールを 1 つだけ追加しています。列はセルから決まります。各行の最初のセルが 1 列目、2 番目のセルが 2 列目という具合です。どの行もセルの数を揃えましょう。<td> を 1 つ消すとその行が途中で終わり、隙間ができます。

<th> のセルは初期状態で太字の中央揃えになります。ただしそれは見た目だけの話で、大事なのはそれがラベルだということです。次の節で説明します。

テーブルの要素

要素	役割
`<table>`	テーブル全体
`<caption>`	テーブルのタイトル。`<table>` の最初の子要素
`<thead>`	ヘッダー行のグループ
`<tbody>`	本体の行のグループ (1 つのテーブルに複数置けます)
`<tfoot>`	合計などのフッター行のグループ
`<tr>`	行
`<th>`	見出しセル
`<td>`	データのセル
`<colgroup>`、`<col>`	列全体にスタイル (幅、背景) を付けるための列

枠線は HTML テーブルの枠線で、複数の列や行にまたがるセルは colspan と rowspan で解説しています。

見出しセル、scope、caption

上端と左端の両方に見出しがあるテーブルでは、各見出しがどちら向きかを示す必要があります。scope="col" は下の列に、scope="row" は横の行にラベルを付けます。<caption> はテーブルに見えるタイトルを付けます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headers and caption</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    caption { font-weight: bold; padding-bottom: 6px; }
    th, td { border: 1px solid #9ca3af; padding: 6px 10px; }
    thead th { background: #e5e7eb; }
    tbody th { text-align: start; }
  </style>
</head>
<body>
  <table>
    <caption>Opening hours</caption>
    <thead>
      <tr>
        <th scope="col">Day</th>
        <th scope="col">Opens</th>
        <th scope="col">Closes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Monday</th>
        <td>9:00</td>
        <td>17:00</td>
      </tr>
      <tr>
        <th scope="row">Saturday</th>
        <td>10:00</td>
        <td>14:00</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

このマークアップなら、スクリーンリーダーは 14:00 のセルに移ったときに「Saturday、Closes、14:00」と読み上げられるので、数字だけが読まれることはありません。見出し行が 1 つだけの単純な表なら、ブラウザは scope がなくても見出しを判断できることが多いですが、書いても手間はかからず、推測の余地がなくなります。

キャプションは、スクリーンリーダーがテーブルにたどり着いたときに読み上げる名前でもあります。テーブルとつながっていない、表の上に置いた見出しよりもキャプションを使いましょう。

thead、tbody、tfoot

この 3 つのグループで行をヘッダー、本体、フッターに分けます。合計を置くのはフッターです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>thead tbody tfoot</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 6px 12px; border-bottom: 1px solid #e5e7eb; }
    thead th { border-bottom: 2px solid #111827; text-align: start; }
    tfoot td, tfoot th { border-top: 2px solid #111827; font-weight: bold; }
    .num { text-align: end; font-variant-numeric: tabular-nums; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Item</th><th scope="col" class="num">Price</th></tr>
    </thead>
    <tbody>
      <tr><td>Notebook</td><td class="num">4.50</td></tr>
      <tr><td>Pens (10)</td><td class="num">11.20</td></tr>
      <tr><td>Backpack</td><td class="num">39.00</td></tr>
    </tbody>
    <tfoot>
      <tr><th scope="row">Total</th><td class="num">54.70</td></tr>
    </tfoot>
  </table>
</body>
</html>

数字を読みやすくする工夫が 2 つあります。text-align: end で小数点の位置を揃え (どの価格も小数点以下 2 桁です)、font-variant-numeric: tabular-nums ですべての数字の幅を同じにしています。

最初の例のように <table> の直下に <tr> を書いても、ブラウザは行の周りに <tbody> を自動で追加します。そのため table > tr のような CSS セレクターは何にも一致しません。ページ上では行は tbody の中にあるからです。table tr を使うか、<tbody> を自分で書きましょう。

テーブルのデザイン: 縞模様、ホバー、幅

:nth-child で 1 行おきに色を付け、:hover でポインターの下の行を強調し、width: 100% でテーブルを入れ物の幅いっぱいに広げます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Striped table</title>
  <style>
    table { width: 100%; border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 8px 12px; text-align: start; }
    thead th { background: #2563eb; color: #fff; }
    tbody tr:nth-child(even) { background: #f3f4f6; }
    tbody tr:hover { background: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Course</th><th scope="col">Lessons</th><th scope="col">Level</th></tr>
    </thead>
    <tbody>
      <tr><td>HTML</td><td>40</td><td>Beginner</td></tr>
      <tr><td>CSS</td><td>55</td><td>Beginner</td></tr>
      <tr><td>JavaScript</td><td>120</td><td>Beginner</td></tr>
      <tr><td>React</td><td>60</td><td>Intermediate</td></tr>
    </tbody>
  </table>
</body>
</html>

text-align: start で見出しのテキストを下のデータと揃えています。指定しないと th は中央揃えです。left ではなく start にすると、右から左に書く言語でも揃え方が正しくなります。

横スクロールするレスポンシブなテーブル

テーブルは中身の幅より狭くなれません。スマートフォンでは、幅の広い表がページ全体を横に押し広げてしまいます。代わりにスクロールする入れ物で囲みましょう。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrolling table</title>
  <style>
    .scroll { max-width: 300px; overflow-x: auto; border: 1px solid #e5e7eb; }
    table { border-collapse: collapse; white-space: nowrap; }
    th, td { padding: 6px 12px; border-bottom: 1px solid #e5e7eb; text-align: start; }
  </style>
</head>
<body>
  <div class="scroll" tabindex="0" role="region" aria-label="Plans">
    <table>
      <thead>
        <tr><th scope="col">Plan</th><th scope="col">Price</th><th scope="col">Courses</th><th scope="col">Certificates</th><th scope="col">Support</th></tr>
      </thead>
      <tbody>
        <tr><td>Free</td><td>0</td><td>Some</td><td>No</td><td>Community</td></tr>
        <tr><td>Pro</td><td>12 per month</td><td>All</td><td>Yes</td><td>Email</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

ここでは入れ物の幅を 300 ピクセルに制限して、スマートフォンの画面の代わりにしています。横にスクロールしてみてください。tabindex="0" でキーボードのユーザーが入れ物にフォーカスして矢印キーでスクロールでき、role="region" と aria-label でその場所に名前が付きます。

テーブルはデータのためのもの

価格、スケジュール、比較、結果など、内容に本当に行と列があるときにテーブルを使います。ページ上で要素を横に並べるために使ってはいけません。レイアウト用のテーブルは、意味のない行と列を読み上げるのでスクリーンリーダーを混乱させ、小さな画面にも対応できません。レイアウトには CSS の flexbox や grid を使います。

よくある間違い

行ごとにセルの数が違う。 短い行が途中で終わり、列が揃わなくなります。
見出しに太字の <td> を使う。 見出しが本物のラベルになるよう <th> を使いましょう。
廃止された属性 border、cellpadding、cellspacing、bgcolor、align を使う。 代わりに CSS を使いましょう。
セルの外、<tr> や <table> の直下に内容を置く。 ブラウザはそれをテーブルの外、たいていは上に移動します。
<caption> の代わりにテーブルの上に見出しを置く。
CSS で table > tr と書く。 ブラウザが <tbody> を挿入しているので、table tr か tbody tr と書きましょう。

よくある質問

HTML で表を作るにはどうすればいいですか？

全体を <table> で囲み、行ごとに <tr> を書いて、その中にセルを入れます。見出しセルは <th>、データのセルは <td> です。複数の列にまたがるセルがない限り、どの行もセルの数を揃えます。

th と td の違いは何ですか？

<th> は列や行にラベルを付ける見出しセル、<td> はデータのセルです。ブラウザは <th> を太字の中央揃えで表示し、スクリーンリーダーは各データセルの前に対応する見出しを読み上げるので、数字の意味が伝わります。

thead、tbody、tfoot は何のためにありますか？

行をテーブルのヘッダー、本体、フッター (合計など) にまとめます。支援技術に構造が伝わり、CSS で狙いやすくなり、長い表を印刷するとブラウザが各ページに <thead> を繰り返し表示できます。

HTML のテーブルに枠線が表示されないのはなぜですか？

テーブルには初期状態で枠線がありません。CSS で付けます: table { border-collapse: collapse; } th, td { border: 1px solid #ccc; }。古い border="1" 属性は廃止されています。

HTML のテーブルをレスポンシブにするには？

テーブルを overflow-x: auto を指定した入れ物に入れます。狭い画面では、ページ全体が横に広がる代わりに、入れ物の中でテーブルが横スクロールします。

HTML テーブル (table) の作り方: 行、列、見出し、キャプション