【HTML】5分で学ぶテーブル（表）の作成方法

HTMLでtableタグを用いてテーブル（表）を作成する方法を解説していきます。HTMLを勉強したての人にとっては、表を作成するためのタグがたくさん出てくるため、少し難しく感じてしまいがちです。

ですが、実はこのページで解説する４つのポイントを押さえれば誰でも簡単にテーブルを作成することができます。

このページでは・・・

HTMLでテーブル（表）を作成する方法
<table>タグ・<tr>タグ・<th>タグ・<td>タグの使い方
テーブルのレイアウトを整える方法
テーブルのデザインを変更する方法

について解説しています。HTMLを勉強中の方であれば知っておくと得をする便利な知識ばかりですので、是非最後までご覧ください。

HTMLでテーブル（表）を作成する方法
HTMLでテーブルをデザインする
HTMLを１から学びたい方は・・・

HTMLでテーブル（表）を作成する方法

テーブルを作成するためには、４つのタグを理解する必要があります。

tableタグ・・・テーブル全体の定義
trタグ・・・テーブルの行を定義
thタグ・・・テーブルの見出しを定義
tdタグ・・・テーブルのデータ（セルの値）を定義

イメージ図

１つずつ順を追って解説していきます。

<table>タグの使い方

<table>タグは、テーブル（表）を作成するタグです。

イメージとして「ここにテーブル（表）を作成しますよ！」という宣言をするだけの役割を担っていると考えてOKです。実際は<table>タグの中に<tr>タグや<th>タグを入れ子構造にしてテーブル（表を）定義していくことになります。

<table>
<!-- ここに行数や見出しなどを定義していく -->
</table>

<tr>タグの使い方

<tr>タグは、テーブルの行数を指定するタグです。<tr>タグを設置した分だけ、行数が増えていくことになります。上記の例で言えば、<tr>タグは4つ設置していることになります。必要に応じて、何個でも設置することが可能です。

ちなみに、trとは「Table Row」の略です。Rowとは、行という意味を持つため迷ったときは略す前の名称を思い出すと良いでしょう。

<tr>タグは、<table>タグの中にネストして利用します。

<table>
  <tr>
<!-- ここに表の値などを定義していく -->
  </tr>
  <tr>
<!-- ここに表の値などを定義していく -->
  </tr>
</table>

<th>タグの使い方

<th>タグは、テーブルの見出しやタイトルを定義します。

<th>タグは「Table Header」の略であり、<tr>タグの中にネストして利用します。また、見出し・タイトルを定義するタグであるため、テキストは「太字」かつ「中央寄せ」で表示されることになります。

<table>
  <tr>
    <th>国</th>
    <th>通貨</th>
    <th>言語</th>
  </tr>
  <tr>
<!-- ここに表の値を定義していく -->
  </tr>
</table>

<td>タグの使い方

tdタグは「Table Data」の略で、テーブルセルの内容を定義します。<tr>タグの中にネストして利用します。

<table>
  <tr>
    <th>国</th>
    <th>通貨</th>
    <th>言語</th>
  </tr>
  <tr>
    <td>日本</td>
    <td>円</td>
    <td>言語</td>
  </tr>
  <tr>
    <td>アメリカ</td>
    <td>＄</td>
    <td>英語</td>
  </tr>
  <tr>
    <td>イギリス</td>
    <td>￡</td>
    <td>英語</td>
  </tr>
</table>

こちらのコードを実行した結果がこちらです。これを基本として、枠線や背景色などをデザインしていくことになります。

いずれにせよ、これでHTMLを使ってテーブル（表）を定義する方法はこれがすべてです。ここから、テーブルをよりかっこよく/見やすくデザインしていきます。

HTMLでテーブルをデザインする

ここからは、HTMLでデザインをする方法を解説していきます。枠線もなく、背景色もないようなテーブルを実際にWebページに載せることは絶対にないため、ここからの内容も合わせて覚えておくことが重要です。

この章で解説する内容

テーブルに罫線（枠）を付ける方法
枠線の色を変える方法
テーブルの背景色を指定する方法

テーブルに罫線をつける方法（border）

テーブルに罫線を付けたい場合は、<table>タグの border属性を１以上の整数を指定します。

border属性　⇒　１以上の整数を指定

<table border="1">
<!-- 省略 -->
</table>

ブラウザで表示した結果がこちら

border属性が1以上の整数であれば罫線がつき、0であれば罫線が消えます。数字を大きくしていけばしていくほど、枠の太さが太くなっていきます。

試しに、「border="100"」としてみましょう。

ものすごい大きな枠が出来上がりました。何度も言いますが、border属性ではテーブルの枠線の太さを定義しています。

Q.「タグの属性とは？」

枠線の色を変える（bordercolor）

枠線の色を変える場合は、 bordercolor属性を用います。

bordercolor="色コード"

罫線・枠線がないといくらbordercolor属性を用いたところで何の色も見えませんので基本的には、border属性 / bordercolor属性はセットで用います。

<table border="1" bordercolor="#006eff">
<!-- 省略 -->
</table>

ブラウザで表示した結果

青色の枠線を作ることができました。

背景色を変更する方法（bgcolor）

テーブル（表）の背景色を変更したい場合は「bgcolor属性」を利用します。

bgcolor="色コード"

<table border="1" bordercolor="#006eff" bgcolor="#f8fc00">
<!-- 省略 -->
</table>

ブラウザで表示した結果

サンプルでは、<table>タグの属性を変えたため、テーブル全体の背景が変化しました。例えば、これを<tr>タグで記載した場合は、対象の行のみ背景色が変更されます。

テーブル全体の背景色を変更　⇒　tableタグのbgcolor属性
行全体の背景色を変更　　　　⇒　trタグのbgcolor属性
対象のセルの背景色を変更　　⇒　td/thタグのbgcolor属性

<table border="1" bordercolor="#006eff">
  <tr bgcolor="#f8fc00">
    <th>国</th>
    <th>通貨</th>
    <th>言語</th>
  </tr>
  <tr>
    <td>日本</td>
    <td>円</td>
    <td>言語</td>
  </tr>
  <tr>
    <td bgcolor="#f8fc00">アメリカ</td>
    <td>＄</td>
    <td>英語</td>
  </tr>
  <tr>
    <td>イギリス</td>
    <td>￡</td>
    <td>英語</td>
  </tr>
</table>