HTML テーブルの列をマスターする

はじめに

HTML の<col>タグは、表の各列のプロパティを個別に定義するために使用されます。この実験では、HTML テーブルの列にスタイルを適用するための<col>タグの使い方を学びます。

注：index.html でコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080 タブを更新して Web ページをプレビューできます。

HTML テーブルの作成

プロジェクトのindex.htmlファイルに、次のコードを追加して基本的な HTML テーブルを作成します。

<table>
  <colgroup>
    <col />
    <col />
    <col />
  </colgroup>
  <tr>
    <th>商品名</th>
    <th>価格</th>
    <th>数量</th>
  </tr>
  <tr>
    <td>商品 1</td>
    <td>$10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>商品 2</td>
    <td>$20</td>
    <td>10</td>
  </tr>
</table>

タグを使った列のスタイリング

次に、<col> タグを追加して表の列にスタイルを適用しましょう。上記のコードの <colgroup> タグを次のコードに置き換えます。

<colgroup>
  <col style="background-color: lightblue" />
  <col style="background-color: lightgreen" />
  <col style="background-color: lightpink" />
</colgroup>

上記のコードでは、<col> タグにスタイル属性を追加して、表の各列に異なる背景色を適用しています。

span 属性の使用

<col> タグの span 属性を使うと、一度に複数の列を対象にすることができます。たとえば：

<colgroup>
  <col style="background-color: lightblue" />
  <col span="2" style="background-color: lightgreen" />
</colgroup>

この例では、2 番目の <col> タグが、値が 2 の span 属性を使って一度に 2 つの列を対象にしています。

グローバル属性とイベント属性の使用

<col> タグは、グローバル属性とイベント属性をサポートしており、表の列に追加のスタイリングと機能性を追加することができます。たとえば、class 属性を使って列に CSS クラスを追加することができます。

<colgroup>
  <col style="background-color: lightblue" class="product-name" />
  <col span="2" style="background-color: lightgreen" class="price-quantity" />
</colgroup>

これで、.product-name と .price-quantity クラスを使って表の列に CSS スタイルを適用することができます。

テーブルの列に単位を追加する

通貨やパーセンテージ値などの単位を、::before および ::after 疑似要素と CSS を使って表の列に追加することができます。たとえば：

<colgroup>
  <col style="background-color: lightblue" class="product-name" />
  <col span="2" style="background-color: lightgreen" class="price-quantity" />
</colgroup>

td::before {
  content: "$";
}

td:last-of-type::after {
  content: "%";
}

上記のコードでは、::before 疑似要素が最初の 2 つの列の値の前にドル記号を追加し、::after 疑似要素が最後の列の値の後にパーセント記号を追加しています。

まとめ

この実験では、HTML の表の列にスタイルを適用するために HTML の <col> タグをどのように使用するかを学びました。また、表の列に追加のスタイリングと機能性を追加するために、span 属性、グローバル属性、およびイベント属性をどのように使用するかも学びました。最後に、CSS と疑似要素を使って表の列に単位を追加する方法を学びました。