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

HTML初心者向けに、「テーブル(表)」を表示する方法を解説した記事です。テーブルはtableタグを使った表示します。応用として、「thead」「tbody」「tfoot」を使って表の構造をまとめる方法も紹介。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

 

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

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

 

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

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

 

テーブル(表とは)

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

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

 

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

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

 

・<table>〜</table>

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

・<tr>〜</tr> table record

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

・<td>〜</td> table data

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

・<th>〜</th> table theme

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

 

例を見てみましょう。

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

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

<table border="1">
  <tr>
    <th>日本語</th>
    <th>英語</th>
  </tr>
  <tr>
    <td>東京</td>
    <td>Tokyo</td>
  </tr>
  <tr>
    <td>大阪</td>
    <td>Osaka</td>
  </tr>
</table>

 

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

tabletag

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

田島悠介

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

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

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

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

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

 

・<thead>〜</thead>  table head

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

・<tbody>〜</tbody>  table body

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

・<tfoot>〜</tfoot>  table foot

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

・colspan

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

 

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

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

<td colspan="3">ようこそ日本へ!</td>

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

tabletag2

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

 

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

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

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

また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

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