HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLの<col>タグの使い方！span属性でテーブルの列スタイルを一括設定

HTMLの<col>タグとは？

HTMLの<col>タグは、テーブルの各列（カラム）に対してスタイルやプロパティをまとめて設定するための要素です。<col>要素は単体では機能せず、必ず<colgroup>要素の中に配置して使用します。

このタグを使うことで、行ごとのセルに個別にスタイルを指定することなく、列単位で背景色や幅などを一括制御できます。その結果、コードがすっきりし、メンテナンス性も向上します。

<col>タグの主な属性

  • span：<col>要素が適用される列の数を指定します。たとえば「span="2"」と記述すると、先頭から2列分に同じスタイルがまとめて適用されます。

なお、<col>タグで指定できるのは背景色や列幅などスタイルに関する設定が中心で、セル内のテキスト内容そのものには直接影響しない点に注意してください。

<col>タグの実装例

ここでは、ICCクリケットランキングのテーブルを例に、colタグの実際の使い方を見ていきましょう。最初の<col>要素に「span="2"」を指定して「Player」「Country」の2列にマゼンタ色の背景を適用し、続く<col>要素で「Rank」列に青色の背景を設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 2px solid black;
}
</style>
</head>
<body>
<h2>ICC Rankings</h2>
<table>
    <colgroup>
        <col span="2" style="background-color:magenta;">
        <col style="background-color:blue;">
    </colgroup>
    <tr>
        <th>Player</th>
        <th>Country</th>
        <th>Rank</th>
    </tr>
    <tr>
        <td>Jack</td>
        <td>WI</td>
        <td>1</td>
    </tr>
    <tr>
        <td>Tom</td>
        <td>AUS</td>
        <td>2</td>
    </tr>
    <tr>
        <td>Virat</td>
        <td>IND</td>
        <td>3</td>
    </tr>
    <tr>
        <td>Steve</td>
        <td>AUS</td>
        <td>4</td>
    </tr>
    <tr>
        <td>Kane</td>
        <td>NZ</td>
        <td>5</td>
    </tr>
    <tr>
        <td>David</td>
        <td>AUS</td>
        <td>6</td>
    </tr>
</table>
</body>
</html>

出力結果

上記のコードをブラウザで表示すると、次のように列ごとに異なる背景色が適用されたテーブルが出力されます。「span="2"」によって、最初の2列にまとめて同じ背景色が設定されていることが確認できます。

HTMLの<col>タグの使い方！span属性でテーブルの列スタイルを一括設定

  1. HTMLのth要素におけるcolspan属性の使い方をわかりやすく解説

    <th>要素のcolspan属性は、見出しセル（ヘッダーセル）が横方向にまたぐ列の数を指定するために使用されます。テーブルで複数の列にまたがる見出しを作成したい場合に便利な属性です。 colspan属性の基本構文 colspan属性の書き方は以下のとおりです。 <th colspan="num"> ここで「num」には、見出しセルがまたぐ列の数（正の整数）を指定します。たとえば「2」を指定すれば、その見出しセルは2列分の幅を持つことになります。 実装例 それでは、<th>要素のcolspan属性を実装した具体的な例を見てみましょう。以下の

  2. HTMLのcolgroupタグとは？テーブルの列をまとめてスタイルする方法

    <colgroup>タグとは<colgroup>タグは、HTMLテーブル内の1つ以上の列（カラム）をひとつのグループとしてまとめるための要素です。このタグを使うことで、グループに含まれるすべての列に対して、まとめてスタイルを適用できます。セルや行ごとに個別にスタイルを記述する必要がないため、コードがすっきりし、テーブル全体のデザイン管理も効率的になります。主な属性span − 列グループが対象とする列の数を指定します。たとえば「span=3」と設定すると、先頭から3列分が同じグループとして扱われます。使用例それでは、<colgroup>タグを使った実際の実装