HTML/tableの使い方

今回はtableの使い方を図にしてみました。
ググっても説明文ばかりで理解しにくいと感じたのは、私だけでしょうか?

プログラミングの勉強を再開しました。キッカケは「INTPの適職」で推されていたので、続けられるか、将来仕事に出来る程になるかは別として、やってみようと思ったからです。
まずはWordPressを使用してHPを作ったり、LP作ったり出来るようになる為に、FronthacksUdemywebデザインで勉強はじめました。

tableの使い方について

まずtableとは、<tr>、<th>、<td>などと組み合わせて表を作成するためのタグです。(excelの表のイメージ)
表の基本的な構造は<table>~</table>の中に<tr>~</tr>で表の横部分を指定し、その中に<th>~</th>や<td>~</td>で見出しや内容を1セルずつ書き込みます。

文字だと分かりにくいので、作った図をどうぞ。

テーブルのイメージ図解

タグの詳細です。
theadタグ・・・見出しの行です。 table headの略。
thタグ・・・列のタイトルを表します。thを増やせば列が増えます。 table headerの略。
tbodyタグ・・・内容部分です。 table bodyの略。
trタグ・・・(内容部分の)行です。trを増やせば行が増えます。 table rowの略。
tdタグ・・・(内容部分の)データです。入れ忘れると空白セルになるのでしょうか。 table dateの略です。

実際に見えるのは↓ここだけです。(バックグラウンドで色指定をしなければ背景は白です)

どうやっても見にくくなるのは、私のセンスの問題かと思います。
それは置いておいて、イメージは掴めましたでしょうか?

文字読んで分かる人凄いですね。
私は自分が思っていた以上に「文字だけで受ける説明」や「口頭でだけの説明」が苦手だったようです。
図がないと、何処が重要で覚えなきゃいけない事なのか分からないです。
なので自分のためにも、同じように困っている方のためにも、これからも分かりにくい点は図にして行きたいと思っています。
ただ、初心者ですので勉強しつつアウトプットしています。ちょこちょこ修正する可能性があります。
間違えている点ありましたら教えていただけると助かります。

読んでいただきいただき有難うございました。