メインコンテンツへスキップ

表(テーブル)

1.表関連の要素

HTML文書の
表(テーブル)に
関わる要素を
まとめました。

表(テーブル)を表す要素があります。

表(テーブル)に関わる要素は、以下の各要素です。

要素
メタ
フロー
フレー
埋込
区分化
見出し
起源
対話型
メタ
メタデータコンテンツ
スク
スクリプトをサポートする要素
フロー
フローコンテンツ
区分化
セクショニングコンテンツ
起源
セクショニングルート(廃止)
見出し
ヘディングコンテンツ
フレー
フレージングコンテンツ
埋込
エンベデッドコンテンツ
対話型
インタラクティブコンテンツ
要素 種類 メ
タ 		流
れ 		文
節 		埋
込 		対
話 		知
覚 		区
分 		見
出 		ス
ク
table 通常要素 － 〇 － － － 〇 － － －
caption 通常要素 － － － － － － － － －
colgroup 通常要素 － － － － － － － － －
col 空要素 － － － － － － － － －
thead 通常要素 － － － － － － － － －
tfoot 通常要素 － － － － － － － － －
tbody 通常要素 － － － － － － － － －
tr 通常要素 － － － － － － － － －
th 通常要素 － － － － － － － － －
td 通常要素 － － － － － － － － －

2.テーブルとは

テーブルとは、
表, 一覧表 などの
意味を持つ英単語です。

表とは、関係ある事柄を分かりよく示す為に、上下, 左右 に配置して一覧しやすく示す、その形式です。
１つ１つの項目をセルと言います。
左右, 横に並んだものを行と言います。
上下, 縦に並んだものを列と言います。

3.セル

セル
１Ａ１Ｂ１Ｃ
２Ａ２Ｂ２Ｃ
３Ａ３Ｂ３Ｃ

表(テーブル)を構成する１つ１つの項目を、セル(Cell) と言います。

セルには、ヘッダーセルとデータセルがあります。それぞれth要素, td要素を用いて表します。

4.行

行
一行一行一行
二行二行二行
三行三行三行

項目が左右, 横に並んだものを、行と言います。

行は、tr要素を用いて表します。

5.列

列
一列二列三列
一列二列三列
一列二列三列

項目が上下, 縦に並んだものを、列と言います。

列は、col要素を用いて表します。

列
一列二列三列
一列二列三列
一列二列三列
  1. <table>
  2. <caption>列</caption>
  3. <colgroup>
  4. <col>
  5. <col style="background-color: ;">
  6. <col>
  7. </colgroup>
  8. <tbody>
  9. <tr><td>一列</td><td>二列</td><td>三列</td></tr>
  10. <tr><td>一列</td><td>二列</td><td>三列</td></tr>
  11. <tr><td>一列</td><td>二列</td><td>三列</td></tr>
  12. </tbody>
  13. </table>

列の要素での表現が コンテナ, 包括する要素ではないので、イメージしにくいので ソースコード の提示で表してみました。 個々のセルではなく またその祖先の要素(包括する要素)からの継承でもなく、col要素によって指定の列のセルに影響を及ぼしています。

尚 例示では、個々のセルを意識しやすくする為に、上下左右の罫線(border) の装飾を別途に指定しています。

一列
一列
一列
二列
二列
二列
三列
三列
三列
  1. <div class="ctaSample053">
  2. <div>
  3. <div>一列</div>
  4. <div>一列</div>
  5. <div>一列</div>
  6. </div>
  7. <div>
  8. <div>二列</div>
  9. <div>二列</div>
  10. <div>二列</div>
  11. </div>
  12. <div>
  13. <div>三列</div>
  14. <div>三列</div>
  15. <div>三列</div>
  16. </div>
  17. </div>
  1. .ctaSample053 {
  2. display: flex;
  3. flex-flow: row wrap;
  4. align-items: stretch;
  5. justify-content: flex-start;
  6. }
  7. .ctaSample053 > * {
  8. flex: 0 1 2.5em;
  9. margin-right: 0.125em;
  10. }

列を纏まりとして重視して、列ごとをボックスとして捉えた例示です。

6.気を付ける点

幅

幅は、セルの幅があって表(テーブル)の幅があるので注意が必要です。

境界線

セルが境界線を共有するか分離するかの設定は、td要素に指定するのではなくて table要素に指定します。CSSでの場合もです。

テーブル, リスト

列, 行に意味があって表(テーブル)なので、並ぶだけなら一覧(リスト)の階層でul要素の入れ子で良いと思います。
行など片方だけに意味がある場合は、dl要素が良いかもしれません。

列が不適切
一列目二列目三列目
一列目二列目三列目
一列目二列目三列目
  1. <table class="ctaSample063">
  2. <caption>列が不適切</caption>
  3. <tbody>
  4. <tr><td>一列目</td><td>二列目</td><td>三列目</td></tr>
  5. <tr><td>一列目</td><td>二列目</td><td>三列目</td></tr>
  6. <tr><td>一列目</td><td>二列目</td><td>三列目</td></tr>
  7. </tbody>
  8. </table>
  1. .ctaSample063 > tbody > tr { display: flex; flex-wrap: wrap; }
  2. .ctaSample063 td { border: 1px dotted; }
  3. .ctaSample063 td:nth-child(3) { background-color: #ccffff; }

行を折り返す様に表す CSSで指定してみました。
HTMLでは行を全て表す時に、セル(項目)が各行で何番目であるかという事で、列を表しています。なので、行の中でセル(項目)の並びを折り返してしまうと、列が適切に描画されず表(テーブル)として不適切となります。