colgroupタグとは?|表(テーブル)の縦列をグループ化する

colgroupタグとは?|表(テーブル)の縦列をグループ化する
博士
今回は、表(テーブル)の縦列をグループ化する方法を解説するぞ。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<colgroup>タグとは

 

<colgroup>

対応ブラウザ Internet Explorer / Firefox / Google Chrome / Safari / Opera
分類
利用場所 table要素の子要素として(ただし、caption要素より後で、thead要素、tbody要素、tfoot要素、tr要素よりも前)
内容 span属性がある場合:空 / span属性がない場合:col要素を0個以上


 
 
<colgroup>タグは、表の縦列(カラム)を意味的なまとまりとしてグループ化するタグです。
<colgroup>タグを使用すると、グループ化した縦列に対して同じ属性やスタイルをまとめて指定することができます。

<colgroup>タグは、<table>~</table>の中の、caption要素より後、thead要素tbody要素tfoot要素tr要素より前に配置します。
 
 

span属性

グループ化する列数を1以上の整数で指定します。

span属性は、colgroup要素の中にcol要素がない場合にのみ指定できます。
反対に、colgroup要素にspan属性が指定されている場合は、その中にcol要素を入れることはできません。
 
 

スポンサーリンク

使用例

 
 

表示例

名前 メーカー 発売日
スーパーファミコン 任天堂 1990年11月
プレーステーション ソニー 1994年12月
Xbox マイクロソフト 2002年2月
 
 
リンゴ
1列目と2〜3列目が別々のスタイルになりましたね!
 
 

まとめ

表の縦列をグループ化する際は、<colgroup>タグを使用します。
 
 

HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








colgroupタグとは?|表(テーブル)の縦列をグループ化する