ChatGPTを使えば簡単にtableの表をgridレイアウトにできる

tableの表をgridレイアウトに
ChatGPTでtableの表をgridに変換
セルが結合したtableもgridにできる
まとめ

tableの表をgridレイアウトに

HTMLのtableタグは行と列の組み合わせによるセルに含まれた表形式のデータによる2次元の表で表現される情報です。

例えば以下のようなtableタグのコードはブラウザ上では次のような表で描画されます。

<table>
  <tr>
    <th>1列目</th>
    <th>2列目</th>
    <th>3列目</th>
  </tr>
  <tr>
    <td>1行1列</td>
    <td>1行2列</td>
    <td>1行3列</td>
  </tr>
  <tr>
    <td>2行1列</td>
    <td>2行2列</td>
    <td>2行3列</td>
  </tr>
</table>

1列目	2列目	3列目
1行1列	1行2列	1行3列
2行1列	2行2列	2行3列

※ tableタグにはWordPressのスタイルシートが適用されています。

初期のHTMLから使われてきたtableタグですが、CSSのグリッドレイアウトのように3x3を2x5のように変更できないため、表ではなくレイアウトに使うのは不向きです。

ChatGPTでtableの表をgridに変換

コーディングをしているとtableタグで作成されたコードをCSSのgridを使用したコードに修正したいことがあります。

そんなときはChatGPTを使えばtableの表をgridに変換できます。

やり方は「以下のHTMLをtableからgridに変換して。HTMLとCSSは分けて出力して。」と書いたあと、tableタグのコードを貼り付けて送信するだけです。

以下のHTMLをtableからgridに変換して。
HTMLとCSSは分けて出力して。

<table>
  <tr>
    <th>1列目</th>
    <th>2列目</th>
    <th>3列目</th>
  </tr>
  <tr>
    <td>1行1列</td>
    <td>1行2列</td>
    <td>1行3列</td>
  </tr>
  <tr>
    <td>2行1列</td>
    <td>2行2列</td>
    <td>2行3列</td>
  </tr>
</table>

送信すると以下のようなコードを返します。

※ ChatGPTは常に同じコードを返すわけではないので注意

以下のHTMLをtableからgridに変換して。HTMLとCSSは分けて出力して。

このHTMLとCSSを実際に表示させると以下のようになります。

<div class="grid-container">
  <div class="header">1列目</div>
  <div class="header">2列目</div>
  <div class="header">3列目</div>
  <div>1行1列</div>
  <div>1行2列</div>
  <div>1行3列</div>
  <div>2行1列</div>
  <div>2行2列</div>
  <div>2行3列</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 10px;
  padding: 10px;
}

.header {
  font-weight: bold;
  background-color: #ccc;
  padding: 5px;
}

1行1列

1行2列

1行3列

2行1列

2行2列

2行3列

tableタグからdivタグに変更されても3列3行になっていることが確認できます。

セルが結合したtableもgridにできる

rowspanやcolspanを使ってセルを結合したtableの表もgridを使用したコードに変換できます。

例えば以下のようなコードがあるとします。

<table class="sample">
  <tr>
    <th>1列目</th>
    <th>2列目</th>
    <th>3列目</th>
  </tr>
  <tr>
    <td rowspan="2">1行1列</td>
    <td>1行2列</td>
    <td>1行3列</td>
  </tr>
  <tr>
    <td colspan="2">2行2列</td>
  </tr>
</table>

1列目	2列目	3列目
1行1列	1行2列	1行3列
1行1列	2行2列

これをChatGPTでgridのコードに変換させると以下のようなコードを返します。

<div class="grid">
  <div class="header">1列目</div>
  <div class="header">2列目</div>
  <div class="header">3列目</div>
  <div class="cell" style="grid-row: 2 / span 2;">1行1列</div>
  <div class="cell">1行2列</div>
  <div class="cell">1行3列</div>
  <div class="cell" style="grid-column: 2 / span 2;">2行2列</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 10px;
}

.header {
  background-color: #ccc;
  padding: 10px;
}

.cell {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
}

1列目

2列目

3列目

1行1列

1行2列

1行3列

2行2列

セルの結合を含むtableタグからgridへの変換は手作業でやるのは難しいですが、ChatGPTを使えば簡単にできます。