col要素

TOPページに戻る > html入門

スポンサード リンク

col要素

col要素は表のグループの縦の列の範囲を指定します
colgroup要素の子要素としてcol要素を記述します
グループの範囲を指定するときはspan属性を使います。値には列の数をいれます。span属性の値を2にすると縦2列のグループ内の有効範囲を指定できます
グループの範囲を指定した後にcssでスタイルを指定するとグループ化した列範囲の内容のスタイルをまとめて指定できます
col要素はcolgroup要素内で複数使用できます
col要素は終了タグがないので内容となるものはありません
※col要素は省略可能です。縦の列のグループ範囲を指定しない場合はcolgroup要素内に記述する必要はありません

使い方(書式)

<col></col>

col要素

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
要素の種類 colgroup要素の子要素
内容となる要素 なし

属性 説明
span属性 col要素でグループの列数の有効範囲を整数で指定します。span属性の初期値は 1です
例、span="2" この場合は縦の2列をグループ化しまします
width属性 col要素で有効範囲を指定したグループ内のセルの横幅を指定します
値にはpxなどの単位、%
※cssのwidthプロパティでも横幅を指定できます
align属性 col要素で指定した範囲のセルのテキストの横の表示位置を指定します
値にはleft、right、center、justify、char
valign属性 col要素で指定した列のセルのテキストの縦の表示位置を指定します
値にはtop、middle、bottom、baseline
char属性 tfoot要素の内容になっているセルの内容の位置揃えとなる文字を指定します
対応しているブラウザはありません
HTML5で廃止されました
charoff属性 char属性で位置揃えが指定された場合、charoff属性でその文字から水平方向に位置をずらして表示します
対応しているブラウザはありません
HTML5で廃止されました
共通属性 html共通属性
イベント属性 htmlイベント属性

実際の指定方法

html

<table>
<caption>表の題名 caption</caption>
<col span="2" class="hoge"></col>
<thead>
<tr>
<td>theadの行</td>
<td>theadの行</td>
<td>theadの行</td>
</tr>
</thead>
<tfoot>
<tr>
<td>tfootの行</td>
<td>tfootの行</td>
<td>tfootの行</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>tbodyの行</td>
<td>tbodyの行</td>
<td>tbodyの行</td>
</tr>
</tbody>
</table>

css

.hoge{ background-color: #FFFACD; } /* 背景色を指定 */

実際の表示

表の題名 caption
theadの行 theadの行 theadの行
tfootの行 tfootの行 tfootの行
tbodyの行 tbodyの行 tbodyの行

その他のデザインはcssでスタイルを指定





(C)2012 ホームページ作成無料