表で見やすくしたい！HTMLでテーブルを表示する方法【初心者向け】
HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。
今回は、HTMLでテーブルを表示する方法について、初心者にも分かりやすく2人のキャラクターを用いて教え合いながら解説しています。
こちらの内容はTechAcademyのWebデザインオンラインブートキャンプでも扱っています。
そもそも、HTMLの記述方法がわからない場合は、先に HTMLの書き方 の記事をご覧ください。
テーブル（表とは）
まずはテーブル（表）の基礎を知っておきましょう。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>
ブラウザで確認するとこのように表示されました。
テーブルが表示され、<th>タグで囲った部分が太字になりました。<tr>タグは横一列のデータを「行」としてまとめ、その行をつくる値が<td>で表示されます。
すごいー！tdとかthとか覚えるの大変そうですけど、ちゃんと表になってますね！
thタグは、太字にするためだから最初は全部tdタグだけで表を作る練習をしても良いかもね！
少しずつ覚えていきますねっ！
じゃあ、次は応用編を説明していくよ！ちゃんとついてきてね！
応用編：テーブルの構造をまとめる
テーブルは<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>タグをつかって表をまとめると、以下のようになります。
見た目の上では、<thead>も<tbody>も<tfoot>もブラウザに反映されることはありませんが、表が大きく複雑になるにつれ、表の構造をしっかりまとめておくと後に編集しやすくなります。表を構造化する要素として覚えておきましょう。
今回はHTMLでテーブルを表示する方法についてご紹介しました。
さらにHTMLの基礎を学びたい場合は、HTMLでiframeを使う方法も合わせてご覧ください。
これ今横の3つ列を1つに繋げましたけど、縦も繋げられるんですかー？
もちろん！縦はtdタグを編集するんだけど、「<td rowspan=”2″>東京</td>」と書けば、縦2列分が東京と表示できるんだよ！
意外とテーブルって便利ですね！
他にも枠線のデザインを変えたり、色をつけたりできるからまた分からないことがあったら聞いてね♪
はいっ！ありがとうございます！
[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。
