[教えてエンジニア父ちゃん！]　何からやればいいの？②「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タグの種類」

後書き

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

コメント

コメントを投稿

このブログの人気の投稿

映画『ミステリという勿れ』を観て気づいた自分の癖の話

イメージ
『ミステリという勿れ』の映画版、観てきました。 原作の漫画も、実写化されたドラマでも、久能整が話す言葉が優しくて芯があって心に沁みます。 映画でも心が温かくなる名言が盛り沢山でした。 改めて言葉って薬なんだなあと感じたのと同時に、言葉を大切に使う人になりたいなと思いました。 映画終盤のシーンがかなり印象に残り、自分に対しての気づきもあったので書いておきたいと思います。 （一部ネタバレとなる箇所があります） 印象に残ったシーンと言葉 事件が解決し、大学生の久能整（くのう　ととのう）は女子高校生の狩集汐路（かりあつまり　しおじ）に話しかける。 「汐路さんは、お母さんと一緒にカウンセリングへ行ってみるのもいいかもしれません。」 それに対して狩集汐路は、「大丈夫だよ。わたしどこも悪くないよ！」と答えた。 そんな彼女に、久能整は汐路の目をまっすぐに見てこう伝えた。 「アメリカでは、刑事が犯人を傷つける、傷つけられることがあった場合、カウンセリングを受けさせられます。 カウンセラーからちゃんと許可が出るまでは、その人は働けません。 それは人の弱さをわかっているから。 人は強くない。弱いんだ。 だから弱ったら、壊れたら、ちゃんと治すんです。 弱さを認めているから、それを治そうとする。 でも日本では、心が弱いことを悪いとされている。 もっと強くなれと、そんな小さなことで悩むなと、そんなんじゃダメだ、と。 どこまでいっても根性論。 汐路さんは、否定疑問文で話すことが多い。 『行ってくれない？』 『こうしない？』 そう言って、行動は傍若無人なのに、本当は怯えている。 きっと、セメントに沢山の跡があるんですね。 でもあなたはまだ子どもだから、まだセメントは柔らかいから、固まる前に空いた穴を少しは塞ぐことができるかもしれない。」 （中略） 久能整は皆に見送られながら新幹線に乗った。 新幹線の席に着くと、後ろの人に「すみません。席マックスまで倒させてください。」と声をかけた。 そして相手が返事をすると、席を倒して目を閉じた。 私の口癖と性格 最後の席を倒してもいいか確認するシーンで、自分の口癖について気づいたことがありました。 「させてください」とお願いする形は、自分の意思も相手の都合や気持ちも、両方を大事にしているからこ...
続きを読む

お台場『東京ラーメン国技館　舞』へ行ってきました！

イメージ
先日、従兄弟が東京に来ていたので、弟と従兄弟と一緒にお台場へ行ってきました。 到着したのがお昼時だったので、まずはご飯を食べようということで、 『東京ラーメン国技館　舞』 へ行くことに。 ということで東京テレポート駅で下車したあと、お腹を鳴らしながらアクアシティ5階へ向かいました。 美味しいラーメン屋さんがいっぱい 全国から名店が集まっている『東京ラーメン国技館　舞』。 ここでは本店では食べられない”お台場限定メニューのラーメン”も食べられます。 食べられる場所は各店内かテラス席 奥まで行くとテラス席がありました。 潮風が強いので、紙ナプキンなどが飛びやすく、強風の日にここで麺をすするのは少し大変かもと感じました。 でも寒い日にここであったかいラーメンを食べたら、それはそれで幸せを感じられそうです。 天候によっては検討した方がいいかもしれませんが、景色はとても良かったし、この日は晴れていて暖かかったので気持ちよく過ごせました。 グループや家族連れできている場合には、ここで色んなラーメンをシェアしながら食べられるのもいいなと感じました。 また、店舗によってはテラス席の利用が曜日によって限られていたので、確認してから利用することをおすすめします。 券売機でそれぞれの店で購入する 各店前に券売機があり、そこで半券を購入するという仕組みになっていました。 支払い方法が各店舗によって異なっており、”suica使えます””クレジットご利用の方は店内で承ります”などと張り紙をしてある店もあれば、ID支払いに関してなにも記載がされていない店もありました。 「現金持ってないからIDで支払えるところがいいな〜」という方は、一通りの店舗の支払い方法を見てから食べるラーメンを決めた方が良さそうです。 混雑状況と席の仕組み 平日だったのでとても空いましたが、週末や祝日は混んでいる可能性が高いです。 そして通路が狭くなっているので、混んでいる際にはラーメンのメニュー詳細や値段などの券売機に書いてある情報が読めないかもしれません。 事前にHPにて確認し、ラーメン情報を仕入れておくとスムーズにいけるかもしれません。 『東京ラーメン国技館　舞』のHPはこちら 今回食べたラーメンはこちら 悩みに悩んだ末、お店は『塩らーめん専門...
続きを読む

『台場一丁目商店街』へ行ってきました！

イメージ
お台場へ遊びに行った日記の続きです。 前回のお台場日記、 『らーめん国技館　舞』へ行ったブログはこちら ラーメンを食べてお腹が満たされた後は、台場一丁目商店街へ遊びに行ってきました。 台場一丁目商店街 アクセス 日本の古き良き文化が盛り沢山な台場一丁目商店街。 場所はデックスビーチ東京の4階。 お台場ジョイポリスの一つ上の階にあり、エスカレーターをあがるとすぐにあります。 入場料などはないので、ふらっと立ち寄るだけでも楽しめます。 駄菓子屋さん 駄菓子屋さんは中と入り口に2店舗あり、どちらもレトロな雰囲気で懐かしの駄菓子がずらっと並んでいます。 ゲームセンター 入り口左側にはレトロなゲームセンターがあり、昔ながらのゲームを楽しめます。 大好きなテトリスがあったので、弟と対戦しました。 横には他のゲーム機もずらりと並んでいます。 年中お祭り気分が楽しめる 射的ができるお店がありました。 射的の銃がかっこいいです。 おやつが取れて大満足です。 他にも金魚すくいやくじ引きのお店、型抜きができるお店があり、お祭り気分を味わうことができます。 お化け屋敷へ 本格的な作りで怖いと噂されている台場怪奇学校へ入ることに。 私も従兄弟も弟も苦手だけど怖いもの見たさで入ることに。 実際に入った感想としては、小学生から大人まで楽しめるお化け屋敷だと感じました。 怖さのレベルや内容は……実際に入ってみることをおすすめいたします。 4つのコースが選べるので、コースを変えたらまた違った楽しみ方ができると思います。 怖さレベルが店の前に書いてありました。 ちなみに平日だったので15分待ちだったのですが、祝日にこの前を通りかかった時はずらっと長い行列ができていました。 料金は一回800円です。 あとがき 台場一丁目商店街は中を歩いてるだけでも楽しめるスポットです。 お祭りに来たような高揚感があり、とても楽しかったです。 お台場へ行った際にはぜひ立ち寄ってみてください。
続きを読む