カテゴリー

キーワード

 
> th,td要素の属性を紹介します...

th,td要素の属性を紹介します 【HTML5 実践編】


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

th、td要素の属性

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


前回に引き続き、table要素に関連する話をさせていただきます。

今日はtable要素の子要素であるth要素,td要素の属性について、です。


前回はコチラ ⇒ HTML5におけるtable要素の基本を紹介します【HTML5 実践編】 



属性紹介

前回も触れましたが、table要素だけでなく、th要素、td要素も、装飾に関する属性は全て廃止されています。
装飾に関してはCSSで全て行うべきであるとされていますのでお気をつけください。


th要素で使える属性

colspan、rowspan、headers、scope 、abbr、sorted 


td要素で使える属性

colspan 、rowspan 、headers 


それぞれ解説

colspan rowspan

これは色々な表を作るのに必要不可欠な属性です。
慣れないうちはわかりにくいかもしれませんが、要点さえつかめば容易に作れるようになりますので挑戦してみてください。


参考ソース

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>table要素 colspan rowspan</title>
<style>
.table_span {
    width:700px;
    height:500px;
    border:2px solid #000000;
    border-collapse:collapse;
}
.table_span tr th, .table_span tr td{
    border:1px solid #000000;
    padding:10px;
}
.table_span tr th {
    background:#eeeeee;
}
.table_span tr td.service {
    color:#ff0000;
    font-size:18px;
    font-weight:bold;
}
</style>
</head>
<body>
    <table class="table_span">
        <tr>
            <th colspan="2">
                Scene Life食堂
            </th>
            <th>
                値段
            </th>
        </tr>
        <tr>
            <td rowspan="2">
                食べ物
            </td>
            <td>
                カツ丼
            </td>
            <td>
                800円
            </td>
        </tr>
        <tr>
            <td>
                サーロインステーキ
            </td>
            <td class="service">
                1500円
            </td>
        </tr>
        <tr>
            <td rowspan="2">
                飲み物
            </td>
            <td>
                烏龍茶
            </td>
            <td>
                200円
            </td>
        </tr>
        <tr>
            <td>
                オレンジジュース
            </td>
            <td>
                200円
            </td>
        </tr>
        <tr>
            <td rowspan="2">
                どちらでもあるもの
            </td>
            <td>
                カレー
            </td>
            <td>
                600円
            </td>
        </tr>
        <tr>
            <td>
                麻婆豆腐
            </td>
            <td>
                500円
            </td>
        </tr>
    </table>
</body>
</html>

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


colspan rowspan説明画像


解説

7行目~24行目まではCSSによる装飾です。
tableにクラスをつけ(28行目)、これに対してCSSで装飾をつけました。
見やすいように幅や高さ、色、背景色、枠線などを指定しています。
52行目のtdにも個別のclassを指定して文字色、文字サイズ、文字の太さを変えています。


30行目 colspan="2"とあります。これは『縦列2列分』という意味です。
画像を見ていただいたらわかる通り、『Scene Life食堂』という文字が縦列2列分にまたがって表示されています。
colspan colは、columnの略です
columnは元々、円柱のことですね。円柱が縦方向に伸びている様から列を意味するようになりました。
ちなみに、新聞や雑誌のコラムの語源もこれです。


38、57、76行目 rowspan="2"『横行2行分』という意味です。
画像をご覧ください。『食べ物』『飲み物』『どちらでもあるもの』が横行2行分にまたがって表示されていますね。


scope

見出しの対象範囲を指定する属性(th要素のみに使える)


scope属性の使用は必須ではありませんが、複雑な表を組むときに用いることが推奨されています。
音声読み上げソフトがデータ構造をとらえやすいように、という理由です。
またHTML5で推進されているセマンティックな文書構造を目指すという趣旨にも合致しています。


scope属性の値には、colrowcolgrouprowgroupautoがあります。


scope="col"

参考ソース

<table border="1">
    <tbody>
    <tr>
        <th scope="col">メニューカテゴリー</th>
    </tr>
    <tr>
        <td>食べ物</td>
    </tr>
    <tr>
        <td>飲み物</td>
    </tr>
    <tr>
        <td>どちらでもあるもの</td>
    </tr>
    </tbody>
</table>

わかりやすいように、table部分のみ抜き出しています。


scope属性 colの説明画像


解説

4行目 scope="col"で、そのth要素が列方向(下方向)への見出しであることがわかります。


scope="row"

参考ソース

<table border="1">
    <tbody>
    <tr>
        <th scope="row">食べ物メニュー</th>
        <td>カツ丼</td>
        <td>サーロインステーキ</td>
        <td>ちらし寿司</td>
    </tr>
    </tbody>
</table>

※わかりやすいように、table部分のみ抜き出しています。


scope属性 rowの説明画像


解説

4行目 scope="row"で、そのth要素が行方向(右方向)への見出しであることがわかります。


scope="colgroup"

参考ソース

<table border="1">
    <colgroup span="2"></colgroup>
    <colgroup span="1"></colgroup>
    <tbody>
        <tr>
            <th scope="colgroup">SceneLife食堂</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>カツ丼</td>
            <td>烏龍茶</td>
            <td>カレー</td>
        </tr>
        <tr>
            <td>サーロインステーキ</td>
            <td>オレンジジュース</td>
            <td>麻婆豆腐</td>
        </tr>
        <tr>
            <td>ちらし寿司</td>
            <td>ビール</td>
            <td>蕎麦</td>
        </tr>
    </tbody>
</table>

scope属性 colgroupの説明画像


解説

2、3行目のcolgroupという要素はtableの子要素として使うもので、表の列を意味的なまとまりとしてグループ化します。
この場合、縦列左から2つを一つのグループ、縦列1つを一つのグループとしています。


6行目 scope="colgroup"のついたthは左2列のグループに対する見出しということになります。


scope="rowgroup"

参考ソース

<table border="1">
    <tbody>
        <tr>
            <th scope="rowgroup">SceneLife食堂</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>カツ丼</td>
            <td>サーロインステーキ</td>
            <td>ちらし寿司</td>
        </tr>
        <tr>
            <td>烏龍茶</td>
            <td>オレンジジュース</td>
            <td>ビール</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>カレー</td>
            <td>麻婆豆腐</td>
            <td>蕎麦</td>
        </tr>
    </tbody>
</table>

scope属性 rowspanの説明画像


解説

rowgroupは行グループに対する見出しであることを示します。
上記ソースの場合、tbody(表の行を意味的なまとまりとしてグループ化したうちの表本体部分)があり、thは画像の赤枠で囲った範囲(行グループ)の見出しということになります。


headers

対応する見出しセルを指定する属性(th、tdの両方に使える)です。


scopeと同じく必ず使わなければならないわけではありませんが、複雑な表(テーブル)を組むときに用いることが推奨されています。


縦横を指定して1つのセルを特定できますので、より複雑な表(テーブル)を作りたいときに使うとテーブル構造がより明らかになります。


参考ソース

<table border="1">
    <caption>2月 価格 販売数</caption>
    <thead>
        <tr>
            <th id="items" rowspan="3">メニュー</th>
            <th id="menu1">カツ丼</th>
            <th id="menu2">烏龍茶</th>
            <th id="menu3">カレー</th>
        </tr>
        <tr>
            <th id="menu4">サーロイン</th>
            <th id="menu5">オレンジ</th>
            <th id="menu6">麻婆豆腐</th>
        </tr>
        <tr>
            <th id="menu7">ちらし寿司</th>
            <th id="menu8">ビール</th>
            <th id="menu9">蕎麦</th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <th id="item1" headers="items" rowspan="3">値段</th>
            <td headers="item1 menu1">800</td>
            <td headers="item1 menu2">200</td>
            <td headers="item1 menu3">600</td>
        </tr>
        <tr>
            <td headers="item1 menu4">1500</td>
            <td headers="item1 menu5">200</td>
            <td headers="item1 menu6">500</td>
        </tr>
        <tr>
            <td headers="item1 menu7">600</td>
            <td headers="item1 menu8">400</td>
            <td headers="item1 menu9">500</td>
        </tr>
        <tr>
            <th id="item2" headers="items" rowspan="3">売上点数</th>
            <td headers="item2 menu1">50</td>
            <td headers="item2 menu2">60</td>
            <td headers="item2 menu3">49</td>
        </tr>
        <tr>
            <td headers="item2 menu4">20</td>
            <td headers="item2 menu5">10</td>
            <td headers="item2 menu6">25</td>
        </tr>
        <tr>
            <td headers="item2 menu7">15</td>
            <td headers="item2 menu8">28</td>
            <td headers="item2 menu9">35</td>
        </tr>
    </tbody>
</table>

headers属性についての説明画像


解説

2行目 caption要素は、表のキャプション(タイトルや説明)を示します。
3行目 theadは表のヘッダ部分を表します。表中に1つだけ用いることができます。


画像にもある通り、縦横を指定して一つのセルを指し示します。


abbr

th 要素に使用される属性です。
見出しセルの内容を短く表す名称を指定する必要があります。


音声ブラウザが各セルに対応する見出しセルを読み上げる際など、他のセルとの関係を説明する際に使用されたりします。
こんな感じに書きます。


<th abbr="SceneLife食堂">大阪市にあるSceneLife食堂</th>

sorted

th 要素に使用される属性です。
現在策定中のHTML5.1で、table要素にsortable属性を指定することでソート可能なテーブルであることを示します。


将来的に、この属性を指定することでソート機能が提供される可能性があります。


参考ソース

<table sortable="sortable">
    <tr>
        <th sorted="1">見出し1</th>
        <th sorted="2">見出し2</th>
    </tr>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
</table>

まとめ

th要素とtd要素の属性について見ていただきました。

colspan、rowspanはよく使われますので、確実にマスターしておいてください。


では、次回はテーブルの装飾についてお話しさせていただきます。


【追記】下記、続きです。

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


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


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

 

 

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

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

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

前職:ライター、小説家

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

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

 


カテゴリー

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