[教えてエンジニア父ちゃん!] 何からやればいいの?②「tableタグから始めよう」

HTMLの中でも”tableタグ”から学ぶべし!

前回のブログで、「見習いエンジニアはHTMLから勉強するべし!」と父から教わりました。 その後、父から最初の課題が与えられました。 「まずtableタグを勉強してみよう!」 なぜhタグやliタグなどからではないのか、それはtableタグがHTMLの中で一番難しいからだそうです。 なぜtableタグが難しいのかというと、こんな表を作りたいと頭の中でイメージし、どうしたらその表が作れるのかの構造を考えてから書いていかないといけないからとのことでした。

まずtableタグを理解する

まずはtableタグについてを自分で調べてみることに。 tableタグとは、プログラミングで表を作成できる要素です。
”table”は表の全体を示すので、このタグの中に次のようなタグを入れて表を作っていきます。
”tr”は横の行を示す。(table rowの略) "td”は表の縦の欄。表の内容を示す。(table dataの略) "th"は表の見出しを示す。(table headerの略)
これらを組み合わせてtableタグを作っていきます。

実際に打ち出して考えて理解を深める

父からの問題「これどうなる?」①

その日の夜、父が問題を出してくれました。 [問題] 次のように打ち込んだ場合、どのように表示されるでしょう?
[答え]

父からの問題「これどうなる?」②

次に父が出してくれた問題です。 次の問題を解くためには、次の属性を理解している必要がありました。
表の横のセルを結合するには、"colspan"を使う。 表の縦のセルを結合するには、"rowspan"を使う。
[問題] 次のように打ち込んだ場合、どのように表示されるでしょう?
[答え]

自分でtableタグを使って表を作ってみる

これらを理解した後は、自分で"tableタグ サンプル"と画像検索をして出てきた表を、tableタグで書き出してみるという練習法で学習していきました。 その後、父がブログでもHTMLのタグの種類についての記事を書いていたので、より詳しく学無ことができました。 tableタグについてもこちらで確認できます! Webエンジニア学習日記 HTML編 #02 「HTMLタグの種類」

後書き

こうして学んだことを書き出してみると、より深く理解できるので良い勉強になるなあと感じました。 改めてアウトプットしてみると、まだまだ理解しきれてなかったところにも気がつけますね。 学習頑張ります!

コメント

このブログの人気の投稿

[クレンジングと洗顔方法] 美肌になりたい!

謎解きの魅力

免許証の裏面で意思表示してみた