Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【HTML Living Standard】col要素の使い方

col要素の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

col要素は、HTMLのテーブル内で列グループの共通のプロパティを定義するために使用される要素です。主に<table>要素の内部で、<caption><thead><tbody><tfoot><tr>の前に配置されるcolgroup要素の子要素として使用されます。この要素を用いることで、一つまたは複数の列に対して、幅やスタイルといった共通の属性を一括で設定することができます。

col要素自体は内容を持たない空要素であり、視覚的なコンテンツを直接表示することはありません。その主な役割は、テーブルの構造をセマンティックに定義し、スタイルシート(CSS)による装飾を容易にすることです。例えば、特定の列の幅を統一したい場合や、背景色などのスタイルを複数の列に適用したい場合にcol要素を利用すると、各セル(<td><th>)に個別にスタイルを適用するよりも、コードの管理がしやすくなります。

span属性を指定することで、col要素が適用される列の数を定義できます。この属性のデフォルト値は1であり、指定がない場合は単一の列にのみ効果があります。複数の列にわたる設定を行う場合は、span="2"のように数値を指定します。これにより、テーブルのレイアウトにおける柔軟性が向上し、保守性の高いHTML構造を実現できます。

公式リファレンス: <col>: The Table Column element

構文(syntax)

1<col span="数値">

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ