【HTML】table要素の基本

HTMLを学び始めてまもなかったり、意外に柔軟性を効かせづらかったり、とこのtable要素を使ったレイアウトは何気に難しいです。

Excelで作成するような簡素な表であれば、簡単に実現でき重宝することは間違い無いですが、Webサイトであのような簡素でお堅い表を実装することは個人的にほぼみたことありません。

モダンなデザインを目指せば目指すほどで、表すら垢抜けさせようと試行錯誤がなされたデザインになります。

そのような時、table要素の基本を知っていると融通が効いたり、諦めて違う手法で実装しようと判断ができるようになるので、興味がある方はご一緒にどうぞ。

table要素とは？

HTMLの一要素であり、この要素を使用することで、上記の表のようなレイアウトを実現できます。

画像ではなくコードで実装することにより、テキストの大きさやセルの大きさを画面幅問わず調整しやすかったり、スクリーンリーダーでの読み上げもさせやすいなどのメリットがあります。

table要素の周辺知識

表ということもあり、主に以下の場面で使用されます。
整理・比較というのが主な場面ですね。

データの比較表示

• 数値データの整理
• 商品一覧やスケジュールの表示
• 統計情報の提示
• able要素の基本構造

tableを作成する時は、基本的に以下の要素を覚えておくと問題なく作成できると思います。

※tableに関係する要素やプロパティは他にもあるかもしれませんが今回は基本なので

主要な構成要素
<table>: 表全体を定義する親要素
<thead>: 表のヘッダー部分を定義
<tbody>: 表の本体部分を定義
<tfoot>: 表のフッター部分を定義（任意）
<tr>: 行を定義
<th>: 見出しセルを定義
<td>: データセルを定義

実際の使用例

基本的な実装例

<table>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>在庫</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>商品A</td>
      <td>1,000円</td>
      <td>10個</td>
    </tr>
  </tbody>
</table>

スタイリングとレスポンシブ対応

基本的なCSS設定
/* 基本スタイル */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
}

th, td {
  padding: 0.5em;
  border: 1px solid #ddd;
  text-align: left;
}

/* レスポンシブ対応 */
@media screen and (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

アクセシビリティ対応

<table role="grid" aria-label="商品一覧">
  <caption>商品一覧表</caption>
  <thead>
    <tr>
      <th scope="col">商品名</th>
      <th scope="col">価格</th>
    </tr>
  </thead>
  <!-- 以下tbody -->
</table>

実装時の注意点

tableというのは表を作成する要素であり、本記事初期で示した通り、表にすべきデータがあってそれらを比較や整理したい場合に使用するべきです。その為使用場面は考慮すべきですし、ユーザーが見やすい・操作しやすいように意識して実装すべきだと思います。

適切な場面で使う

• 表形式のデータ表示に限定して使用
• レイアウト目的での使用は避ける
• レスポンシブ対応の考慮

ユーザーが操作しやすいように

• 縦積みレイアウトへの変換
• フォントサイズの調整
• アクセシビリティへの配慮

適切なaria属性の使用

• 見出しセルの明確な指定
• スクリーンリーダー対応

まとめ

今回はtable要素について取り上げました。

table要素は、表形式のデータを効果的に表示するための重要なHTML要素です。適切な使用と実装により、ユーザーにとって理解しやすい情報提示が可能となります。

個人的にtableで実装してみたけど、デザイン通りのレスポンシブ対応がtable要素だとしづらいなどの場面に遭遇したり、意外に苦しめられてきた記憶があります。

table要素の基礎について理解しつつ、より良い制作物や実装フローを踏めるようにしていきましょう！