カテゴリー

キーワード

 
> HTML5におけるtable要素の基...

HTML5におけるtable要素の基本を紹介します【HTML5 実践編】


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

HTML5 table(基本)

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

今回から数回に渡り、HTMLのtable要素について説明させていただきます。


よろしくお願いします。



HTML5での変更点

W3Cによる勧告がある前から、テーブルをレイアウトに使わないよう周知されてきました。
勧告後もそれは変わりません。


理由としては、目の不自由な方が使う読み上げソフトでページを読み込んだとき、レイアウト目的で使われたテーブルがあると、構造を把握することが困難だからです。
アクセシビリティの観点から推奨されないということですね。


またHTML5の目指すセマンティックな文書構造という点から考えても、複雑なテーブル構造となるレイアウトに用いるのは好ましくないという見方もできそうです。


では、次に属性について、それぞれの要素を見ていきます。


table要素

summary属性、border属性以外のものは廃止されました。
idやclassなどのグローバル属性は使用できます)
また、border属性に関しては空文字列か『1』のみを用いるということになります。


table 廃止になった属性

cellpadding属性・cellspacing属性・frame属性・rules属性・width属性


th要素

tr要素の子要素として用いる。


th 廃止になった属性

align属性・axis属性・char属性・charoff属性・height属性・nowrap属性・valign属性・width属性


td要素

tr要素の子要素として用いる。


td 廃止になった属性

align属性・axis属性・char属性・charoff属性・height属性・nowrap属性・scope属性・valign属性・width属性 


基本構造

言葉で説明するより、ソースを見ていただいた方が早いと思います。


こちらです。
わかりやすいように、テーブルの部分のみ抜き出しています)


参考ソース】

<table>
    <caption>SceneLife 食堂メニュー</caption>
    <details>
        <summary>表の説明</summary>
        <p>SceneLife食堂のメニューをカテゴリー分けしました。</p>
    </details>
    <tr>
        <th scope="col">
            食べ物
        </th>
        <th scope="col">
            飲み物
        </th>
        <th scope="col">
            どちらでもあるもの
        </th>
    </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>
</table>

画像

テーブル SceneLife食堂メニュー


解説

1行目と最終行のtableタグで囲むことで、その範囲がテーブルであると指定します。


2行目 captionタグで、表(テーブル)のタイトルや説明を指定します。
このタグを使うときは必ずtableの子要素の先頭で使ってください。
中に文章を配置することもできます。
align属性はHTML5で非推奨となっていますので、文章の揃え位置にはcssを使ってください。


3行目 detailsはHTML5からの新要素で、詳細情報を示すときに使います。次に紹介するsummaryがある場合、summaryの内容が詳細情報の要約となります。


4行目 summaryもHTML5からの新要素です。親要素となるdetailsの要約・キャプションとしての機能を果たします。


5行目 pは文章を表します。ここではdetailsの中で詳細情報を示しています。


7行目17行目 trで囲って横の一行を示しています。18行目と28行目、29行目と39行目、40行目と50行目のtrに関しても同じです。


8行目10行目 thは表(テーブル)の見出しセルを示します。一般的なブラウザでは太字になり、中央寄せになります。table header(cell)の略です。
scope="col"はこの見出しに対応するデータが列方向(下方向)であることを示しています。
thは左に来ることもありますが、このときはscope="row"で行方向(右方向)であることを示します。


19行目21行目 tdは(テーブル)のデータセルを示します。table data(cell)の略です。


装飾はcssでする必要がありますので、現段階ではわかりにくいですね。
見やすくする指定については次回紹介したいと思います。


まとめ

つい数年前までレイアウトといえばtableみたいな使われ方をしていたのですが、今はご法度です。
僕もたまに『table使えたらな~』と思いますが、そこは別の上手いやり方が色々なところで紹介されていますので調べてみるのも楽しいですね。
当ブログでも紹介していきたいと思います。


次回からは装飾に関すること、それからthとtdの属性についてお話しさせていただきます。


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

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


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


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


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

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

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

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

前職:ライター、小説家

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

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

 


カテゴリー

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