HTML: table タグ (1)
概略
table の表は table タグ、 caption タグ、 thead タグ、 th タグ、 tbody タグ、 tr タグ、 td タグ など多くのタグで構成されます。
-
MDN: table: 表要素
table を表す親になるタグです。 -
MDN: caption: 表キャプション要素
表の見出しのタグです。 -
MDN: thead: 表ヘッダー要素
表の 1行目のタグです。各列の見出しになります。 -
MDN: tbody: テーブル本体要素
表の本体のタグです。1行目に thead がある場合は表の 2行目以降になります。 -
MDN: tr: 表の行要素
表の 1行を表すタグです。thead や tbody の中で使用します。 -
MDN: th: 表見出し要素
表の 1行目の各項目 (セル) を表すタグです。列の見出しになります。 thead の tr 内などで使用します。 -
MDN: td: 表データセル要素
表の各項目 (セル) を表すタグです。tbody の tr 内で使用します。 - HTML: 文章レイアウト: 箇条書き、目次、表など
HTML のみのサンプル
TestJS_edit_html01.htmlHTML のみ (CSS なし) の初期表示のサンプル。 編集シミュレーション。
table の初期表示では表の枠線や背景色は設定されていません。 これらは CSS で指定します。
CSS border-collapse
table の初期表示ではセル (th タグ, td タグ) の間にすき間があります。 すき間の有無は CSS の border-collapse で設定できます。
table { border-collapse: collapse; /* td, th のセル間のすき間を無しにする。 */ }TestCSS_table_border_collapse01.html
CSS border-collapse のサンプル。
table に枠線や背景色を付ける
table の枠線は CSS の border で設定します。
背景色は background で設定します。
CSS: border - 枠線
table に枠線や見出しの背景色を付けるサンプル。
TestJS_edit_html01.html
編集シミュレーション。
テキストの配置、センタリングなど
table のセル (td タグ、th タグ) 内のテキスト配置は CSS の text-align や vertical-align で設定します。
-
MDN: text-align
text-align: テキストの横方向の配置の指定 left : 左寄せ center : 左右中央 right : 右寄せ
HTML: 文章レイアウト: センタリングなど
-
MDN: vertical-align
vertical-align: テキストの縦方向の配置の指定 top : 上寄せ middle : 上下中央 bottom : 下寄せ
CSS: vertical-align
td 内のテキスト配置のサンプル。
TestCSS_table_text_justify01.html
表の1列目のテキストを均等割り付けにしたサンプル。 text-align-last: justify; を指定します。
HTML: 文章レイアウト: 均等割り付け
隣接するセルを結合する
colspan属性, rowspan 属性 で隣接するセルを結合することができます。
colspan :セルを横方向に結合する。 rowspan :セルを縦方向に結合する。TestHTML_table_colspan_rowspan1.html
colspan属性, rowspan 属性のサンプル。
TestHTML_table_colspan_rowspan2.html
HTML ソース
colspan, rowspan を使用した複雑な table のサンプル。
印刷用の表は HTML でも作成できます。
上のサンプルを Edge の印刷画面で表示した例です。 印刷だけでなく PDF ファイルに保存することもできます。
HTML をワープロ代わりに使う
20世紀のごく初期のホームページでは 上のような仕組みでページ全体や目次など段組みのレイアウトもしていました。 現在は main, header, footer, nav などタグや CSS flex などがあるので table タグを使った複雑なレイアウトは使用しません。