HTMLとCSSにおける「DIVsの代わりにテーブルを使用する」プログラミング

2024-07-27

従来、Webページのレイアウトにはテーブルタグ (<table>) がよく用いられていました。しかし近年は、CSSの進化により、テーブルタグよりも柔軟で軽量なレイアウトを実現できるDIVタグ (<div>) が主流となっています。

しかし、特定の状況下では、DIVsよりもテーブルの方が適している場合もあります。例えば、以下のケースが挙げられます。

表形式のデータを表示したい場合
複雑なレイアウトを簡単に実現したい場合
印刷時のレイアウトを崩したくない場合

HTML

テーブルタグを使用するには、まず<table>タグでテーブル要素を定義します。次に、<tr>タグでテーブルの行を、<td>タグでテーブルのセルを定義します。

<table>
  <tr>
    <td>セル1</td>
    <td>セル2</td>
  </tr>
  <tr>
    <td>セル3</td>
    <td>セル4</td>
  </tr>
</table>

CSS

テーブルの見た目をカスタマイズするには、CSSを使用します。例えば、以下のプロパティを用いることができます。

border: セルの境界線を設定します。
padding: セルの内側の余白を設定します。
text-align: セル内のテキストの配置を設定します。

table {
  border: 1px solid black;
  width: 100%;
}

td {
  padding: 10px;
  text-align: center;
}

DIVsの代わりにテーブルを使用するメリット

表形式のデータを表示する際に、コードが簡潔になる。

セマンティック的に意味が曖昧になりやすい。
アクセシビリティの観点から問題がある場合がある。
重くなる可能性がある。

表形式のデータを表示する

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>住所</th>
  </tr>
  <tr>
    <td>田中 太郎</td>
    <td>30歳</td>
    <td>東京都渋谷区</td>
  </tr>
  <tr>
    <td>佐藤 花子</td>
    <td>25歳</td>
    <td>神奈川県横浜市</td>
  </tr>
</table>

table {
  border: 1px solid black;
  width: 100%;
}

th, td {
  padding: 10px;
  text-align: center;
}

複雑なレイアウトを実現する

<table>
  <tr>
    <td rowspan="2">
      <img src="image.jpg" alt="画像">
    </td>
    <td>タイトル</td>
  </tr>
  <tr>
    <td>本文</td>
  </tr>
</table>

table {
  width: 100%;
}

td img {
  width: 200px;
  height: 200px;
}

td:first-child {
  width: 30%;
}

td:last-child {
  width: 70%;
}

<table>
  <tr>
    <th>氏名</th>
    <th>フリガナ</th>
    <th>性別</th>
    <th>生年月日</th>
  </tr>
  <tr>
    <td>田中 太郎</td>
    <td>タナカ タロウ</td>
    <td>男</td>
    <td>1990年1月1日</td>
  </tr>
</table>

table {
  border: 1px solid black;
  width: 100%;
  page-break-inside: avoid;
}

th, td {
  padding: 10px;
  text-align: center;
}

注意事項

テーブルタグはセマンティック的に意味が曖昧になりやすいので、適切な属性を使用することが重要です。
アクセシビリティの観点から、表ヘッダー (<th>) や要約 (<caption>) を使用することが推奨されます。
テーブルは重くなる可能性があるので、必要最低限の機能のみを使用するようにしましょう。

Flexboxは、1次元レイアウトを簡単に作成できるCSSレイアウトモジュールです。子要素を横並びや縦並びに配置したり、余白を調整したりすることができます。

<div class="container">
  <div class="item">アイテム1</div>
  <div class="item">アイテム2</div>
  <div class="item">アイテム3</div>
</div>

.container {
  display: flex;
}

.item {
  padding: 10px;
  border: 1px solid black;
}

Grid Layout

<div class="container">
  <div class="item">アイテム1</div>
  <div class="item">アイテム2</div>
  <div class="item">アイテム3</div>
</div>

.container {
  display: grid;
}

.item {
  padding: 10px;
  border: 1px solid black;
}

CSSフレームワーク

BootstrapやMaterializeなどのCSSフレームワークは、あらかじめ用意されたレイアウトやコンポーネントを使用することができます。

<div class="container">
  <div class="row">
    <div class="col-sm-4">アイテム1</div>
    <div class="col-sm-4">アイテム2</div>
    <div class="col-sm-4">アイテム3</div>
  </div>
</div>