メモ

メモを入力してみよう!


Lesson 05「表を作ってみよう!」

学習概要

tableタグ、trタグ、tdタグを使って表を作ってみましょう!

補足

プログラムを書くにはMacでは「テキストエディター」と呼ばれるものやWindowsでは「メモ帳」がありますが、さらに高機能なエディターとして今後紹介してく「Atom」や「Brackets」というものがあります。
さらに高機能で実際の実務でもよく使われるものは「Eclipse」と「InteliJ」という「IDE(あいでぃーいー)」という「統合開発環境ソフト」です。
統合開発環境ソフトは「Atom」など高機能なエディターのさらに高機能なものになります。要は「プロ用」ということですね。

「Eclipse」は無料で利用できますが、有料の「InteliJ」の方が高機能なためじわじわとシェアを奪われていっています。
WEB系の現場であればInteliJかAtomを使っているエンジニアが多いです。
そのあたりは好き好きだったり、現場で指定されている場合もあります。
(WEB系であれば「好きなのでいいよ」という現場がほとんどですが)

ただし、HTMLやこれからやっていくCSSという言語を扱って何行にも渡るコードを書いていくと「打ち間違い」がとても多くなっていきます。
metaタグがmataタグと打っているなどスペルミスや、/といった閉じタグを2度つけていたり、タグの間にいらない文字(この例だと「/(スラッシュ)」が入っていたり。
CSSで使うことになる「{}(波カッコ)」がちゃんと両方ついていなかったり、「;(セミコロン)」を行の終わりにつけ忘れていたり。

こういった「打ち間違い」によって「表示がおかしい」「うまく動かない」ということが初心者のうちは多発します。
何度見ても「練習のコードと合っているのに。。」と思うんですが、実際に講師がみたらすぐ誤りに気づきます。しかし、初心者のうちはなかなか気づかずに何時間も悩んでしまいます。

悩むという時間も実はとても大切ですし、実務で必要になる「コードの誤りをパッと見つける目を養う」という意味でもある程度悩んでもらいたいところですが、あまり悩みすぎてモチベーションが下がってしまっても元も子もありません。

そこで、実際の現場でも使われている「Linter(リンター)」というものをオススメします。
IDEには最初から入っていて、Atomには拡張機能としてインストールすることができます。

Linterはプログラミング言語の打ち間違いや構文間違いをチェックしてくれるものです。
HTMLをチェックするもの、CSSをチェックするもの、JavaScriptをチェックするものなど言語ごとに分かれていて「CSS」なら「CSSLinter」といったものがあります。
IDEは網羅している言語全てのチェックができますが、Atomではそれぞれインストールする必要があります。
インストールや使い方は少し難易度が上がりますが、出来る方は下記URLなど参考にインストールしておくと今後の開発がとてもやりやすくなります。

ATOM:https://eng-entrance.com/atom-editor
Linter:http://creating-homepage.com/archives/2304

この練習でわからない所を質問する※部活外の質問はできません

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson 05「表を作ってみよう!」 の内容※SEO用のため読めません

まずはフォルダを作成しましょう。新しいフォルダを作成したら一番最初に作ったHTMLファイルを中へコピーします。コピーしたファイルを開くとこのようなホームページが表示されるはずです。ではコピーしたファイルを編集していきましょう。

bodyタグの中にこちらのコードを書いてみてください。書き終わったら保存をして先ほど編集したファイルを開いてみましょう。

表のついたホームページが表示されれば完了です。
ではこれからコードの解説をしていきたいと思います。

表を作るには、tableタグというものを使っていきます。tableタグには [ border ] という属性を使って枠線をつけることが出来ます。今回は [ border="1" ] なんですけどこれを"2"、"3"にすると枠線がどんどん太くなっていくような形になります。
tableタグの中には trと書かれたタグで囲まれているものがあります。trタグっていうんですけどもこれは行を指定します。なのでtrタグで囲んだものが1行ですよ、という形になります。今回は2つあるので2行表示しますよということになります。画面を実際に見てみるとエコノミーコースとスタンダードコースが2行出来上がっているような形になります。


先ほどのtrタグの中を見てみるとtdタグが2つあります。このtdタグを使うことで列を作ることが出来ます。今回2つあるので2列作ってるという形ですね。
実際に画面を見てみるときちんと、[エコノミーコース]と[200円]というtdタグで囲まれたものが表示されています。
もう1行のほうも同じようにtdタグで囲まれたスタンダードコースと呼ばれるものが表示されてもう一つの列、800円というものが画面に表示されているという形になります。
ここでもう一つ表を作ってみたいと思います。先ほどの表の下に作っちゃいますけれども、同じようにtableタグで囲まれたものがこちらです。
先ほどと若干内容が違いまして表示してみると先ほどの表の下に、新しく表ができてるかと思います。これが新しく作った、tableタグで書いた表になります。こっちの表はtrタグが4つあります。なので4行の構成になっている表だということですね。
1行目は同じくtdタグで囲まれたものが2つあるので2列になっていて[エコノミーコース]と[200円]という形ですね。
2行目が違ってきます。同じtrタグで囲まれているんですけどもtdタグっていうのが一つだけになってます。そのtdタグの中に[ colspan ]と書かれたcolspan属性というものがついています。[ colspan="2" ]となっているんですけども何かというと、横に2列繋げますよ、というのを指定できるものになってます。画面を見てみると横に2列繋がっていてその中に文字が表示されています。
今度は3行目のtrタグを見ていただきたいんですけども、同じtrで囲まれているんですがこちらもtdというのが2つあります。なので、1行の中に2列ありますよ、と指定しているんですけども、その2つめのtdこの中にrowspan属性というものを指定しています。今回は[ rowspan="2" ]なので、下に2行繋げます、というものを指定しています。下のtrタグみてもらうとtdタグが1つだけになってます。
実際に画面を見てもらうと3行目スタンダードコースとあってその横の列、下の行と繋がって文字が表示されています。下の行はtdタグ1つなので1列分スペシャルコースというのがあってそれが画面に表示されています。
こういったものを使っていろんな形の表を作ることができるんですね。

はい、いかがだったでしょうか。tableタグを使うことでいろんな表が作れるということですね。