カテゴリー

キーワード

 
> table要素の列(縦方向)をグ...

table要素の列(縦方向)をグループ化します(colgroup、colspan)【HTML5 実践編】


2015 年 3 月 23 日 投稿    view: 22782
タグ:
このエントリーをはてなブックマークに追加

colgroupとcolについて

こんにちは、WEBマーケティング部の杉尾です。


前回はthead、tbody、tfootでtable(表)を横にグループ分けしました。


今回はそれに引き続き、tableを縦にグループ分けしたいと思います。


前回はコチラ ⇒ table要素の行(横方向)をグループ化します(thead、tbody、tfoot)【HTML5 実践編】


colgroup col

tableを縦にグループ分けするために使うのは、colgroupcolです。


それぞれ個別に見て行きましょう。


colgroup要素

・table要素の子要素として使う。

tableを『意味的なまとまり』として、縦にグループ分けする

記述場所はcaptionがある場合、それより後ろで、thead、tbody、tfoot、trより前でなければならない。

使える属性はspan(とグローバル属性)。

spanを使った場合、colgroupの中にはどの要素も記述できない。
spanを使っていない場合、col要素を中に記述することができる。

HTML4.01までに使われていた属性であるwidth、align、valign、char、charoffは廃止。


col要素

・span属性を持たないcolgroupの子要素として使う。

・閉めタグがいらない(<col>だけでよい)

・tableを縦にグループ分けする。(まとまりとしての意味を持たない)

・col要素の中に別の要素を記述することはできない。

・使える属性はspan(とグローバル属性)。

HTML4.01までに使われていた属性であるwidth、align、valign、char、charoffは廃止。


colgroup要素 col要素 使い分け

使い分けはこうです。


. colは必ずcolgroupの子要素として使う
. colgroupが『意味的なまとまり』としてグループ分けするのに対して、colはCSSで装飾するために縦列をグループ分けする


1に関しては、HTML5からの仕様です。


2に関しては、colgroupでグループ分けすることで、『セマンティック』な文書構造を作ることができます。
『セマンティック』とはHTML5を紹介する記事でよく言っている通り、


コンピュータに文書や情報の持つ意味を正確に解釈させ、文書の関連付けや情報収集などの処理を自動的に行わせる技術について用られる語。


のことです。

HTML5では、このセマンティックな文書構造を作ることが推奨されています。


それに加えて、「意味的には同じグループだが、別のCSSを適用したい」というときにcolを使います。
(colgroupにもCSSを適用することができます。)


注意点が2つ

colgroup要素、col要素を使うに当たって、注意点が2つあります。

まず1つ目は、


colgroupやcolにcssを指定しても効かないことがある


というものです。


具体的に、どんなものが効かないかというと、フォントに関するもの(color,font-size,font-weight,text-align)やtext-align、paddingなどです。


なぜ効かないかというと、『縦列内のthやtdはcolgroupやcolの支配下にないから』です。
わかりやすく言うと、「テーブルの構造にはcssを適用するけど、中身のデータに関しては知らないよ」って感じでしょうか。

ですから適用されるCSSは横幅と背景くらいだと考えておいていいと思います。


IE6、IE7ではCSSが適用されるので対応する場合は注意


2つ目の注意点は


colgroupにspan属性を使った場合、col要素を持てない


ということです。


こちらは言葉による説明だけだとわかりにくいと思いますので、参考ソースで詳しく見ていただきます。


参考ソース

というわけで、参考ソースをご覧ください。


参考ソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-language" content="jp">
<title>colgroup col</title>
<style>
.test_table {
    width:700px;
    /*height:500px;*/
    border:2px solid #777777;
    border-collapse:collapse;
}
.test_table tr th, .test_table tr td {
    border:1px solid #777777;
    /*padding:10px;*/
}
/*.test_table thead tr {
    background-color:#e74c3c;
    color:#ffffff;
}
.test_table tbody tr {
    background-color:#f2f2f2;
}
.test_table tfoot tr {
    background-color:#444444;
    color:#ffffff;
}*/
.price {
    color:#ff0000;
    font-weight:bold;
}
.t_left {
    background-color:#f2f2f2;
    color:#ff0000;
    padding:15px;
    margin:15px;
    font-weight:700;
    font-size:28px;
    text-align:right;
    width:250px;
    height:500px;
}
.t_right {
    background:#bdc3c7;
}
</style>
</head>
<body>
    <table class="test_table">
        <caption>SceneLife食堂2月度</caption>
        <colgroup span="2" class="t_left"></colgroup>
        <colgroup><col class="t_right" span="2"><col></colgroup>
        <thead>
            <tr>
                <th></th>
                <th>メニュー</th>
                <th>価格</th>
                <th>注文数</th>
                <th>売上</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th rowspan="2">食べ物</th>
                <td>カツ丼</td>
                <td>800</td>
                <td>50</td>
                <td>40,000</td>
            </tr>
            <tr>
                <td>サーロインステーキ</td>
                <td class="price">1,500</td>
                <td>20</td>
                <td>30,000</td>
            </tr>
            <tr>
                <th rowspan="2">飲み物</th>
                <td>烏龍茶</td>
                <td>200</td>
                <td>60</td>
                <td>12,000</td>
            </tr>
            <tr>
                <td>オレンジジュース</td>
                <td>200</td>
                <td>10</td>
                <td>2,000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
            <th colspan="3">合計</td>
                <td>140</td>
                <td>84,000</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

colgroup、colを適用したtable


解説

本来、装飾部分のCSSは外部スタイルシートとして分けるべきですが、今回はわかりやすいように同ソース中に書きました。


前回のソースを基本として、colgroupcolを付け加えてみました。


10行目16行目 この2つがあると、colgroupに指定したCSSがわかりづらくなるのでコメントアウトして適用されないようにしています。
18行目28行目 colgroup、colよりもthead、tbody、tfootに指定されたCSSが優先されるので、ここもコメントアウトして適用されないようにしています。


33行目43行目 左の2列にt_leftというclass名をつけ、様々なスタイルを指定しています。
ですが、実際に適用されているのは34行目のbackground-color(背景色:薄いグレー)とwidth(横幅:250px)のみです。


44行目46行目 左から数えて4列目と5列目にt_rightというclass名をつけ、背景色を指定しています。


52行目 colgroup span="2"で左から数えて2列を一つの『意味的なまとまり』としてグループ分けしています。
53行目 colgroupで左から数えて3~5列目を一つの『意味的なまとまり』としてグループ分けしています。
colgroupの中にcolを2つ入れ、最初のcol span="2"で左から数えて2列を一つの(意味を持たない)まとまりとしています。
もう一方のcolには何も指定していません。spanをつけない場合、1列ということになります。


参考ソースを見て何となくおわかりいただけたと思いますが、colgroupとcolを同時に使うときの注意点を再度確認しておきましょう。


<colgroup span="2" class="t_left"></colgroup>
<colgroup><col class="t_right" span="2"><col></colgroup>

1行目に注目してほしいのですが、colgroupにspan属性を使ったら、中にcolは入れられません。
colを入れるなら、2行目のようにcolにspanをつけてグループ分けしてください。
また、参考ソースのように2つの書き方を混在させても問題ありません。


まとめ

2回にわたってtableをグループ分けする要素について説明させていただきました。


colgroupとcolはちょっとクセのある要素ですが、thead、tbody、tfootと共に覚えておくと表を作るときの労力が軽減されるはずです。


最後までお読みいただき、ありがとうございました。


 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事