列のスタイルをまとめて調節するcol要素
<col />

　col要素は、列のスタイルをまとめて調節する際に使います。colgroup要素と違い、グループ分けという意味合いは持ち合わせていません。また、tableの子要素としてcol要素だけで直接記述できます。

例

野菜	値段	産地
野菜	値段	産地
キャベツ	100円	長野
長ネギ	50円	埼玉

<html>

    <head>

      <title>col要素のサンプル</title>

    </head>

    <body>

      <table>

    

        <colgroup>

          <col width="30" /><col width="25" /><col width="20" />

        </colgroup>

    

        <thead>

          <tr>

            <th>野菜</th><th>値段</th><th>産地</th>

          </tr>

        </thead>

    

        <tfoot>

          <tr>

            <th>野菜</th><th>値段</th><th>産地</th>

          </tr>

        </tfoot>

    

        <tbody>

          <tr>

            <td>キャベツ</td><td>100円</td><td>長野</td>

          </tr>

          <tr>

            <td>長ネギ</td><td>50円</td><td>埼玉</td>

          </tr>

        </tbody>

    

      </table>

    </body>

    </html>

DOMでの参照方法

[window.]document.getElementById("【ID属性値名】")

オプション属性

属性	値	機能	入力例	DOM参照
align	"left""center" "right" "justify" "char"	水平方向の整列方法を指定	`<col align="center" />`	`[window.]document.getElementById("【ID属性値名】").align`
char	テキスト	align属性の値で"char"を指定した際に、そろえる軸となる文字を指定	`<col align="char" char="." />`	－
charoff	ピクセル値、または％値	char属性で指定した、そろえる軸となる文字までの距離を指定	`<col align="char" char="." charoff="2" />`	－
span	グループ化したい列数	列をグループ化	`<col span="2" />`	`[window.]document.getElementById("【ID属性値名】").span`
valign	"top" "middle" "bottom" "baseline"	垂直方向の位置を指定	`<col valign="middle" />`	`[window.]document.getElementById("【ID属性値名】").vAlign`
width （非推奨属性）	ピクセル値、または％値	表の横幅を指定	`<col width="80" />`	－

追加が可能なイベントハンドラ属性

onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup

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

有限会社タグパンダ
喜安亮介

11/11

INDEX
Web標準HTMLタグリファレンス（4）アクセシビリティも考慮して表組みするための10のタグテーブル
	table 表（テーブル）を定義するtable要素
	caption 表題を定義するcaption要素
	thead 表のヘッダ部分を定義するthead要素
	tfoot 表のフッタ部分を定義するtfoot要素
	tbody 表のメイン部分を表すtbody要素
	tr 表の行を定義するtr要素
	td 表内の最小単位の枠（セル）を表すtd要素
	th td要素に見出しの意味合いを付加するth要素
	colgroup 表の列を構造的にグループ分けするcolgroup要素
	col 列のスタイルをまとめて調節するcol要素

HTML5 + UX フォーラム新着記事

GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
　資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する
GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
　HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】
PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
　素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】
Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
　Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する