今日の教材：Lesson-7 テーブルを活用しましょう
　　　　　　Lesson-2 HTML での記述を始めましょう後半

テーブルタグ

表（テーブル）をHTMLでつくるには

L7.2.2 table 要素（テーブルの定義）

<table>（テーブルの定義情報）</table>

テーブルの範囲を指定します。全体。

L7.2.3 caption 要素（主題の定義）

<caption>（主題の定義情報）</caption>

表のキャプション（主題）を指定します。表の名前。あれば。

L7.2.4 tr 要素（1 行範囲の定義）

<tr>1 行範囲の定義情報</tr>

Table Row の略であり 1 行の範囲を指定します。

L7.2.5 th 要素（見出し項目の定義）

<th>見出し項目の定義情報</th>

Table Header の略であり見出し項目を指定します。

セルを横方向つなげる時は、colspan 属性で「colspan=”つなげたい数”」を指定します。セルを縦方向つなげる時は、rowspan 属性で「rowspan=”つなげたい数”」を指定します。

L7.2.6 td 要素（データ項目の定義）

<td>データ項目の定義情報</td>

Table Data の略でありデータ項目を指定します。

【セルの結合】セルを横方向つなげる時は、colspan 属性で「colspan=”つなげたい数”」を指定します。セルを縦方向つなげる時は、rowspan 属性で「rowspan=”つなげたい数”」を指定します。

グループ化しておくと、後々CSSやるときにやりやすくなる。以下そのための要素。

L7.2.7 colgroup 要素（列グループの定義）

<colgroup>列グループの定義情報</colgroup>

列のグループを定義します。表の縦列の属性をまとめて指定したいときに使う。colgroup 要素を記述する場合は、table タグの直下（または、caption タグの直下）に書く必要があります。colgroup タグに指定できるスタイル（CSS）は、background/border/width/visibility プロパティです。

L7.2.8 thead 要素（表のヘッダーグループの定義）

<thead>表のヘッダーグループの定義情報</thead>

表のヘッダーグループを定義します。省略可能ですが指定するとよりテーブル構造を明確化できます。

L7.2.9 tbody 要素（表のボディグループの定義）

<tbody>表のボディグループの定義情報</tbody>

表のボディグループを定義します。省略可能ですが指定するとよりテーブル構造を明確化できます。

L7.2.10 tfoot 要素（表のフッタグループの定義）

<tfoot>表のフッタグループの定義情報</tfoot>

表のフッターグループを定義します。省略可能ですが指定するとよりテーブル構造を明確化できます。

HTMLの段階では文字幅やフォントなどはいじれない。CSSでやる。

おまけ。以下CSS

L7.4.3 border-collapse プロパティ（隣接セルの表示方法）

border-collapse: 隣接セルの表示方法;

テーブルの隣接するセルの表示方法を指定します。

隣接セルの表示方法は、以下の値で指定します。
collapse：隣接するセルのボーダーを重ねて表示します。ボーダー＝間の線のこと
separate：隣接するセルのボーダーを間隔をあけて表示します。

L7.4.4 border-spacing プロパティ（隣接セルのボーダー間の間隔）

border-spacing: 隣接セルのボーダー間の間隔;

テーブルの隣接するセルのボーダー間の間隔を指定します。本プロパティは、border-collapse プロパティに「separate」が指定されている時に有効になります。border-spacing の初期値は、仕様としては、0 ですが、主要なブラウザの初期値は、1px に設定されているようです。

隣接セルのボーダー間の間隔は、複数指定でき指定した個数により対象位置が異なります。1つ指定「上下左右」のすべての指定になります。。2つ指定「左右」と「上下」の順で指定します。

L7.5 注意事項

L7.5.1 1 HTML の記述

  • th タグは縦に並べても良く表の中に点在していても大丈夫です。
  • セル内の余白を設定する時は、th タグまたは、td タグのスタイルで padding プロパティを指定します。
  • セル内に画像を表示させる時は、th タグまたは、td タグ内に img タグを記述します。