ガジェット通信 GetNews

見たことのないものを見に行こう
「ジャスティス・リーグ」特集サイト

表で見やすくしたい!HTMLでテーブルを表示する方法【初心者向け】

DATE:
  • ガジェット通信 GetNewsを≫

HTMLについて今さら聞けない!という初心者のために、HTMLの基礎を紹介する記事です。

今回は、HTMLでテーブルを表示する方法について、初心者にも分かりやすく2人のキャラクターを用いて教え合いながら解説しています。

 

こちらの内容はTechAcademyのWebデザインオンラインブートキャンプでも扱っています。

そもそも、HTMLの記述方法がわからない場合は、先に HTMLの書き方 の記事をご覧ください。

 

なお、今回の記事の内容は動画でもご覧いただけます。(2つに分かれています)

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

今回の登場人物

 

20163020-2田島悠介(29)

元エンジニアで、現在は田島アプリスクールのメンター。人の成長を見るのが一番のやりがいになっている。
好きな映画は『トスカーナの休日』

 

20160620

大石ゆかり(24)

若いからという理由で、アパレル会社のIT部門に。業務で必要なためメンターの田島悠介にプログラミングやデザインを教わっている。
Instagramには3つの写真加工アプリで編集してからアップするという。

 

 

テーブル(表とは)

まずはテーブル(表)の基礎を知っておきましょう。HTMLでも表をつくることができます。表はテーブルと呼ばれます。

横一列のデータのことを「行(レコード)」といい、ひとつのデータの塊を意味します。縦一列のデータを「列(カラム)」、ひとつひとつのマスのことを「セル」と呼び、セルの中に各データの値を入れていきます。「行(レコード)・列(カラム)・セル」は、Excelやデータベースでデータを管理するSQLでも共通している概念ですのでぜひ覚えておきましょう。

 

HTMLでテーブルを表示するために使うタグ

HTMLでは以下のタグを使ってテーブルを表示します。

 

・〜

表(テーブル)をつくるタグです。

・〜 table record

表でつくられる横一列のデータ(行)をまとめます。

・〜 table data

セルの要素であり、表の値(データ)を意味します。

・〜 table theme

セルの要素であり、表の見出しを意味します。

 

例を見てみましょう。

タグに「border=”1″」を加えると枠が表示されます。

タグのなかにタグで各データの行を指定し、そのなかにタグでデータを入力します。タグではデータの見出しをつけましょう。

日本語
英語

東京
Tokyo

大阪
Osaka

 

ブラウザで確認するとこのように表示されました。

tabletag

テーブルが表示され、タグで囲った部分が太字になりました。タグは横一列のデータを「行」としてまとめ、その行をつくる値がで表示されます。

 

 

20160620

 

すごいー!tdとかthとか覚えるの大変そうですけど、ちゃんと表になってますね!

 

20163020-2

 

thタグは、太字にするためだから最初は全部tdタグだけで表を作る練習をしても良いかもね!

 

20160620

 

少しずつ覚えていきますねっ!

 

20163020-2

 

じゃあ、次は応用編を説明していくよ!ちゃんとついてきてね!

 

 

応用編:テーブルの構造をまとめる

テーブルはのタグを使って表の構造をまとめることができます。

それぞれのタグは下記の意味です。

 

・〜  table head

(タグ内で)テーブルのヘッダ部分を意味します。

・〜  table body

テーブルのボディ部分を意味します。

・〜  table foot

テーブルのフッタ部分を意味します。

・colspan

セルを連結させます。「colspan=”n”」で「n個のセルを連結する」という意味になります。

 

先ほど作成した表にタグとタグを使って、「名物」という列(カラム)と一言コメントが入った行(レコード)を追加してみましょう。

ここではひとつのセルにコメントが収まりきらないので、 colspanをつかってセルを連結させます。「colspan=”3″」で3つのセルをひとつにまとめるという意味になります。

ようこそ日本へ!

タグをつかって表をまとめると、以下のようになります。

tabletag2

見た目の上では、もももブラウザに反映されることはありませんが、表が大きく複雑になるにつれ、表の構造をしっかりまとめておくと後に編集しやすくなります。表を構造化する要素として覚えておきましょう。

 

今回はHTMLでテーブルを表示する方法についてご紹介しました。

さらにHTMLの基礎を学びたい場合は、HTMLでiframeを使う方法も合わせてご覧ください。

 

20160620

 

これ今横の3つ列を1つに繋げましたけど、縦も繋げられるんですかー?

 

20163020-2

 

もちろん!縦はtdタグを編集するんだけど、「東京」と書けば、縦2列分が東京と表示できるんだよ!

 

20160620

 

意外とテーブルって便利ですね!

 

20163020-2

 

他にも枠線のデザインを変えたり、色をつけたりできるからまた分からないことがあったら聞いてね♪

 

20160620

 

はいっ!ありがとうございます!

 

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。

カテゴリー : デジタル・IT タグ :
TechAcademyマガジンの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。