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