Simple HTMLHTMLリファレンス

Main Menu

おすすめリンク

Site Info.

テーブル

タグ名称

機能別

HTMLリファレンス

CSSリファレンス

その他の記事

HTMLリファレンス インデックス

スポンサーリンク

HTMLタグリファレンス

TABLEテーブルTOPHTMLTAGTable

  1. tableテーブル(表)の定義
  2. captionキャプション(見出し)
  3. tbodyテーブル本体の定義
  4. theadテーブルのヘッダ行をグループ化
  5. tfootテーブルのフッタ行をグループ化
  6. trテーブルの改行
  7. thヘッダセル
  8. tdデータセル
  9. colテーブル(縦列)の属性グループ化
  10. colgroupテーブル(縦列)のグループ化

<col>Columnsテーブル(縦列)の属性グループ化

HTML VersionHTML4.01XHTML1.0XHTML1.1HTML5

<col>はテーブルセルの列(縦方向)を定義する要素です。行を定義する<tr>に対応する要素と表現すれば分かり易いかもしれません。<colgroup>要素の子要素としても機能します。縦列のストライピングや、複数のテーブルでそれぞれ違った列幅を適用したい場合に活用することができます。<colgroup>との違いは、縦列をグループ化するか否かであり、任意の列にスタイルを適用したい場合に<col>が使われるケースが多いようです。

固有の属性一覧
属性機能
alignleft
right
center
justify
char
セル内容の横方向の位置を指定します
char文字位置を揃える文字を指定します
charoff数値セルの端からchar属性で指定した文字までの距離を指定します
span数値変更する列の数を指定します
valigntop
middle
bottom
baseline
セル内容の縦方向の位置を指定します
width%
px
relative_length
セルの幅を指定します

<col>要素の記述方法

col要素は、<caption>の後および<thead>,<tbody>,<tfoot>,<tr>の前に記述します。また、colgroup要素にspan属性を指定しない場合に限り、colgroup要素の子要素とすることができます。空要素なので、終了タグは不要です。

col要素の記述位置

col要素にspan属性を追加して複数列のスタイルを指定できます。

<table>
<caption>表のタイトル</caption>
<col span="3">		col要素を単体で使用(span属性で複数列を指定)
<thead>
<tr><th>1列目</th><td>2列目</td><td>3列目</td>
<thead>
<tbody>
<tr><th>1列目</th><td>2列目</td><td>3列目</td>
<tr><th>1列目</th><td>2列目</td><td>3列目</td>
<tbody>
<tfoot>
<tr><th>1列目</th><td>2列目</td><td>3列目</td>
<tfoot>
</table>

次の2種類の記述方法は、いずれも同じ結果となります。

<col span="3" style="color:#eee">	span属性で複数列を指定
<col>			列の数だけcol要素を記述
<col>
<col>

colgroupにspan属性を指定しない場合は、子要素とすることができます。

<colgroup>
<col>			列の数だけcol要素を記述
<col>
<col>
</colgroup>
スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.