tableタグの混乱

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>

主食 主菜 副菜
ご飯 ハンバーグ ミックスベジタブル
パン ステーキ 目玉焼き

 

こんな感じです!

HTML、私はウェブサイトをつくろうと思うと頭が混乱してきます…笑

ですので、身近なものに置き換えて考えてみると良いかなー
何かわかりやすい表現はないかなー
と、考えながら勉強していますので、ご参考になれば幸いです!!

Tags: No tags

Leave A Comment

Your email address will not be published. Required fields are marked *

CAPTCHA