HTMLとCSSのみでテーブルを作成する代替方法

2024-09-01

HTMLとCSSのみでテーブルを作成する方法

HTMLとCSSを使って、テーブルのようなレイアウトを構築する方法について説明します。

HTMLで基本構造を構築する

まず、HTMLの<div>タグを使って、テーブルの行と列の構造を定義します。

<div class="table">
  <div class="row">
    <div class="cell">Cell 1</div>
    <div class="cell">Cell 2</div>
    <div class="cell">Cell 3</div>
  </div>
  <div class="row">
    <div class="cell">Cell 4</div>
    <div class="cell">Cel   l 5</div>
    <div class="cell">Cell    6</div>
  </div>
</div>

CSSでスタイルを適用する

次に、CSSを使って、<div>タグにテーブルのスタイルを適用します。

.table {
  border-collapse: collapse;
}

.row {
  display: flex;
}

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

解説

.tableクラス: テーブル全体のスタイルを定義します。
.rowクラス: 行のスタイルを定義します。display: flex;を使って、行内の要素を横に並べます。
.cellクラス: セルのスタイルを定義します。borderとpaddingプロパティを使って、セルに境界線と内側のスペースを設定します。

応用例

ヘッダ行: <thead>タグの代わりに、最初の行にheaderクラスを適用することで、ヘッダ行を表現できます。
行の背景色: 行ごとに異なる背景色を設定するために、行のクラスに異なる背景色を設定します。
列幅: 列の幅を調整するために、セルの幅を設定します。

HTMLコード

<div class="table">
  <div class="row">
    <div class="cell">Cell 1</div>
    <div class="cell">Cell 2</div>
    <div class="cell">Cell 3</div>
  </div>
  <div class="row">
    <div class="cell">Cell 4</div>
    <div class="cell">Cel   l 5</div>
    <div class="cell">Cell    6</div>
  </div>
</div>

CSSコード

.table {
  border-collapse: collapse;
}

.row {
  display: flex;
}

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

コードの説明

HTML:
- <div class="table">：テーブル全体のコンテナを定義します。
CSS:

動作

このコードを実行すると、以下のレイアウトが生成されます。

Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

Flexboxの活用

Flexboxは、要素を柔軟に配置するためのCSSレイアウトモジュールです。テーブルのようなレイアウトを作成するために、Flexboxを使用することもできます。

<div class="table">
  <div class="row">
    <div class="cell">Cell 1</div>
    <div class="cell">Cell 2</div>
    <div class="cell">Cell 3</div>
  </div>
  <div class="row">
    <div class="cell">Cell 4</div>
    <div class="cell">Cel   l 5</div>
    <div class="cell">Cell    6</div>
  </div>
</div>

.table {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
}

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

Gridレイアウトの活用

<div class="table">
  <div class="cell">Cell 1</div>
  <div class="cell">Cell 2</div>
  <div class="cell">Cell 3</div>
  <div class="cell">Cell 4</div>
  <div class="cell">Cell 5</div>
  <div class="cell">Cell 6</div>
</div>

.table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

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

テーブルタグの使用

最も一般的な方法は、<table>, <tr>, <td>タグを使用することです。ただし、この方法ではHTMLの構造がより複雑になります。

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>