チョコパイを240こ食べたエンジニア

PHPエンジニアをやった後、現在はフロントエンドエンジニアに・・。好物は『チョコパイと焼き鳥』。Twitterは@chooringo(ちょうりんご)

HTML5のテーブル系~table要素とcaption要素~

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

テーブル関連

table要素

複数の特質を持つデータを表す。テーブルモデルを構成する。
子孫要素によって行、列、およびセルが指定される。行と列はグリッドを形成する。
テーブルをレイアウトとして使用するのはだめ。

<table>
    <caption>メニュー</caption>
    <tr>
        <td>汁なし担々麺</td>
        <td>醤油ラーメン</td>
    </tr>
</table>

chromeで表示したとき
f:id:chooringo:20190615125718p:plain

カテゴリ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・次に書いた順に、
オプションでcaption要素、それに続く0個以上のcolgroup要素、オプションでそれに続くthead要素、それに続く0個以上のtbody要素または1個以上のtr要素、オプションでそれに続くtfoot要素、オプションでそれに続くスクリプトサポーティング要素

コンテンツ属性
・グローバル属性
・border ... 表のセルの周囲に境界線を引く必要があることを示す。空文字か"1"`のいずれか。

タグの記載場所
・フローコンテンツを配置できる場所

caption要素

親のテーブルのタイトルを表す。

カテゴリ
・なし

コンテンツモデル
・フローコンテンツ(table要素は含まない)

コンテンツ属性
・グローバル属性

タグの記載場所
・table要素の子要素として配置