HTMLでのレスポンシブテーブルの作成 – HTMLで始めるホームページ作成

HTMLでのレスポンシブテーブルの作成 – HTMLで始めるホームページ作成

ホームページの制作において、テーブルはデータの表示において非常に有用です。しかし、モバイルデバイスでも見やすいレスポンシブテーブルを作成することは少し難しいかもしれません。本記事では、そのための簡単な方法をご紹介します。

テーブルの基本構造

まずは、基本的なHTMLテーブルの構造を確認しましょう。

<table>
  <thead>
    <tr>
      <th>ヘッダー1</th>
      <th>ヘッダー2</th>
      <th>ヘッダー3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>データ1</td>
      <td>データ2</td>
      <td>データ3</td>
    </tr>
    <tr>
      <td>データ4</td>
      <td>データ5</td>
      <td>データ6</td>
    </tr>
  </tbody>
</table>
  

レスポンシブ対応のためのCSS

次に、CSSを使用してテーブルをレスポンシブにする方法を見てみましょう。以下のCSSを使用することで、テーブルが小さい画面でも見やすくなります。

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}
@media screen and (max-width: 600px) {
  table thead {
    display: none;
  }
  table, table tbody, table tr, table td {
    display: block;
    width: 100%;
  }
  table tr {
    margin-bottom: 15px;
  }
  table td {
    text-align: right;
    padding-left: 50%;
    position: relative;
  }
  table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 50%;
    padding-left: 10px;
    font-weight: bold;
    text-align: left;
  }
}
  

使い方と適用例

上述のCSSを適用することで、各テーブルセルに data-label 属性を追加し、テーブルヘッダーの内容を指定します。

<tr>
  <td data-label="ヘッダー1">データ1</td>
  <td data-label="ヘッダー2">データ2</td>
  <td data-label="ヘッダー3">データ3</td>
</tr>
  

データが多い場合は、スクロール可能なテーブルにすることで表示を改善できます。

まとめ

このようにCSSを活用することで、HTMLテーブルを簡単にレスポンシブ対応にできます。さらに詳細な情報は、MDN Web Docs(外部リンク)で確認してください。ホームページ作成時には、ぜひこの技術を活用しましょう。