[16-6] table縦列グループ化(colgroup, col)

今回は、tableの縦列をグループ化します。<colgroup>要素と<col>要素を使います。

<colgroup>と<col>は、知っててお得な要素です。
CSSをちまちまと1つずつ<th>や<td>に指定せずに、グループ化して一括で指定できるので。
ただ<colgroup>と<col>は使い方にはちょっとややこしいルールがあります。知らずに使うと「うまく指定できない」ジレンマに陥る可能性があるので…、ま、じっくり読んでみてください。

サンプルではこのように、tableの<tbody>を縦に2分割して色分けしました。
(背景が、オレンジ色とクリーム色のところです。)


これは↑プレビュー画像です。クリックでサンプルHTMLが開きます(別ウィンドウで開く) 。

使用する要素 <colgroup> 〜 </colgroup>
<col>(colは終了タグはありません)

サンプルのダウンロードはこちら

★上のサンプル画像をクリックすると、HTMLファイルが開きます。
★開いたHTMLのソースを見てもらえばOKですが、下記から一式をzipでダウンロードできます。
→本日のサンプル(sample16-6set.zip (3k))をダウンロード

★ブラウザでHTMLやCSSのソースを見るには…「ほんっとにはじめてのHTML-[14-1] ブラウザでソースを見る」をご覧ください

<colgroup>を使って縦に分けてみよう

サンプルのように、5列ある縦列を、2列と3列に分けます。
<colgroup>は、このように「合計何列のうち、○列をグループ化する」っていう使い方をします。

<colgroup>は、span属性を使ってグループ化したい縦列の列数を指定します。
ま、とにかくサンプルのHTMLを見てみましょう。

<table class="sample1">
<caption>来店者数</caption>
<colgroup span="2" id="shop"></colgroup>
<colgroup span="3" id="count"></colgroup>
<thead>
  <tr>
  <!--省略-->
   </tr>
</thead>
<tbody>
  <!--省略-->
</tbody>
<tfoot>
  <!--省略-->
</tfoot>
</table>

前回の<thead><tbody><tfoot>は全部残しています。
青バックの部分が<colgroup>の指定です。
<colgroup>は、前にやった<caption>と同じように、tableの最初の方にまとめて書きます。
span属性を使って、最初のグループは「2列」次のは「3列」をまとめる、と宣言していますよ。
CSSの指定をしたいので、それぞれにid名(shopとcount)をつけてます。

<colgroup>を書く場所は必ず<caption>の下(<thead><tbody><tfoot><tr>の前)です。
(<caption>が無い場合は、table開始タグの直後。)

<colgroup>にspan属性を使ったら、その中に<col>は入れられません。
(↑これがクセのあるルールです。)
あとで<col>要素が出てきます。 <col>は<colgroup>の中に入れて、<colgroup>をさらに縦割りするのに使いますが、 <colgroup>にspan属性を使ったら<col>は入れられません。
<col>を入れるなら<colgroup>にspan属性を使用せず、代わりに<col>のほうでspan属性を使ってグループ分けします。

ちょっとややこしいですが、<col>のところでもう一度説明します。

CSSで縦列の色分けしてみよう

このように縦にグループ分けしておいて、CSSで指定します。
サンプルのCSSを見てみましょう。

table.sample1 colgroup#shop {
	background: #FC6;
}
table.sample1 colgroup#count {
	background: #FFC;
}
/*table.sample1 tbody tr {
	background: #FFC;
}*/

青バックの部分が<colgroup>への指定です。
最初の2列のグループ(#shop)は背景色をオレンジ色(#FC6)に、
次の3列のグループ(#count)には黄色(#FFC)を指定していしていますよ。

コメント部分(7〜9行目)に注目。

/*table.sample1 tbody tr {
	background: #FFC;
}*/

ここはtbodyへの指定ですが、コメントタグ(/* */)で囲んで無効にしています。
(わかりやすいようにコメントタグを使いましたが、不要なCSSは削除していいんです。)

これは<colgroup>より、<thead><tbody><tfoot>のCSS指定が優先されるから。
サンプルでわかるように、前回作ったヘッダ<thead>とフッタ<tfoot>のCSS指定は残しています。
ヘッダとフッタの背景色がちゃんと指定されてますよね。
(<thead><tfoot>の指定がなければ、<colgroup>の背景色指定が上から下まで適用されます。)

で、今回は<tbody>にあたる範囲を縦に色分けしたいので、前回の<tbody>のCSSを残していると<colgroup>で指定した縦割りの指定が適用されません
というわけで<tbody>のCSSを無効にしました。

<col>でさらに縦列を分けよう

それじゃ、<col>要素の使い方です。
<col>は、<colgroup>内の縦列をグループ化します。<col>は単にCSS指定用にある、と言っても過言でない、と思います。
<colgroup>〜</colgroup>内に<col>を入れて、さらに縦列を分けてみましょう。

このように、さきほどのtableの縦列を、さらに小分けに色替えしますよ。

サンプルのHTMLソースを見てみましょう。

<table class="sample2">
<caption>来店者数</caption>
<colgroup><col id="area"><col id="shop"></colgroup>
<colgroup><col id="count"><col span="2" id="count2"></colgroup>
     <!--colgroup内にcolを入れる場合は、colgroupにspan属性を使用できない-->
<thead>
  <tr>
  <!--省略-->
   </tr>
</thead>
<tbody>
  <!--省略-->
</tbody>
<tfoot>
  <!--省略-->
</tfoot>
</table>

青バックの部分が<col>を加えた指定です。
最初のcolgroup内に2つのcolが入ってます。それぞれ「area」「shop」というid名を付けています。
2番目のcolgroup内には、1つのcolと、span属性で2コをひとまとめにしたcolが入ってますよ。OK?
それぞれに「count」「count2」というid名を付けています。

上記のように<colgroup>内に<col>を入れたら、<colgroup>にspan属性はつかえません。

「合計何列のうち、○列をグループ化する」っていう指示を、<col>を使ったら<col>のほうで担当するので、<colgroup>は、ただの<col>のまとめ役にまわる…ということなんです。

で、CSSで背景色を色分けするソースを見てみましょう。
このように、id名をつけた<col>に、それぞれ背景色を指定してみましたよ。

table.sample2 colgroup col#area {
	background: #FFECEC;
}
table.sample2 colgroup col#shop {
	background: #FC6;
}
table.sample2 colgroup col#count {
	background: #FFC;
}
table.sample2 colgroup col#count2 {
	background: #EEFFCD;
}

<colgroup>は、<col>なし<col>あり混合でもOK!

span属性無しで<col>を入れた<colgroup>と、
span属性ありで<col>なしの<colgroup>を、混合で指定する事もできます。
こんなふうに↓

<colgroup><col><col></colgroup>
<colgroup span="3"></colgroup>

プレビューはこうなります。サンプルでソースを確かめてくださいね。

これは↑プレビュー画像です。クリックでサンプルHTMLが開きます(別ウィンドウで開く) 。

<colgroup>と<col>の書き方 : まとめ

<colgroup span="(数字)"></colgroup>
<colgroup span="(数字)"></colgroup>
<colgroup>にspan属性をつけたら
<col>は使わない
<colgroup><col><col></colgroup>
<colgroup><col span="(数字)"></colgroup>
<col>を使うなら
<colgroup>にspan属性無し
<colgroup><col><col span="(数字)"><colgroup>
<colgroup span="(数字)"></colgroup>
<col>使用<col>不使用の <colgroup>の混合もOK

<colgroup>も<col>もいくつあってもいいんです。
「 <colgroup>にspan属性があったら<col>は使わない」だけ。

そのほかの要点は、
<colgroup>は必ず<caption>の後に入れる。(<caption>が無い時は<taboe>開始の直後)
<thead><tbody><tfoot>のCSS指定が優先される
 <colgroup>や<col>でCSS指定したい場合は<thead><tbody><tfoot>の指定のいずれかを
 無効にする必要がある。(でもまあ、一緒に使えるという事です。サンプルのように)
●なお、<colgroup>〜</colgroup>内に入れられる要素は<col>だけです。

次回予告

いかがでしたか? なんかややこしいですが、サンプルを実際にいじってみると、どんなもんかわかると思います。背景色やフォントスタイルを変えたり、いろいろ実験してみてください。
<table>については今日でやっと終わりです。さすがに飽きましたよねぇ〜。長かった。

次回からは、セクション要素についてまとめていこうと思います。

HTML5から、セクション分けのための新要素が登場。以前やった<nav>もこのセクション要素です。このほかに<section><article><aside>があります。

セクション要素は、見出し要素(h1〜6)と一緒に使って、HTML文書内に「章・節・項」などの階層を作ってあげる役割です。HTML文書がすっきりし、CSSの指定もスマートになるので、ぜひ使いたい要素です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2017/07 | 08
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.