<colgroup> - テーブルのカラム設定

■ 概要

項  目説  明
記述形式 <colgroup span="列数">~</colgroup> (</colgroup> は省略可能)
対応ブラウザー H4+ / e3+ / N6+ / Fx1+ / Op6+ / Ch1+ / Sa1+
種  類
(カテゴリー)
なし
置ける場所 table要素の子要素。 ただし,caption要素よりも後,
thead要素tbody要素tfoot要素tr要素より前。
内包要素
(コンテンツ・モデル)
0個以上の col要素span属性をもたないとき),空(span属性をもつとき)
(コンテンツ・モデル: 直接指定

■ 解説

<colgroup> は COLumn GROUP の略です。 テーブルのカラム(列)グループに対して,横幅や右寄せ,左寄せなどの設定を行う対象範囲を指定します。 <colgroup> でカラムグループの設定を行い,加えて,<col> で個々のカラムの設定を行うこともできます。

■ 属性

種  類名  称
【固有属性】 span
【グローバル属性】 accesskeyclasscontenteditable * dir
hidden *idlangspellcheck *style
tabindextitletranslate *
【ARIA role属性】
指定可能な値 (役割)
なし
【ARIA aria-* 属性】
指定可能なもの
ARIA グローバル状態とプロパティ   

■ CSSプロパティ

種  類名  称
【よく使うもの】 colorbackground-colorfontfont-sizefont-family

■ 使用例

HTMLソース
CSS
<head> ~ </head>
<style type="text/css">
<!--
   table, th, td { border: solid 1px #080808; }
-->
</style>
HTML
<body> ~ </body>
<table>
   <colgroup style="background-color: #e0e0e0; 
      text-align: center; width: 100px;">
   </colgroup>
   <colgroup>
      <col span=1 style="text-align: center; width: 50px;">
      <col span=2 style="text-align: right; width: 50px;">
   </colgroup>
   <tr style="background-color: #e0e0e0; ">
      <th style="text-align: center">名前</th>
      <th style="text-align: center">出身</th>
      <th style="text-align: center">A値</th>
      <th style="text-align: center">B値</th>
   </tr>
   <tr><td>田中</td><td>東京</td><td>123</td><td>123</td></tr>
   <tr><td>鈴木</td><td>大阪</td><td>456</td><td>456</td></tr>
   <tr><td>佐藤</td><td>京都</td><td>789</td><td>789</td></tr>
</table>

ブラウザー 表示例 (未対応のブラウザーでは正しく表示できません)
名前 出身 A値 B値
田中 東京 123 123
鈴木 大阪 456 456
佐藤 京都 789 789

■ 備考