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位スーパーマリオブラザーズ3384万本任天堂
3位ドラゴンクエストIII そして伝説へ…380万本エニックス
4位ドラゴンクエストIV 導かれし者たち310万本エニックス
5位スーパーマリオブラザーズ2265万本任天堂
 
 

スポンサーリンク

まとめ

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

HTML5 タグ図鑑

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

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








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