tableタグの使い方＋応用テクニックを解説！

2021 2/13

2020.03.12 2021.02.13

今回はHTMLでテーブル（表）を作成できるtableタグをご紹介したいと思います！

テーブルの基本的な作り方から、CSSを使用した見た目の変更方法まで解説してきます。

tableタグとは？

ExcelやNumbers、Googleスプレッドシートといった表計算できるものを思い浮かべてみてください。そういった表を作成できるのがtableタグです。

tableタグの基本的な仕組み

HTMLでtableを使用する際には、４つのタグを使用して作成します！

table	表全体を囲うタグ。
tr	行（横一列）のタグ。
th	見出し部分。その列が何のデータかを書く。
td	データ。各項目をここに書く。

tableタグの書き方：基本編

tableタグの基本的な仕組みはお分かりいただけたでしょうか？ここからはtableタグの書き方について解説して行きます。

かもめ

HTMLとCSSのファイル作成について、基礎知識がある前提で解説していきます。少し不安な方は、下の記事から勉強してみてください！

実際にtableタグを書いてみよう！

では、ここからは手順に沿ってtableタグを書いて行きましょう！

STEP

table：全体を囲う

まずは全体を囲うtableタグを書きましょう。

<table>

</table>

STEP

tr：行を作る

次に、表の行を表すtrタグを書いていきます。１行分のスペースが確保されるようなイメージです。

<table>
  <tr></tr>
</table>

tableに必要な行数分、trタグを書きます。今回は見出しも合わせて４行必要なので、trを４つ書きます。

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

STEP

th：見出し（項目名）

見出し（項目名）をthタグへ書きます。

<table>
  <tr>
    <th>名前</th> <th>種類</th> <th>必殺技</th>
  </tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

見出しはあってもなくても、どちらでもOKです。必要なときのみ書きましょう！

STEP

td：データ

最後に、各データをtdタグへ書きます。

<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>

縦列の数を揃えないとデザインが崩れてしまうので、注意しましょう！

STEP

完成！

これでテーブルは完成です！実際に書いてみると、こういうテーブルになります。

名前	種類	必殺技
アンパンマン	粒あんパン	アンパンチ
カレーパンマン	カレーパン	カレービュー
しょくぱんまん	食パン	しょくパンチ

タグの中にタグが入っている入れ子構造なので最初のうちは分かりづらいかと思いますので、書きながら覚えて行きましょう！

tableタグの書き方：応用編

基本的なtableタグの書き方は分かりましたか？それでは、ここからは応用編のスタートです。

行・列を増やしたい

tableタグの行（横）や列（縦）は、好きなだけ増やすことができます！

行を追加：trを追加で書く
列を追加：tdを追加で書く

もちろん、tableタグを作ったあとで

迷える子羊

やっぱり見出しがあったほうが分かりやすいなあ……

と思ったときは、thを後から追加すれば、見出しを付け足すことだってできちゃいます！

ワンポイントアドバイス

行や列を増やすときに注意しなければいけないことは、セルの数を揃えることです。

例えば、左のテーブルの、データの数を数えてみましょう。

３つ
３つ
３つ
２つ

一番下の行だけ、データの数が他の行と違いますよね。
このように数が違う場合、tableタグの表示は崩れてしまいます。

trやtd、thを使って行や列を増やす時は注意しましょう！

th（見出し）を縦に並べたい

先ほどの例では見出しを横に並べましたが、実は見出しを縦に並べてもOKなんです！

名前	アンパンマン	カレーパンマン
種類	粒あんパン	カレーパン
声優	戸田恵子	柳沢三千代

<table>
  <tr>
    <th>名前</th><td>アンパンマン</td><td>カレーパンマン</td>
  </tr>
  <tr>
    <th>種類</th><td>粒あんパン</td><td>カレーパン</td>
  </tr>
  <tr>
    <th>声優</th><td>戸田恵子</td><td>柳沢三千代</td>
  </tr>
</table>

tr（行）の中にth（見出し）とtd（データ）が混在していますね。

このように、thとtdを同じtrに入れることで、見出しが縦に並んだtableが作成可能です！

tableタグの内容によって見やすさが変わってくるので、その時々で適切な並びにしてみましょう。

セルを結合させたい

ExcelやNumbers、Googleスプレッドシートなどでは、セルを結合して繋げることができますよね、それと同じようにHTMLのtableタグもセル同士を結合することができます。

セル結合：縦

縦のセルを結合する場合は、td（またはth）のタグにrowspan=”数”という属性を追加します。

今回の例では「ジャムおじさん」を３セル分繋げるのでrowspan="3"です。

<table>

  <tr>
    <th>名前</th> <th>種類</th> <th>製作者</th>
  </tr>

  <tr>
    <td>アンパンマン</td> <td>粒あんパン</td> <td rowspan="3">ジャムおじさん</td>
  </tr>
  
  <tr>
    <td>カレーパンマン</td> <td>カレーパン</td> <!-- <td>は書きません -->
  </tr>

  <tr>
    <td>メロンパンナ</td> <td>メロンパン</td> <!-- <td>は書きません -->
  </tr>

</table>

名前	種類	製作者
アンパンマン	粒あんパン	ジャムおじさん
カレーパンマン	カレーパン
メロンパンナ	メロンパン

上記コードのtd（ジャムおじさん）を見ると、rowspan="3"と書かれていますよね。

このrowspanで指定された数分のセルが縦方向に結合されています。

さらに、３行目と４行目の最後のtdは書かれていませんよね。このように、rowspanで結合するセルは空白にしなければいけません。

セル結合：横

横方向へセルを繋げたい場合は、td（またはth）に対してcolspan=”数”という属性を追加します。

rowspanと同じように、記入した数の分だけセルが横に結合されます。

<table>

  <tr>
    <th>名前</th> <th colspan="2">必殺技</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>

名前	必殺技
アンパンマン	アンパンチ	アンキック
カレーパンマン	カレーパンチ	カレービュー
しょくぱんまん	しょくパンチ	しょくキック