【HTML基礎学習12】表を作成しよう!




こんにちは、かつコーチです。

僕は現在、プログラミングを学習していて、その学習の中で理解したことを、

リアルタイムで発信しています。

今回は、表を作成する方法をご紹介します。

表の基本

プログラミングでは、表のことをテーブルと言ったりするので、

以下、テーブルとします。

表はそのままですが、作成するには様々な要素が必要なので、

実際に例を出してご紹介した方が分かりやすいと思います。

例えば、今、以下のようなテーブルがあったとします。

これをタグで示すと以下のようになります。

ここで、これらをまとめてみます。

使用するタグ一覧

要素 タグ 概要
table <table></table> テーブル全体を表す
thead <thead></thead> table headerの略で、テーブルの見出しを表す
tbody <tbody></tbody> table bodyの略で、テーブルの本体を表す
tfoot <tfoot></tfoot> table footerの略で、テーブルの末尾を表す
tr <tr></tr> table rowの略で、それぞれの行を表す
th <th></th> table header cellの略で、見出しとなるセルを表す
td <td></td> table data cellの略で、本体のセルを表す

たくさんの要素(タグ)が出て来ますが、これらを使ってテーブルを作成します。

初めて見たときは、「こんなに覚えるのかよ。」って焦る(笑)。

テーブルを作成する

これらを実際にコードで書いてみましょう。

  <table border="1">
      <thead>
        <tr><th>項目</th><td>金額</td></tr>
      </thead>
      <tbody>
        <tr><th>牛乳</th><td>200円</td></tr>
        <tr><th>パン</th><td>200円</td></tr>
        <tr><th>お米</th><td>2000円</td></tr>
        <tr><th>野菜</th><td>600円</td></tr>
      </tbody>
      <tfoot>
        <tr><th>合計金額</th><td>3000円</td></tr>
      </tfoot>

これをブラウザ上で確認すると以下のようになります。

尚、ここではtableに対して、CSSであるborder=”1″を指定しています。

HTMLだけで表示すると、囲う線がなくてわかりにくくなる為です。

borderに関しては、別途CSSで紹介します。

こんな感じで、テーブルは前に示した要素で実現することができます。

全ての要素を一気に使う必要はなく、必要に応じて、必要なものだけを使用すれば良いです。

まとめ

以上、今回は表の作成についてご紹介しました。

表の作成では、たくさんの要素を覚える必要がありますが、

作成しながら徐々に慣れていければと思います。

他にもセルを結合する方法もあるのですが、またの機会にご紹介します。

僕自身がまだ使いこなせていないのもある(笑)。

プログラミング学習において参考になれば幸いです。

学習の参考になるサイト

今やプログラミングの学習はネットで学ぶことができます。

僕もここから始めています。

ネット上にはたくさんの学習サイトがありますが、おすすめとしては、

この2つが圧倒的にわかりやすく、どちらも無料で学べるので、超便利です!

無料範囲から始めて、もっと気になったり、もっと勉強したいと思ったら、

有料プランへ変更すれば良いと思います。

有料プランはどちらも月額980円(税込)です。

まだ、プログラミングをやったことがない人も、いきなり書籍から入って失敗するよりは、

こちらからやってみることをおすすめします。

初心者へおすすめの入門書籍(※2019年8月13日追記)

ある程度、動画で学んだら、もっとしっかり学びたくなるもの。

そう思ったら、書籍を利用してもっと理解を深めるのも良いでしょう。

僕のおすすめの書籍は、以下の2冊めちゃくちゃわかりやすいです。

1冊目は、知識ゼロから体系的に学べる本で、最近のWebサイトの作り方も学べて、

最後には1つのサイトを構築するまで網羅しています。

難しい内容がなく、3日くらいで一気に読んでしまいました。

勿論、コードを打ちながらですが、楽しくてすぐに終わりました(笑)。

2冊目は、こちらもとても丁寧に書かれてあり、どちらかというと文法的に学べます。

勿論、知識なくとも十分に学べますが、やはり楽しいという感覚が大切だと思うので、

動画などで勉強した後に、もっと詳しく勉強する際には、この本がおすすめです。

こちらも最後には1つのサイトを作成するまでを学べます。

スクールを検討してみよう(※2019年9月13日追記)

  • 独学でやっていると、結局やらなくなってしまいそうで不安。
  • もっと効率よく早く学びたい。

と心配になる方もいるかもしれません。

そんな方は、一度スクールを検討してみることをお勧めします。

スクールでの学習なら、挫折が怖いという方もサポートを受けることが出来るので安心です。

自分の目標やゴールを、プロが一緒に設定してくれ、今後のキャリアの話もできます。

とはいえ、いきなりスクールに通うのもかなり不安ですし、それは絶対おすすめしません。

スクールに通うとなると高いお金を払うことになるので、

まずは「無料体験レッスン」を受けてみることをおすすめします。

たくさんあるスクールの中で僕がおすすめするのは、僕も通っている侍エンジニア塾です。

僕は、効率よくより早く学びたかったので、通うことに決めたのですが、

侍エンジニア塾を選んだ理由としては、圧倒的なコンサルタント力です。

実際に、僕も悩んだことがありますが、対応が早く、不安や心配にしっかり耳を傾けて、

解決へと導いてくれます。

講師だけでなく、周りのスタッフもサポートしてくれる点は大きいです。

「とりあえず話をしてみたいかも…」と思った方は、

無料体験レッスンを受けてみてはいかがでしょうか?