記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

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

「表(table)の基礎知識」「表(table)の作成方法」「表(table)のカスタマイズ方法」の3点を中心に初心者のかた向けに解説。 基礎知識・使用方法・カスタマイズ方法をサンプルコード付きで詳しく解説。
実際に手を動かして学ぶことができますので、初心者の方も安心して読み進める事ができます。

カテゴリ: HTML/CSS

こんにちは!
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サンプルコード

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

見出しを縦に並べる

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

HTMLサンプルコード

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

表の装飾を変える

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

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

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

サンプルコード表示結果

CSSサンプルコード 

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

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

サンプルコード表示結果

CSSサンプルコード 

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

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

サンプルコード表示結果

CSSサンプルコード 

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

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

サンプルコード表示結果

CSSサンプルコード 

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

○枠線に色をつける

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

CSSサンプルコード 

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

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

サンプルコード表示結果

CSSサンプルコード 

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

HTMLサンプルコード 

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

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

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

○セルの余白を作成する

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

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

HTMLサンプルコード

CSSサンプルコード

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

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

HTMLサンプルコード

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

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

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

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

HTMLサンプルコード

CSSサンプルコード

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

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

HTMLサンプルコード

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

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

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

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

HTMLサンプルコード

CSSサンプルコード 

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

    

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

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

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

セルを結合させる方法

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

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

HTMLサンプルコード

   

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

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

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

                   

HTMLサンプルコード

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

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

○captionタグ

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

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

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

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

HTMLサンプルコード

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

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

○aタグを入れる方法

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

HTMLサンプルコード

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

○imgタグを入れる方法

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

HTMLサンプルコード

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

まとめ

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

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

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

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

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

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

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。