cman.jpWEBページ作成
広告
<col> 「表の列(縦列)属性」[読み方：コル/カラム]
広告
<col> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| なし | span属性の指定が無い<colgroup> | 無 | 終了タグ無 |
<col> の属性
【構文】
<table>
<colgroup>
<col span="列数">
<col span="列数">
</colgroup>
～
</table>
<colgroup>
<col span="列数">
<col span="列数">
</colgroup>
～
</table>
| 属性 | 意味 | 値のサンプルなど | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| span="列数" | 対象となる列数 | |||||||||||
| align="文字の左右位置" | 表の列(縦列)の文字左右位置 ※HTML5で廃止。スタイルシートで指定。 |
|
||||||||||
| valign="文字の上下位置" | 表の列(縦列)の文字上下位置 ※HTML5で廃止。スタイルシートで指定。 |
| ||||||||||
| width="列幅" | 表の列(縦列)の幅（ピクセル、パーセント） ※HTML5で廃止。スタイルシートで指定。 | |||||||||||
| 廃止された属性 |
| |||||||||||
| グローバル属性 |
| |
| イベント属性 |
| |
<col>タグのサンプル
<table border="1" cellspacing="1" cellpadding="3">
<caption>秋の中間テスト結果</caption>
<colgroup>
<col style="width: 150px">
<col span="3" style="width: 100px">
</colgroup>
<tbody>
<tr><th>氏名</th><th>国語</th><th>理科</th><th>社会</th></tr>
<tr><td>山田 太郎</td><td>98</td><td>62</td><td>87</td></tr>
<tr><td>鈴木 花子</td><td>85</td><td>71</td><td>58</td></tr>
<tr><td>斉藤 一郎</td><td>66</td><td>65</td><td>52</td></tr>
</tbody>
</table>
<caption>秋の中間テスト結果</caption>
<colgroup>
<col style="width: 150px">
<col span="3" style="width: 100px">
</colgroup>
<tbody>
<tr><th>氏名</th><th>国語</th><th>理科</th><th>社会</th></tr>
<tr><td>山田 太郎</td><td>98</td><td>62</td><td>87</td></tr>
<tr><td>鈴木 花子</td><td>85</td><td>71</td><td>58</td></tr>
<tr><td>斉藤 一郎</td><td>66</td><td>65</td><td>52</td></tr>
</tbody>
</table>
| 氏名 | 国語 | 理科 | 社会 |
|---|---|---|---|
| 山田 太郎 | 98 | 62 | 87 |
| 鈴木 花子 | 85 | 71 | 58 |
| 斉藤 一郎 | 66 | 65 | 52 |
スタイルシート(CSS)を使用しリンクの見た目を変えるサンプル
<head>
<style type="text/css">
<!--
#css-s1 {background-color: #0066ff;}
#css-s1 col {background-color: #0066ff;color: #fff;}
#css-s1 th {background-color: #d0f0ff;text-align: center;}
#css-s1 td {background-color: #fff;text-align: center;}
-->
</style>
</head>
～
<table border="0" cellspacing="1" cellpadding="3" id="css-s1">
<caption>秋の中間テスト結果</caption>
<colgroup>
<col style="width: 150px">
<col span="3" style="width: 100px">
</colgroup>
<tbody>
<tr><th>氏名</th><th>国語</th><th>理科</th><th>社会</th></tr>
<tr><td>山田 太郎</td><td>98</td><td>62</td><td>87</td></tr>
<tr><td>鈴木 花子</td><td>85</td><td>71</td><td>58</td></tr>
<tr><td>斉藤 一郎</td><td>66</td><td>65</td><td>52</td></tr>
</tbody>
</table>
<style type="text/css">
<!--
#css-s1 {background-color: #0066ff;}
#css-s1 col {background-color: #0066ff;color: #fff;}
#css-s1 th {background-color: #d0f0ff;text-align: center;}
#css-s1 td {background-color: #fff;text-align: center;}
-->
</style>
</head>
～
<table border="0" cellspacing="1" cellpadding="3" id="css-s1">
<caption>秋の中間テスト結果</caption>
<colgroup>
<col style="width: 150px">
<col span="3" style="width: 100px">
</colgroup>
<tbody>
<tr><th>氏名</th><th>国語</th><th>理科</th><th>社会</th></tr>
<tr><td>山田 太郎</td><td>98</td><td>62</td><td>87</td></tr>
<tr><td>鈴木 花子</td><td>85</td><td>71</td><td>58</td></tr>
<tr><td>斉藤 一郎</td><td>66</td><td>65</td><td>52</td></tr>
</tbody>
</table>
| 氏名 | 国語 | 理科 | 社会 |
|---|---|---|---|
| 山田 太郎 | 98 | 62 | 87 |
| 鈴木 花子 | 85 | 71 | 58 |
| 斉藤 一郎 | 66 | 65 | 52 |
留意事項
- align、valign、width属性はHTML5で廃止されました。文字位置を指定したい場合は、サンプルのようにスタイルシートの「text-align」で指定してください。
- <col>は<table>タグ内で使用する必要があります。
- HTML5では、<col>を<colgroup>タグ内に設置する必要があります。
| 関連するHTMLタグ | |
|---|---|
| colgroup | 表の列グループ化 |
広告