最終更新日

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」外部リンク
HOME