最終更新日 2021年4月7日

col要素

table要素内のcolgroup要素により表される列のグループ内で、1つ以上の列を示します。span属性に2以上の整数を指定することで、複数の列を選択可能です。複数の列に対し、CSSを使ってまとめて一括でスタイルを設定することができます。

col要素はコンテンツを持たない空要素で、終了タグはありません。colgroup要素内でのみ使用できます。

colgroup要素もcol要素も、列単位でまとめてスタイルを設定できますが、colgroup要素では複数の列を意味のあるグループとして定義できること、またcol要素はcolgroup要素内の子要素としてのみ記述できる点が異なります。

HTML5での変更点

・align、char、charoff、valign、widthの各属性は廃止されました。

カテゴリ	タグの省略	親要素	子要素
なし	空要素	span属性を持たないcolgroup	なし

属性	値	説明
span	数値	列の数を整数で指定します。
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<body>
  <table border="1">
    <caption>料金表</caption>
    <colgroup>
      <col span="2">
    </colgroup>
    <tbody>
      <tr>
        <th>商品名</th>
        <th>料金</th>
      </tr>
      <tr>
        <td>ハンバーガー</td>
        <td>100円</td>
      </tr>
      <tr>
        <td>チーズバーガー</td>
        <td>120円</td>
      </tr>
    </tbody>
  </table>
</body>

参考文献：W3C HTML5「4.9.4 The col element」

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。