HTMLでテーブルを作成し、スマホビューに対応させる方法

画像のようなテーブルをHTMLで作成し、さらにスマホビューに適応させる方法を解説します。HTMLでテーブルを作成するためには、基本的なタグを使い、CSSを利用してレスポンシブデザインを加えます。

基本的なテーブルの作成方法
レスポンシブデザインの追加方法
実際のテーブルの例
まとめ

基本的なテーブルの作成方法

まず、HTMLでテーブルを作成する基本的なコードを紹介します。以下のコードを使って、テーブルの作成を始めましょう。

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

上記のコードでは、`

`タグを使ってテーブルを作成し、`

`タグで行を定義、`

`でヘッダーセル、`

`でデータセルを指定しています。

レスポンシブデザインの追加方法

次に、スマホビューにも対応するようにCSSを追加していきます。以下のCSSを使うことで、画面サイズに応じてテーブルが適切に表示されるようになります。

table {
  width: 100%;
  border-collapse: collapse;
}

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

@media (max-width: 768px) {
  table {
    border: 0;
  }
  th, td {
    display: block;
    width: 100%;
  }
  tr {
    margin-bottom: 10px;
  }
}

このCSSでは、まずテーブルの基本スタイルを設定し、`@media (max-width: 768px)`でスマホの画面サイズに対応するようにテーブルを縦に並べています。これにより、テーブルが小さな画面でも見やすく表示されます。