HTML の<col>タグは、表の各列のプロパティを個別に定義するために使用されます。この実験では、HTML テーブルの列にスタイルを適用するための<col>タグの使い方を学びます。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080 タブを更新して Web ページをプレビューできます。
プロジェクトの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> タグにスタイル属性を追加して、表の各列に異なる背景色を適用しています。
<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 と疑似要素を使って表の列に単位を追加する方法を学びました。
