【HTML】tableタグの使い方の解説と覚えておきたい便利なテクニック（結合）のご紹介！

HTMLで表を表示させる為には、tableタグを使います。

tableタグは、組み合わせて使わなければならないタグがあり、最初はとっつきにくいですが、覚えてしまえば簡単です。

今回の記事では、このtableタグの使い方の解説をしていきます。また、tableタグを使う上で覚えておきたい便利なテクニック（結合）も併せてご紹介します。

1 tableタグの使い方
2 覚えておきたい便利なテクニック（結合）
- 2.1 横方向に結合したい時に使う、colspan属性
- 2.2 縦方向に結合したい時に使う、rowspan属性
3 まとめ

tableタグの使い方

tableタグは、HTMLで表を作る際に使用するタグで、使うと下記のような表を作成できます。

商品名	価格
ラーメン	900円
チャーハン	1,050円

tableタグは、前述の通り、組み合わせて使わなければならないタグがあります。それが、trタグ、thタグ、tdタグです。

使い方のイメージを持っていただく為に、下記サンプルコードをご覧ください。

<table>
 <tr>
  <th>商品名</th>
  <th>価格</th>
 </tr>
 <tr>
  <td>ラーメン</td>
  <td>900円</td>
 </tr>
 <tr>
  <td>チャーハン</td>
  <td>1,050円</td>
 </tr>
</table>

まず、tableタグは、サンプルコードのように、表全体を囲む形で使用します。

ここまでは、簡単ですね。問題は、その中身ですよね。

お悩みさん

なんか、ごちゃごちゃしてる・・

初めはこう思うのも無理もありませんが、慣れてきますのでご安心ください。後述しますが、trタグ、thタグ、tdタグは、何の英語の略なのかを知るとイメージがしやすいです！

表の１行を囲む、trタグ

trタグは、「table row（表の行）」の略で表の行を囲む際に使用します。

表の見出しを表す、thタグ

thタグは、「table header（表のヘッダー）」の略で、表の見出しとなる部分で使用するタグです。

当然、中には表の見出しが必要ない表もありますが、その際、thタグを使う必要はありません。

表のデータを表す、tdタグ

tdタグは、「table data（表のデータ）」を表す部分で使用するタグです。

サンプルコード再確認

では、trタグ、thタグ、tdタグそれぞれの意味を理解していただいた上で、もう一度サンプルコードを見てみてください。

<table>
 <tr>
  <th>商品名</th>
  <th>価格</th>
 </tr>
 <tr>
  <td>ラーメン</td>
  <td>900円</td>
 </tr>
 <tr>
  <td>チャーハン</td>
  <td>1,050円</td>
 </tr>
</table>

なんとなく、イメージは掴めましたか？

初めに、tableタグで全体を囲む。

<table>

</table>

次に、表のヘッダー部分である、「商品名」「価格」の部分を作成します。表の１行を囲む、trタグの中に、表の見出しを表す、tdタグを使って書きます。

<table>
 <tr>
  <th>商品名</th>
  <th>価格</th>
 </tr>
</table>

次に、表の２行目、３行目を作成します。表の１行を囲む、trタグの中に、今度は表のデータを表す、tdタグを使用して書きます。

<table>
 <tr>
  <th>商品名</th>
  <th>価格</th>
 </tr>
 <tr>
  <td>ラーメン</td>
  <td>900円</td>
 </tr>
 <tr>
  <td>チャーハン</td>
  <td>1,050円</td>
 </tr>
</table>

これで完成です！

お助け猫

各行を、「trタグ」で囲む必要があるので、慣れていないとごちゃついて見えます・・。でも慣れるのでご安心を！

覚えておきたい便利なテクニック（結合）

表を作る際、覚えておきたいテクニックとして、結合があります。

下記画像のように、表の隣を結合したいシーンはよくあります。

HTMLで表を結合する場合は、属性を使います。結合したい方向（横か縦）により、使う属性が異なります。順番に見ていきましょう。

横方向に結合したい時に使う、colspan属性

横方向に結合したい時には、colspan属性を使用します。

thタグまたはtdタグにcolspan属性を追加することで結合できます。colspan属性の値には、結合するセルの数を指定します。

下記のサンプルは、ヘッダーの部分３行を結合した場合の例です。

<table>
 <tr>
   <th colspan="3">メニュー</th>
    <!-- 結合するのでいらない -->
    <!-- 結合するのでいらない -->
 </tr>
 <tr>
   <td>ラーメン</td>
   <td>チャーハン</td>
   <td>餃子</td>
 </tr>
</table>

メニュー
ラーメン	チャーハン	餃子

こんな感じで、横方向に結合されます。

なお、コメントアウトしてありますが、結合して１つになっているので、書く行は1つです。

縦方向に結合したい時に使う、rowspan属性

縦方向に結合したい時には、rowspan属性を使用します。

<table>
 <tr>
   <th>店</th>
   <th>住所</th>
   <th>営業時間</th>
 </tr>
 <tr>
  <td>〇〇店</td>
  <td>〇〇町1-2-3</td>
  <td rowspan="2">10:00-21:00</td>
 </tr>
 <tr>
  <td>〇〇店</td>
  <td>〇〇町45</td>
  <!-- 結合するのでいらない -->
 </tr>
</table>