colタグとは?|表(テーブル)の列を表す

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

スポンサーリンク

<col>タグとは

 

<col>

対応ブラウザ Internet Explorer / Firefox / Google Chrome / Safari / Opera
分類
利用場所 span属性が指定されていないcolgroup要素の子要素として
内容


 
 
<col>タグは、列グループに含まれる1つ以上の縦列(カラム)を表します。
<col>タグを使うことで、表内の複数の縦列に対してまとめてCSSを適用したり、汎用属性を指定したりすることができるようになります。

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

span属性

span属性には、属性やスタイルを適用する縦列の数を1以上の整数で指定します。
 
 

博士
負の数値を指定することはできんぞ。
 
 

スポンサーリンク

<col>タグと<colgroup>タグの違い

リンゴ
<col>タグって名前といい役割といい、なんか<colgroup>タグと似てますよね。
博士
確かに<col>タグと<colgroup>タグはよく混同されがちじゃが、具体的には以下のような違いがあるんじゃ。
 
 
<colgroup>タグは表の縦列を意味的なまとまりとしてグループ化するタグですが、
<col>タグは列を表すだけのタグです。

表の縦列をグループ化する場合や表の縦列をグループ化した上で属性やスタイルを適用する場合には<colgroup>タグを、
表の縦列をグループ化することなく属性やスタイルを個別に指定する場合には<col>タグを使用します。
 
 

使用例

 
 

表示例

ファミコンソフト 売上ランキング
順位 タイトル 売上本数 メーカー
1位 スーパーマリオブラザーズ 681万本 任天堂
2位 スーパーマリオブラザーズ3 384万本 任天堂
3位 ドラゴンクエストIII そして伝説へ… 380万本 エニックス
4位 ドラゴンクエストIV 導かれし者たち 310万本 エニックス
5位 スーパーマリオブラザーズ2 265万本 任天堂
 
 

スポンサーリンク

まとめ

表の縦列をグループ化することなく属性やスタイルを個別に指定する際は、<col>タグを使用します。
 
 

HTML5 タグ図鑑

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

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








colタグとは?|表(テーブル)の列を表す