HTMLテーブルのスタイルを変更する方法 – colgroupとcol要素の使い方

この記事では、HTMLテーブルにおける列のスタイルを変更する方法について紹介します。HTMLテーブルを使ったことがある人なら、列にスタイルを適用したい場面に出くわすこともあるかと思います。

そんなときは、<colgroup>要素と<col>要素を使えば、簡単にスタイルをカスタマイズすることができますよ。HTML初心者でも簡単に使えるので、ぜひ試してみてください！

突然ですが、HTMLテーブルには、<colgroup>要素と<col>要素を使用して、列にスタイルを適用することができます。

例えば、2列のテーブルがある場合、1つの列に背景色を適用し、もう1つの列に文字色を変更する場合、以下のように<colgroup>要素と<col>要素を使用してスタイルを適用することができます

<table>
  <colgroup>
    <col style="background-color: yellow;">
    <col style="color: blue;">
  </colgroup>
  <tr>
    <td>Apple</td>
    <td>Red</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>Yellow</td>
  </tr>
</table>

要素の中に、1つまたは複数の 要素を配置することができます。

各要素は、テーブルの列に対してスタイルを定義します。この例では、1つ目の 要素で背景色を黄色に、2つ目の 要素で文字色を青色に設定しています。

要素の中には、テーブルの各行が配置されます。テーブルの列数は、 要素の数に合わせて定義されます。 要素と 要素を使用すると、テーブルの各列に対してスタイルを一括で適用することができるため、HTMLコードを簡潔に保つことができます。

また、スタイルを変更する場合にも、 要素と 要素を使用することで、コードの保守性が向上する利点があります。

<table>
  <colgroup>
    <col>
    <col>
    <col style="background-color: yellow;" span="2">
  </colgroup>
  <tr>
    <td>Apple</td>
    <td>Red</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>Yellow</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>