1. TOP
  2. html&CSS入門
  3. HTMLとCSSでテーブルを使いこなそう!tableタグの使い方まとめ

HTMLとCSSでテーブルを使いこなそう!tableタグの使い方まとめ

テーブルはいたるとこで使われています。例えばアマゾンのタブレット販売ページでは下記にようなテーブルが使われています。

Image

参考:https://www.amazon.co.jp/dp/B01J90PKEM/ref=sd_allcat_k_aust

他にも、いろんなサイトの中で料金表だったり、データを比較する際の表としてだったりと、多くの場所で使われているのを目にします。

サイト構築にあたって、テーブルが必要になることは必ず出てくるので、テーブルの使い方はマスターしておきましょう。

行と列とセル

テーブルとは日本語でいうと表のことで、エクセルのようなデータをイメージしてもらえるとわかりやすいと思います。

エクセルなどの表計算ソフトを触ったことがある人であればわかると思いますが、テーブルには行(Row)と列(Column)、そしてセルがあります。

  • 行は横一列のまとまりのことで、Row(ロウ)と呼ばれることもあります
  • 列は縦一列のまとまるのことで、Column(カラム)と呼ばれることもあります
  • セルは、1つ1つのマス目のことを指します

行やロウ、列やカラム、セルといったキーワードは、テーブルを語る上で重要なキーワードになるので覚えておきましょう。

tableを使ってみよう

簡単なテーブルを見てみましょう。

 <table border="1">
   <tr>
     <th>食べ物の名前</th><th>カロリー</th>
   </tr>
   <tr>
     <td>ピザ</td><td>700kcal</td>
   </tr>
   <tr>
     <td>ラーメン</td><td>650kcal</td>
   </tr>
 </table>
食べ物の名前カロリー
ピザ700kcal
ラーメン650kcal

シンプルなテーブルが表示されました。例にあるようにhtmlでテーブルを作るときには、4つのタグを組み合わせて作ります。

テーブルに使われるタグ

  • tableタグ
    テーブル全体を囲うタグです。
  • trタグ
    trはテーブルの行を表します。「Table Row(行)」の略です。
  • thタグ
    thはテーブルの見出しを表します。「Table Header(見出し)」の略です。
  • tdタグ
    tdはテーブルの1つのデータ(セル)を表します。「Table Data(データ)」の略です。

簡単な覚え方

複雑に見えるかもしれませんが、tableは慣れるとシンプルです。一度書いてみるとわかると思いますので、ぜひ解説の通りに実践してみてください。

まず、tableタグの中に行(tr)を必要な数並べます。

<table border="1">
    <tr></tr>
    <tr></tr>
</table>

次に、行(tr)の中に、データを書いていきます。このとき見出しの場合はth、そうでない場合はtdを書くようにしていきます。

<table border="1">
    <tr><th>見出し1</th><th>見出し2</th></tr>
    <tr><td>データ1</td><td>データ2</td></tr>
</table>

以上でシンプルなテーブルの完成です。テーブルが大きくなっても基本的には、今やったことを繰り返すだけなので特段難しいことはありませんね。

行や列は増やし放題

簡単な例は2行2列のテーブルでしたが、必要に応じて行も列も増やすことが出来ます。

行を増やす場合

trを増やすと行を増やすことが出来ます。

 <table border="1">
    <tr><th>見出し1</th><th>見出し2</th></tr>
    <tr><td>データ1</td><td>データ2</td></tr>
    <tr><td>増やしたデータ1</td><td>増やしたデータ2</td></tr>
 </table>
見出し1見出し2
データ1データ2
増やしたデータ1増やしたデータ2

列を増やす場合

th,もしくはtdを追加

 <table border="1">
   <tr><th>見出し1</th><th>見出し2</th><th>増やした見出し</th></tr>
    <tr><td>データ1</td><td>データ2</td><td>増やしたデータ1</td></tr>
    <tr><td>データ3</td><td>データ4</td><td>増やしたデータ2</td></tr>
 </table>
 
見出し1見出し2増やした見出し
データ1データ2増やしたデータ1
データ3データ4増やしたデータ2
列を増やすとき場合は、すべての行(tr)で、列(tdもしくはth)の数が一致するようにしましょう。例えば、1行だけ列の数が少なかったりすると表示が崩れてしまいます。

border=”1”は基本使わない

今までの例ではtableに属性border="1"を指定しています。

borderは枠線を表示するための属性です。borderには0か1を指定できますが、初期値が0で「非表示」になり枠線が表示されません。

borderの種類

  • border=”1″
    枠線を表示
  • border=”0″
    初期値。枠線を表示しない

今回は簡単に枠線を表示するために、border="1"に設定していますが、本来であればスタイルはcssで設定するべきです。

枠線の有無もcssで設定するのが理想的なので、実践ではborder=”1″は使わずcssで枠線をつけるのが良いでしょう。cssでの枠線の付け方は後述します。

thタグ(見出し)はなくても問題ない

thタグ(見出し)は、必要がなければなくても構いません。例えば、下記のような書き方もOKです。

  <table border="1">
     <tr><th>見出し1</th><td>データ1</td><td>データ2</td></tr>
     <tr><th>見出し2</th><td>データ3</td><td>データ4</td></tr>
  </table>
見出し1データ1データ2
見出し2データ3データ4

テーブルのタイトルをつける

captionを使えば、テーブルタイトルをつけることが出来ます。

 <table border="1">
    <caption>実験用のテーブル</caption>
    <tr><th>見出し1</th><td>データ1</td><td>データ2</td></tr>
    <tr><th>見出し2</th><td>データ3</td><td>データ4</td></tr>
 </table>
実験用のテーブル
見出し1データ1データ2
見出し2データ3データ4

テーブルの上に説明文が表示されましたね。captionがあると、何についてのテーブルかがわかりやすくなります。

captiontableタグの直後に一回だけしか記述で来ないので注意しましょう。

セルは結合できる

テーブルはエクセルと同じように、セル同士を結合することが出来ます。

縦方向のセルを結合する

縦方向のセルを結合する場合は、rowspanを使います。

<td rowspan="2">

rowspanには結合するセルの数を書きます。簡単な例を見てみましょう。何の変哲もない下記のようなテーブルがあるとします。

  <table border="1">
    <tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr>
    <tr><td>データ1</td><td>データ2</td><td>データ3</td></tr>
    <tr><td>データ4</td><td>データ5</td><td>データ6</td></tr>
  </table>
見出し1見出し2見出し3
データ1データ2データ3
データ4データ5データ6

このテーブルのデータ2とデータ5を結合したい場合は下記のように書きます。

 <table border="1">
   <tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr>
   <tr><td>データ1</td><td rowspan="2">データ2</td><td>データ3</td></tr>
   <tr><td>データ4</td><td>データ6</td></tr>
 </table>
見出し1見出し2見出し3
データ1データ2データ3
データ4データ6

データ2が下のセルと結合して大きくなっていますね。このように簡単に結合することができます。

注意点としては、もとのデータ5をhtml上から削除している点です。データ5を削除しないと、セルがはみ出し、テーブルが崩れてしまうので注意しましょう。

横方向のセルの結合

横方向のセルを結合するにはcolspanを使います。

<td colspan="2">

使い方はrowspanと同様、結合するセルの数を指定します。例えば、上記の例のデータ2とデータ3を結合する場合は下記のように書きます。

  <table border="1">
    <tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr>
    <tr><td>データ1</td><td colspan="2">データ2</></tr>
    <tr><td>データ4</td><td>データ5</td><td>データ6</td></tr>
  </table>
  
見出し1見出し2見出し3
データ1データ2
データ4データ5データ6

データ2が右のセルと結合して大きくなっていますね。

注意点としては、もとのデータ3を削除している点です。データ3を削除しないと、セルがはみ出し、テーブルが崩れてしまうので注意しましょう。

tableをcssで装飾してみよう

表に線を引く

上でも説明したとおり、テーブルの枠線のスタイルは、あり・なしも含めてCSSで設定するのが理想です。

cssで線を引くにはborderを使います。

 <table id="demo_72">
    <tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr>
    <tr><td>データ1</td><td>データ2</td><td>データ3</td></tr>
    <tr><td>データ4</td><td>データ5</td><td>データ6</td></tr>
  </table>
 #demo_72 th,
 #demo_72 td{
    border: 1px solid #4169e1;
  }
  
  #demo_72{
     border-collapse:  collapse; 
  }
見出し1見出し2見出し3
データ1データ2データ3
データ4データ5データ6

まず、thとtdに境界線を指定しています。tableに境界線をしても、外側だけにしか引かれないので、セルに境界線を指定する必要があるためです。

さらに、以下の指定を行なっております。

border-collapse: collapse;

border-collapseはセルのボーダーを重ねて表示するか間隔をあけて表示するかを指定するものです。

ボーダーの重なりの設定

  • collapse
    隣接するセルのボーダーを重ねて表示
  • separate
    隣接するセルのボーダーを間隔をあけて表示

初期値がseparateになっているため、この設定を書かないと、セルのボーダーが全て表示されてしまいます。

  <table id="demo_72-2">
    <tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr>
    <tr><td>データ1</td><td>データ2</td><td>データ3</td></tr>
    <tr><td>データ4</td><td>データ5</td><td>データ6</td></tr>
  </table>
 #demo_72-2 th,
 #demo_72-2 td{
    border: 1px solid #4169e1;
  }
  
  #demo_72-2{
     border-collapse:  separate; 
  }
見出し1見出し2見出し3
データ1データ2データ3
データ4データ5データ6

1本線にしたい場合はcollapseに設定するようにしましょう。

テーブルの幅を整える

テーブルは横幅を設定することができます。

テーブル全体の幅はtableに対して横幅を設定します。セルの横幅に関してはthtdに対して横幅を設定します。

セルの横幅は、pxで指定することもできますが、で指定した方がテーブルの幅が変わったときでも、割合を保つことができるので使い勝手が良いです。

 <table id="demo_73">
   <tr><th>見出し1</th><td>データ1</td></tr>
   <tr><th>見出し2</th><td>データ2</td></tr>
   <tr><th>見出し3</th><td>データ3</td></tr>
 </table>
  #demo_73{
    width: 500px;
    border-collapse:  collapse; 
  }
  #demo_73 th{
    width: 20%;
    border: 1px solid #4169e1;
  }
  #demo_73 td{
    width: 80%;
    border: 1px solid #4169e1;
  }
見出し1データ1
見出し2データ2
見出し3データ3

テーブルは500pxでそのうちも20%が見出し、80%がデータになります。

テーブルの幅を1000pxにしても、20%と80%の比率は保たれるので、大きくレイアウトが崩れることもありません。

テーブルを整えよう

テーブルを整えるには、余白の設定や、ボーダー、背景色などをつかう事になります。

それぞれ別記事で解説しているので、詳細については省きますが、特に変わったことをするわけではないので、問題なく使えると思います。

簡単にテーブルを整えてみたのが下記になります。

  <table id="demo_74">
    <tr><th>見出し1</th><td>データ1</td></tr>
    <tr><th>見出し2</th><td>データ2</td></tr>
    <tr><th>見出し3</th><td>データ3</td></tr>
  </table>
  #demo_74{
    width: 500px;
    border-collapse:  collapse; 
  }
  #demo_74 th{
    width: 20%;
    border: 1px solid tan;
    background-color: wheat;
    padding: 10px;
  }
  #demo_74 td{
    width: 80%;
    border: 1px solid tan;
    padding: 10px;
  }
見出し1データ1
見出し2データ2
見出し3データ3

ポイントとしては、余白と見出しの色の変更です。

見出しは背景色をつけるとより特別感が出ますし、テーブルのセルにはパディングで余白を取ると、余裕があってみやすくなります。

簡単ですが、これくらい装飾するだけで、一気に読みやすくかつ洗練されたイメージにすることができます。

まとめ

  • テーブルはいろんなサイトの中で料金表だったり、データを比較する際の表としてだったりと、多くの場所で使われている
  • テーブルには行(Row)と列(Column)、そしてセルがある
  • 行や列は増やし放題
  • thタグ(見出し)はなくても問題ない