HTMLのtable, caption, thead, tbody, tfoot, tr, th, tdタグの使い分け

tableタグ

役割＆特徴

表全体を囲みます。

表を使用するメリットは各要素を横並びにした時に、要素の幅をそろえやすいこと。
例えばdlタグを使用して、dt, ddを横並びにしたとします。
その時はdtタグ内の文字数によってdtの幅がマチマチになってしまい、全体で見た時に縦列がガタガタになってしまいます。
tableタグを使用すると、thの幅は1番大きいthの横幅にそろえられて、縦列が一直線にそろいます。

デメリットは表は横幅を取りやすいということです。
パソコンではきれいに表全体が見えていても、スマホで見ると表が画面からはみ出して、横スクロールしないと右側が見られない、ということもよく起こります。

theadタグ

役割＆特徴

tableのheader、つまり表の1行目の見出しを作成します。

thead, tbody, tfootタグを記述しない開発者もいますし、画面上の表示に問題はありません。
ですが案件として収入が発生する成果物はていねいに作成するようにしましょう。

tbodyタグ

役割＆特徴

tableのbody、つまり表の主になるデータを記述する部分です。

ここに数行から数十行のデータを記述していくわけですが、途中からだるくなります。
ちなみに私は5行までが限界です。

じゃあ5行以上書かなきゃいけない時はどうするのかですが、javascriptを使います。
作成するデータをエクセルとかでもらってcsvファイルにします。
それをjavascriptで読み込んで、javascriptにHTMLを作成させます。

記述量が増えるとHTMLの閉じタグの記述漏れも増えます。
HTMLに慣れたらjavascriptの学習も検討してみてください。

tfootタグ

役割＆特徴

tableのfooter、つまり表の最後の行を作成します。

tbodyで記述したデータの合計値を表示したりすることが多いです。
ここでもjavascriptの話になりますが、tbodyにcsvファイルの中身を記述していく中で、合計値などを計算させることができます。
月ごとに読み込むデータが変わっても、tfootの計算式は変わらないので、簡単に使いまわすことができます。