table・tr・th・tdの混乱！！〜主婦が気づいた！html css〜

・table
・tr
・th
・td

【t】ばっかりでよくわからない！！怒

私が最初に抱いた感情です。笑

これはおそらく覚えるしかないのだと思いますが、
table・tr・th・td　とだけ言われても私は何が何だかわからなかったので、
食事に置き換えて簡単に説明してみたいと思います！

ワンプレートで食事を作ります…

【table】1つのテーブルの上に、大きなお皿を1枚のせました。
【tr】3種類乗せたいので、お皿の中を3つに区切ります。
【th】①　主食（炭水化物）・主菜（メインのおかず）・副菜（小鉢のおかず）をプレートに乗せたい！
【td】②　詳細は、　主食=ご飯　主菜=ハンバーグ　副菜=ミックスベジタブル　はどうだろう？
【td】③　いや、　　主食=パン　主菜=ステーキ　　副菜=目玉焼き　これにしようかな？

ソースなどが流れてこないようにしたいので、3つそれぞれに【th】で仕切りをつくってあげましょう！

こんな感じでしょうか？？

これを実際にHTMLにしてみると…

<table>
　<tr>
　　<th>主食</th>
　　<th>主菜</th>
　　<th>副菜</th>
　</tr>
　<tr>
　　<td>ご飯</td>
　　<td>ハンバーグ</td>
　　<td>ミックスベジタブル</td>
　</tr>
　<tr>
　　<td>パン</td>
　　<td>ステーキ</td>
　　<td>目玉焼き</td>
　</tr>
</table>