【HTML】table要素の基礎を学ぼう

table要素とは

table要素とはHTMLでカレンダーや、表を作る時に使います。

例：

tr・th・td要素

table要素に付随する要素として、tr要素、th要素、td要素があります。

tr要素･･･表の行を表す要素

th要素･･･表の見出しセルを表す要素

td要素･･･表の内容セルを表す要素

これらをうまく組み合わせて表を作っていきます。

thead・tbody・tfoot要素

thead要素･･･その行が見出しの行であることを表す

tbody要素･･･その行が内容部分の行であることを表す

tfoot要素･･･その行がフッター部分の行であることを表す

記述方法

tr・th・td要素のみ

See the Pen table by 古澤 良汰 (@ryotarofu) on CodePen.

thead・tbody・tfoot要素を含めた記述

See the Pen Untitled by 古澤 良汰 (@ryotarofu) on CodePen.

表に使えるCSS

・border ･･･ 表に枠線をつけるプロパティ

・border-collapse: collapse; ･･･ 隣接するborderを重ねることができるプロパティ

・text-align ･･･ テキストの行揃えをするプロパティ

・vertical-align ･･･ 上下の位置を指定するプロパティ

・width ･･･ 横幅を指定するプロパティ