ホーム>HTMLリファレンス(アルファベット検索)><col>タグ
<col>…表の列に関する属性を指定する
使用タグ
|
<col 属性="属性値">〜</col> |
開始タグと 終了タグ |
開始タグは必須で
終了タグはなし |
内容となる 要素 |
なし
|
|
|
解説
<col>タグを使えば、表の列の属性をまとめて指定できます。
<col>は、 <table>〜</table>の中の<caption>と、<tr>あるいは、<thead>より前に置いてください。
同じような働きのタグで <colgroup>というタグがありますが、<col>との違いは、 グループ化の意味があるかないかの違いです。<colgroup>はグループとして分ける意味があり、表の列の表示も変更できますが、<col>は表の列の表示を変更するだけで、グループ分けとしての意味を持ちません。グループ化して表の構造を明確にしたい場合は<colgroup>を使い、ただ属性を指定して表示を変更させたい場合は<col>を使いましょう。
また、<colgroup>タグの中に<col>タグを並べて指定することもできます。
|
属性と働き
属性 |
働き |
指定できる値 |
span="列の数" |
グループ分けする列の数を指定 |
整数を指定します span属性を指定しない場合は「span="1"」と見なされます |
width="長さ" |
列の幅を指定できます |
ピクセルを表す整数、パーセンテージ、相対値(ブラウザによっては対応していない) |
align="横の表示位置" |
列の中のセルの横方向の表示位置を指定できます |
「left」(左揃え)、「center」(中央揃え)、「right」(右揃え)、「justify」(両端揃え)、「char」(特定の文字に位置を揃える)
|
valign="縦の表示位置" |
列の中のセルの縦方向の表示位置を指定できます |
「top」(上揃え)、「middle」(中央揃え)、「bottom」(下揃え)、「baseline」(ベースラインに位置を揃える) |
char="位置を揃える文字"
対応ブラウザなし |
列の中のセルの横の表示位置を揃える文字を指定します。 |
1文字指定 |
charoff="ずらす長さ"
対応ブラウザなし |
char属性で桁揃え文字が指定されていた場合、その文字からどれくらい左右にずらして表示するかを指定します |
ピクセルを表す整数、パーセンテージ |
使用例
記述例
<table border="1">
<caption>
国の人口ランキング
</caption>
<colgroup align="center">
<col width="100">
</colgroup>
<colgroup>
<col span="2" width="200">
</colgroup>
<tr>
<th>国名</th>
<th>人口</th>
<th>国土面積(km2)</th>
</tr>
<tr>
<td>A国</td>
<td>約30億人</td>
<td>約900万</td>
</tr>
<tr>
<td>B国</td>
<td>約5億人</td>
<td>約500万</td>
</tr>
<tr>
<td>C国</td>
<td>約3億人</td>
<td>約400万</td>
</tr>
</table> |
|
[ブラウザでの表示例]
ブラウザ |
国の人口ランキング
国名 |
人口 |
国土面積(km2) |
A国 |
約30億人 |
約900万 |
B国 |
約5億人 |
約500万 |
C国 |
約3億人 |
約400万 |
|
△ページトップへ
ホームページ初心者ガイド|
HTML|
CSS|
ホームページお役立ち情報|
ホームページレベルアップ情報|
その他