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

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

<colgroup>タグとは

<colgroup>タグは、HTMLテーブル内の1つ以上の列（カラム）をひとつのグループとしてまとめるための要素です。このタグを使うことで、グループに含まれるすべての列に対して、まとめてスタイルを適用できます。

セルや行ごとに個別にスタイルを記述する必要がないため、コードがすっきりし、テーブル全体のデザイン管理も効率的になります。

主な属性

  • span − 列グループが対象とする列の数を指定します。たとえば「span="3"」と設定すると、先頭から3列分が同じグループとして扱われます。

使用例

それでは、<colgroup>タグを使った実際の実装例を見てみましょう。以下の例では、学生の成績表テーブルに対して、列ごとに背景色を設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
    table, th, td {
        border: 2px solid black;
    }
</style>
</head>
<body>
<h2>Result</h2>
<table>
    <colgroup>
        <col span="3" style="background-color:gray;">
        <col style="background-color:orange;">
    </colgroup>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Percentage</th>
        <th>Rank</th>
    </tr>
    <tr>
        <td>009</td>
        <td>Tom</td>
        <td>98</td>
        <td>1</td>
    </tr>
    <tr>
        <td>011</td>
        <td>Kieron</td>
        <td>97</td>
        <td>2</td>
    </tr>
    <tr>
        <td>039</td>
        <td>Gayle</td>
        <td>95</td>
        <td>3</td>
    </tr>
    <tr>
        <td>017</td>
        <td>Shaun</td>
        <td>92</td>
        <td>4</td>
    </tr>
    <tr>
        <td>009</td>
        <td>Kane</td>
        <td>91</td>
        <td>5</td>
    </tr>
    <tr>
        <td>025</td>
        <td>Steve</td>
        <td>87</td>
        <td>6</td>
    </tr>
    <tr>
        <td>013</td>
        <td>Jack</td>
        <td>85</td>
        <td>7</td>
    </tr>
    <tr>
        <td>023</td>
        <td>Tim</td>
        <td>84</td>
        <td>8</td>
    </tr>
</table>
</body>
</html>

出力結果

上記のコードを実行すると、次のような表示になります。

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

コードのポイント解説

上の例では、<colgroup>要素の中で複数の列にスタイルを設定しています。

<colgroup>
<col span="3" style="background-color:gray;">
<col style="background-color:orange;">
</colgroup>

まず、<colgroup>要素内の最初の<col>タグで、先頭の3列にグレーの背景色を指定しています。

<col span="3" style="background-color:gray;">

続く<col>タグでは、残りの列にオレンジ色の背景色を適用しています。

<col style="background-color:orange;">

このように<colgroup>と<col>を組み合わせることで、テーブルの列単位での装飾が簡単に行え、メンテナンス性の高いHTMLを書くことができます。

  1. HTMLのcenterタグとは？中央揃えの基本とCSSでの代替方法を解説

    HTMLの<center>タグは、テキストやコンテンツを水平方向に中央揃えで表示するための要素です。かつては見出しや段落、表などをページの中央に配置する際に広く使われていました。 注意：<center>タグはHTML5では廃止されており、最新のWeb制作では使用が推奨されません。中央揃えを実装したい場合は、CSSを使うことが公式にも提案されています。 centerタグが非推奨となった理由 <center>タグは、「文書の構造」と「見た目の装飾」を分離するというHTMLの設計思想に反するため、HTML5で廃止されました。レイアウトやデザインに関する指定はす

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

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