HTML テーブルの列

はじめに

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

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

Skills Graph

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> タグを使った列のスタイリング

次に、<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と疑似要素を使って表の列に単位を追加する方法を学びました。