HTMLでのdivテーブルの作成方法

方法1: ネストされたdiv要素を使用する方法

<div class="table">
  <div class="row">
    <div class="cell">セル1</div>
    <div class="cell">セル2</div>
    <div class="cell">セル3</div>
  </div>
  <div class="row">
    <div class="cell">セル4</div>
    <div class="cell">セル5</div>
    <div class="cell">セル6</div>
  </div>
</div>

方法2: CSS Flexboxを使用する方法

<div class="table">
  <div class="row">
    <div class="cell">セル1</div>
    <div class="cell">セル2</div>
    <div class="cell">セル3</div>
  </div>
  <div class="row">
    <div class="cell">セル4</div>
    <div class="cell">セル5</div>
    <div class="cell">セル6</div>
  </div>
</div>
<style>
.table {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
}
.cell {
  flex: 1;
  border: 1px solid black;
  padding: 5px;
}
</style>

方法3: CSS Gridを使用する方法

<div class="table">
  <div class="cell">セル1</div>
  <div class="cell">セル2</div>
  <div class="cell">セル3</div>
  <div class="cell">セル4</div>
  <div class="cell">セル5</div>
  <div class="cell">セル6</div>
</div>
<style>
.table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
}
.cell {
  border: 1px solid black;
  padding: 5px;
}
</style>

これらの例では、異なる方法でdiv要素を使用してテーブルを作成しています。方法1ではネストされたdiv要素を使用し、方法2ではCSS Flexboxを使用し、方法3ではCSS Gridを使用しています。これらの方法を使って、柔軟なレイアウトのテーブルを作成することができます。

この投稿は、HTMLでdiv要素を使用してテーブルを作成する方法についての詳細な解説と、実際のコード例を提供しています。