HTML 表(table)の作成＋カスタマイズ方法（サンプルコード付き）

こんにちは！
HTMLで表を作りたいけど「どの様に作ったら良いのかわからない・・」 「作ってみたものの、思うように作れない・・」 「カスタマイズしたいけど、どの様にカスタマイズして良いのかわからない・・」

HTMLで表を作成するのは簡単です、しかし「wordと同じ」と考えて作成する事でより難しく考えてしまうWEB制作初心者のかたも多いのではないでしょうか？

今回は、そんなWEB制作初心者のかた向けに、HTMLでの表の基本的な作り方・各属性の意味・カスタマイズの仕方をサンプルコード付きで、具体的にわかりやすく解説していきます。

HTML表(テーブル)とは

HTMLの表（テーブル）とは下記の様なものです。

一度は見たことがあるのではないでしょうか？
表は＜table＞タグを使用することから、テーブルと呼ばれる事が多いです。
それでは、テーブルの基本的な書き方を解説していきます。

テーブルの基本的な書き方

tableの基本は、4つのタグから構成されています。

1.tableタグ：tableタグで表全体をはさみます。

2.trタグ: table rowの略。表の行、横の一列を表します。

3.thタグ:table headerの略。見出しのセル、この行がなんのデータなのかを書きます。

4.tdタグ:table dataの略。データ（表の中身となるセル）です。この項目にデータを記入します。

4点のタグを使用し、テーブルを作成していきます。

○テーブルの書き方基本

サンプルコード表示結果

HTMLサンプルコード

　
　
　
　   
　
　
　   
　

    
食べ物
乗り物
色
ラーメン
車
赤
カレーライス
バイク
青

※解説
●tableタグ：表を作成するため、＜table＞〜＜/table＞で全体を囲みます、囲んだ範囲
　がテーブルとなります。
●trタグ：表の行、横の一列を表します。今回の例では、「食べ物、乗り物、色」で一行、
　「ラーメン、車、赤」で一行、「カレーライス、バイク、青」で一行と　なり、
　各行をtrタグで囲みます。
●thタグ：見出しの項目を表します。今回の例では、「食べ物、乗り物、色」がthタグにあたります。

●tdタグ:各項目のデータになります。今回の例では、「ラーメン、車、赤」と
　「カレーライス、バイク、青」がtdタグにあたります。

以上が、基本的なテーブルの書き方になります。
ここからは、応用編！
カスタマイズ方法を解説していきます。

テーブルをカスタマイズ

テーブルに線をつけるborder属性

4つのタグを使用した基本のテーブルでは、表に枠と罫線がありません。 boder属性を使用し、表に枠と罫線を指定します。 サンプルコード表示結果

HTMLサンプルコード

　
　
　
　  
　
　
　  
　

   
食べ物
乗り物
色
ラーメン
車
赤
カレーライス
バイク
青

※解説
●border属性は表の枠や罫線をつけるための属性です。
●border属性に「＝”1”」を指定し、表に枠と罫線の幅を指定しています。
「1」以上の整数を指定し、表に枠と罫線の幅を指定することができます。

行・列の増やし方

行列を増やすために、＜tr＞、＜td＞、＜th＞タグを必要な数増やしていきます。

例）5✕5のテーブルを作成する場合
サンプルコード表示結果

HTMLサンプルコード

  

    
食べ物
乗り物
色
月
曜日
  
  

    
ラーメン
車
赤
1月
月曜日
  
  

    
カレーライス
バイク
青
2月
火曜日
  
  

    
チャーハン
飛行機
赤
3月
水曜日
  
  

    
うどん
船
青
4月
木曜日
  
  

    
そば
電車
赤
5月
金曜日
  

※解説
　●横の行数を増やす：trタグを追加
　●縦の列を増やす（見出し）：thタグを追加
　●縦の列を増やす（データ項目）:tdタグを追加
　　どの項目を追加するのかを決め、必要数に応じて記載していきます。

見出しを縦に並べる

見出しを縦に並べる事もできます。
下記のような状態です。

HTMLサンプルコード

<table border="1">
    <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>

※解説
＜th＞＜td＞の位置をかえる事で見出しを縦に並べる事が簡単にできます。

表の装飾を変える

表の装飾をCSSで変更します。
表の装飾では、下記のHTMLサンプルコードを共通使用します、CSSだけ各項目に合わせて変えて下さい。

【表の装飾】HTML共通サンプルコード

<table border="1">
    <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>

○テーブル全体の文字色を変える

サンプルコード表示結果

CSSサンプルコード　

table {
        color: red;
          }

※解説
　CSSでtableにcolorを指定することで、テーブル全体の文字色を変えることができます。

○見出し、データそれぞれの文字色を変える

サンプルコード表示結果

CSSサンプルコード　

table th {
         color: red;
            }
 
         table td {
          color: blue;
         }

※解説
th（見出し）に対してcolor redを指定、td（データ）に対してcolor blueを指定する事で、th、tdそれぞれの色を変えることができます。

○テーブル全体の背景色を変える

サンプルコード表示結果

CSSサンプルコード　

table {
        background-color: red;
           }

※解説
CSSでtableにbackground-colorを指定することで、背景色を変えることができています。

○見出し、データそれぞれの背景色を変える

サンプルコード表示結果

CSSサンプルコード　

table th {
    background-color: red;
    }
 
      table td { 
 background-color: blue;
    }
 

※解説
th（見出し）に対してbackground-color redを指定、td（データ）に対してbackground-color blueを指定する事で、th、tdそれぞれの背景色を変えることができています。

○枠線に色をつける

枠線に色をつける方法は2種類あります。
1.方法①CSSのboderプロパティを変更する。 サンプルコード表示結果

CSSサンプルコード　

table {
border: solid 1px red;
 }

※解説
tableのborderプロパティを変更しています。
solid：線の種類
1px：太さを指定
red：色を指定しています。

table th, table tdそれぞれに指定することもできます。

サンプルコード表示結果

CSSサンプルコード　

table th{
    border: solid 1px red;
    }
    
    table td{
    border: solid 1px blue;
    }

2.方法②bordercolor属性を指定する。 サンプルコード表示結果

HTMLサンプルコード　

  

    
食べ物
乗り物
  
  

    
ラーメン
車
  
  

    
カレーライス
バイク
  
  

    
チャーハン
飛行機
  
  

    
うどん
船
  
  

    
そば
電車
  

※解説
bodrercolor属性に「red」を指定いている事で枠に赤色を指定する事ができています。色の指定は、色名か、16進法で値を記載します。
例）＜table border color=”red”＞＜table bordercolor=”#ff0000”＞

また注意点として、bodrercolor属性での枠色の指定は、テーブル全体での変更のみとなっており、th、td個別の色の変更ができません。

セルのレイアウトを整える

○セルの余白を作成する

そもそもテーブルのセルは、デフォルトでは余白がありません。
余白をつくる方法は２つあります。

方法1.cssでpaddingを指定する方法 サンプルコード表示結果

HTMLサンプルコード

<table border="1">
    <tr>
      <th>食べ物</th><td>乗り物</th>
    </tr>
    <tr>
      <th>ラーメン</td><td>車</td>
    </tr>
  </table>

CSSサンプルコード

table th{
 padding: 20px 30px;
}
table td {
  padding: 20px 30px;
}

※解説
[th],[td]にCSSでpaddingを指定することにより、余白をつくりだすことができます。

方法2.cellpadding属性を指定する方法 サンプルコード表示結果

HTMLサンプルコード

  

    
食べ物
乗り物
  
  

    
ラーメン
車
  

※解説
cellpadding属性を指定を指定し余白を調整します。
今回はcellpadding=”20”で指定をしましたが、1以上の整数を入れお好みの余白を調整することができます。

○セルの文字を「中央寄せ」に指定する方法

2種類の方法があります。

1.CSSで指定する方法 サンプルコード表示結果

HTMLサンプルコード

<table border="1" bordercolor="red" >
    <tr>
      <th>食べ物</th><th>乗り物</th>
    </tr>
    <tr>
      <td>ラーメン</td><td>車</td>
    </tr>
    <tr>
      <td>カレーライス</td><td>バイク</td>
    </tr>
    <tr>
      <td>チャーハン</td><td>飛行機</td>
    </tr>
  </table>

CSSサンプルコード

table {
text-align: center;
}

※解説
セルの文字は、デフォルトでは左寄せになています。
tableにtext-aligin: center;を指定する事で、文字を中央寄せにすることができます。
tr,th,tdごとにも指定することができます。

2.aligin属性を指定する方法 サンプルコード表示結果

HTMLサンプルコード

<table border="1" bordercolor="red" >
    <tr align="center">
      <th>食べ物</th><th>乗り物</th>
    </tr>
    <tr align="center">
      <td>ラーメン</td><td>車</td>
    </tr>
    <tr align="center">
      <td>カレーライス</td><td>バイク</td>
    </tr>
    <tr align="center">
      <td>チャーハン</td><td>飛行機</td>
    </tr>
  </table>

※解説
aligin属性、aligin=”center”を指定し中央寄せにすることができます。
th,td単位での指定も可能です。

○テーブル全体もしくは、セルのみの幅を変える方法

幅、高さを変える方法は２種類あります。

方法1.cssで指定する方法 サンプコード表示結果

HTMLサンプルコード

<table border="1">
    <tr>
      <th>食べ物</th><td>ラーメン</td>
    </tr>
    <tr>
      <th>乗り物</th><td>車</td>
    </tr>
  </table>

CSSサンプルコード　

table{
    width: 500px;
    text-align: center;
  }
  
  th{
    width: 30%;
  }
  
  td{
    width: 70%;
  }

※表示写真
※解説
table要素にwidth500px
th要素にwidth30%
td要素にwidth70%
各要素にCSSでwidthを指定することで、幅を変更するができます。

　　　　

方法2.width属性で変更する方法

親要素の長さに対して、width属性を指定します。 サンプルコード表結果

<table border="1" width="500px" style="text-align: center;">
    <tr>
      <th width="30%">食べ物</th><td width="70%">ラーメン</td>
    </tr>
    <tr>
      <th width="30%">乗り物</th><td width="70%">車</td>
    </tr>
  </table>

※解説
親要素となるtableの長さをpxで指定します。
今回は親要素のtableの長さを500pxと指定し、子要素となるthにwidth=”30%”、tdにwidth=”70%”を指定し、テーブル、セルの幅をカスタマイズしました。

セルを結合させる方法

○縦方向にセルを結合させる。

rowspanタグを使用します。 サンプルコード表示結果

HTMLサンプルコード

  

    
科目
A君
B君
C君
  
  

    
数学
70点
80点
90点
  
  

    
国語
75点
95点
  
  

    
英語
75点
70点
100点
  

　　　

※解説
縦方向に複数並ぶセルをつなげたいときは、rowspanタグを指定します。
結合したいセルの数を指定し、つなげたいセルの欄を空白にすることでセルをつなげることができます。
今回の例では、「rowspan=”2”」と記載することで、2つ縦方向にセルをつなげる指定をし、つなげたいセル（80点の下のtd）は空白することで、2つのセルをつなげることができます。

○横方向にセルをつなげる

colspanタグを使用します。 サンプルコード表示結果

　　　　　　　　　　　　　　　　　　　

HTMLサンプルコード

  

    
科目
A君
B君
C君
  
  

    
数学
70点
80点

  
  

    
国語
75点
65点
95点
  
  

    
英語
75点
70点
100点
  

※解説
横方向に複数並ぶセルをつなげたいときは、colspanタグを指定します。
結合したいセルの数を指定し、つなげたいセルの欄を空白にすることで、セルをつなげることができます。
今回の例では、「colspan=”2”」と記載することで、2つ横方向にセルをつなげる指定をし、つなげたいセル（C君の下のtd）は空白することで、2つのセルをつなげることができます。

テーブルの概要を記載し、誰が見てもわかりやすくする。

○captionタグ

captionタグをテーブルに記載し、なんのテーブルであるかを誰がみてもわかりやすくします。 captionタグはweb画面に表示されません。 HTMLサンプルコード

  
テストの点数
  

    
科目
A君
B君
C君
  
  

    
数学
70点
80点
70点
  
  

    
国語
75点
65点
95点
  
  

    
英語
75点
70点
100点
  

※解説
captionタグに＜caption＞テストの点数＜/caption＞と記載しました。
誰がコードをみても、このテーブルは「テストの点数のテーブルだ！」ということが一目瞭然です。
省略することもできますが、誰が見てもわかりやすくするために、記載しておくと親切でしょう。

テーブルの構造をわかりやすくする

○thead（ヘッダー）・tbody（ボディ）・tfoot（フッター） 　を記載し、誰が見ても表をわかりやすい構造にします。
サンプルコード表示結果

HTMLサンプルコード

  

    

      
科目
      
点数
    
  
  

    

      
国語
      
10
    
    

      
数学
      
8
    
  
  

  

    
合計
    
18
  
  

解説
thead（ヘッダー）・tbody（ボディ）・tfoot（フッター）はブラウザに表示されることはありませんが、表の構造をわかりやすくすることができます。
今回の例ですと、テーブルのヘッダー（見出しの入る行）にtheadを記載し「科目」、「点数」がヘッダーだとわかりやすくします。
テーブルのボディ（メインの情報が入る行）にtbodyを記載し「国語」「10」「数学」「8」がボディだとわかりやすくします。
テーブルのフッター（補足情報などを入れる行）にtfootを記載し「合計」「18」がテーブルのフッターだとわかりやすくします。
省略することもできますが、他の人がみた時にわかりやすくする為、記載したほうがより親切でしょう。

テーブル内にaタグ・imgタグをいれる方法

○aタグを入れる方法

tdにはaタグを入れることができます。
aタグについて詳しく知りたい方は、下記を参考にしてみて下さい。
http://www.htmq.com/html/a.shtml サンプルコード表示結果

HTMLサンプルコード

<table border="1">

    <tr>
      <th>お店</th><td>スターバックス<td>コメダ珈琲</td>
    </tr>
  
    <tr>
      <th>場所</th><td>東京</td><td>名古屋</td>
    </tr>
  
    <tr>
      <th>ホームページURL</th><td><a href="https://www.starbucks.co.jp/">https://www.starbucks.co.jp/</a></td><td><a href="http://www.komeda.co.jp/">http://www.komeda.co.jp/</a></td>
    </tr>
  
  </table>

※解説 tdタグの中にaタグを入れることで、テーブル内のセルに簡単にaタグを挿入することができています。

○imgタグを入れる方法

tdタグ内にimgタグを挿入し、セル内に写真を表示することができます。
imgタグについて詳しく知りたい方は下記を参考にしてみて下さい。
http://www.htmq.com/html/img.shtml サンプルコード表示結果

HTMLサンプルコード

<table border="1">                                                                                       

    <tr>
      <th>お店</th><td>カフェA</td><td>カフェB</td>
    </tr>
  
    <tr>
      <th>場所</th> <td>東京</td> <td>名古屋</td>
    </tr>
  
    <tr>
      <th>店舗外観</th><td><img src="https://3.bp.blogspot.com/-nXH3RSnJnl4/Uku9bM6m3vI/AAAAAAAAYiY/fJeMyoTNauk/s400/tatemono_cafe.png"></td><td><img src="https://2.bp.blogspot.com/-DNc9wr1o8cg/VYJcO00Ew5I/AAAAAAAAuVM/_fdB_3CenCY/s500/building_internet_cafe.png"></td>
    </tr>
  
  </table>

※解説
tdタグの中にimgタグを入れることで、テーブル内のセルに写真を表示することができます。

まとめ

テーブルの基本構造は、4つのタグから構成されており、下記の構図です。

1.tableタグ：tableタグで表全体をはさむ

2.trタグ: table rowの略。表の行、横の一列を表す

3.thタグ:table headerの略。見出しのセル、この行がなんのデータなのかを記述する

4.tdタグ:table dataの略。データ（表の中身となるセル）です。この項目にデータを記入する

一口にtableといっても奥が深く、カスタマイズ方法も数多くあり、難しく感じてしまうかもしれません。
しかし、基本構造さえ理解すれば、基本に対してカスタマイズしたい箇所を追加していくだけですので、簡単にカスタマイズすることができます、ぜひ参考にしてみて下さい。

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。

WordPressでバックアップをとる方法【タイミング/用途別で解説】

バックアップの必要性とWordPressでバックアップをおこなうやり方を紹介します。

【最短】WordPress（ワードプレス）で問合せフォームを設置する方法

お問い合わせフォームをWordPressで簡単に設定する方法やカスタマイズする方法を解説します。

【WordPressの基礎・始め方】半日でゼロからブログを立ち上げる方法

今までサイトを開設した事がない人でも簡単にできる、WordPressを活用したブログの立ち上げ方を紹介します。

<a href="https://digitor.jp/textbook/html-table-customize/">HTML 表(table)の作成＋カスタマイズ方法（サンプルコード付き）</a>