WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <col>「表の列(縦列)属性」

<col> 「表の列(縦列)属性」[読み方:コル/カラム]

<col>タグは、表の列(縦列)属性をまとめて指定する場合に使用します。
<table>の子要素となるため、必ず<table>~</table>の中に記述する必要があります。

HTML規格HTML4.01HTML5
使用可否
広告

<col> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
なしspan属性の指定が無い<colgroup>終了タグ無

<col> の属性

【構文】
<table>
<colgroup>
<col span="列数">
<col span="列数">
</colgroup>

</table>
属性意味値のサンプルなど
span="列数"対象となる列数
align="文字の左右位置"表の列(縦列)の文字左右位置
※HTML5で廃止。スタイルシートで指定。
意味
left左寄せ
right右寄せ
center中央寄せ
justify両端揃え
valign="文字の上下位置"表の列(縦列)の文字上下位置
※HTML5で廃止。スタイルシートで指定。
意味
top上揃え
middle中央揃え
bottom下揃え
baselineベースライン揃え
width="列幅"表の列(縦列)の幅(ピクセル、パーセント)
※HTML5で廃止。スタイルシートで指定。
廃止された属性
  • char
  • charoff
グローバル属性
  • accesskey
  • autocapitalize
  • autofocus
  • class
  • contenteditable
  • dir
  • draggable
  • enterkeyhint
  • hidden
  • id
  • inert
  • inputmode
  • is
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • nonce
  • popover
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate
  • writingsuggestions
イベント属性
ページTOP

<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>
秋の中間テスト結果
氏名国語理科社会
山田 太郎986287
鈴木 花子857158
斉藤 一郎666552
ページTOP

スタイルシート(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>
秋の中間テスト結果
氏名国語理科社会
山田 太郎986287
鈴木 花子857158
斉藤 一郎666552
ページTOP

留意事項

  • alignvalignwidth属性はHTML5で廃止されました。文字位置を指定したい場合は、サンプルのようにスタイルシートの「text-align」で指定してください。
  • <col>は<table>タグ内で使用する必要があります。
  • HTML5では、<col>を<colgroup>タグ内に設置する必要があります。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン