← カテゴリ一覧に戻る

基本的な表

table, tr, td, caption

HTMLのテーブルは行列状の表形式データを表示するための要素です。表計算ソフトのような格子状のデータ表現に適しています。

デモ：商品リスト表

2024年 人気商品ランキング
商品名カテゴリ価格在庫
ワイヤレスイヤホン家電¥8,980142
メカニカルキーボードPC周辺機器¥14,50058
USBハブ 7ポートPC周辺機器¥3,280320
スマートウォッチ家電¥24,80027

コード例

<table>
  <!-- caption: 表のタイトル（省略可） -->
  <caption>2024年 人気商品ランキング</caption>

  <!-- thead: ヘッダー行 -->
  <thead>
    <tr>
      <th>商品名</th>
      <th>カテゴリ</th>
      <th>価格</th>
      <th>在庫</th>
    </tr>
  </thead>

  <!-- tbody: データ本体 -->
  <tbody>
    <tr>
      <td>ワイヤレスイヤホン</td>
      <td>家電</td>
      <td>¥8,980</td>
      <td>142</td>
    </tr>
    <tr>
      <td>メカニカルキーボード</td>
      <td>PC周辺機器</td>
      <td>¥14,500</td>
      <td>58</td>
    </tr>
  </tbody>
</table>

<style>
  table {
    border-collapse: collapse; /* セル間の隙間をなくす */
    width: 100%;
  }
  th, td {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: left;
  }
  thead tr {
    background-color: #f0f4f8;
  }
  tbody tr:nth-child(even) {
    background-color: #fafafa; /* 縞模様 */
  }
  caption {
    caption-side: top; /* top（デフォルト）または bottom */
    text-align: left;
    font-weight: bold;
    margin-bottom: 0.5em;
  }
</style>

比較：HTMLテーブル vs CSS Grid / Flexbox

観点HTMLテーブルCSS Grid / Flexbox
用途表形式データの表示ページレイアウト・UIの配置
セマンティクス✅ データの関係を表現❌ 視覚的なレイアウトのみ
スクリーンリーダー✅ 行・列の関係を読み上げ❌ 関係性を伝えられない
レスポンシブ対応工夫が必要✅ 柔軟に対応しやすい
ページレイアウト❌ 使うべきではない（古いやり方）✅ 推奨

Tipsテーブルは表形式データのみに使う

HTMLテーブルは行列状の関連データ（スプレッドシートのようなもの）にのみ使用してください。 ページのレイアウトにテーブルを使うのは古い手法で、アクセシビリティやSEOに悪影響を与えます。 レイアウトにはCSS Grid（display: grid）や Flexbox（display: flex）を使いましょう。

  • ✅ 正しい用途：時刻表、価格比較表、データ一覧、スプレッドシート
  • ❌ 誤った用途：ナビゲーションメニュー、画像ギャラリー、フォームのレイアウト

🤖 AIプロンプトテンプレート

以下について、AIへの質問プロンプト例を示します。

- HTMLテーブルを使うべき場面と、使うべきでない場面（レイアウト目的）を教えてください。
- `<thead>`・`<tbody>`・`<tfoot>` に分割する意味と、スクリーンリーダーへの影響を教えてください。
- `border-collapse: collapse` と `border-collapse: separate` の違いと、それぞれのスタイリング例を教えてください。
- `<caption>` 要素の役割と、`caption-side` プロパティで位置を変更する方法を教えてください。
- レスポンシブデザインでテーブルが崩れないようにする主なアプローチ（横スクロール・カード表示など）を教えてください。

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo