gorogoronyan FC2

HTML: table タグ (1)

概略

table の表は table タグcaption タグthead タグth タグtbody タグtr タグtd タグ など多くのタグで構成されます。

HTML のみのサンプル

TestJS_edit_html01.html
HTML のみ (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 - 枠線

TestHTML_table_css01.html
table に枠線や見出しの背景色を付けるサンプル。
TestJS_edit_html01.html
編集シミュレーション。

テキストの配置、センタリングなど

table のセル (td タグ、th タグ) 内のテキスト配置は CSS の text-alignvertical-align で設定します。

TestHTML_table_td_text_align01.html
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 120 の印刷画面
Edge 120 の印刷画面
上のサンプルを Edge の印刷画面で表示した例です。 印刷だけでなく PDF ファイルに保存することもできます。
HTML をワープロ代わりに使う

20世紀のごく初期のホームページでは 上のような仕組みでページ全体や目次など段組みのレイアウトもしていました。 現在は main, header, footer, nav などタグや CSS flex などがあるので table タグを使った複雑なレイアウトは使用しません。

table タグ (2) に続く

関連

inserted by FC2 system