【HTML table】表を作成する基本からレイアウトの方法までを解説

HTMLで表を作成してみたい
tableタグの基本的な使い方を理解したい
思い通りのレイアウトで表を作成したい

HTMLを使用していると、表を作成する機会はよくあると思います。しかし指定できることが多すぎて、使い方についていまいちよくわかっていない方も多いのではないでしょうか?

こんにちは。HTML、CSSが得意な侍エンジニア塾ブログ編集部のシホです!HTMLで表を作成するときにタグの使い方や、表のレイアウトの方法に悩むことはありませんか?

今回は表を作成する際に使うタグの基本的な使い方から、テーブルの装飾、セルのレイアウト、文字のレイアウトについて説明します。

読み終わるころには思い通りの表が作れるようになっているでしょう。ぜひHTMLで表の使い方をマスターしましょう!

HTMLのtableタグの基本

まずは表作成の基本から説明します。次の表を作成するとしましょう。

作成したい表のイメージ
このような表は、tr、th、tdの要素を組み合わせることで作ることができます。それぞれの要素の役割は次の図のようになります。

tr,th,tdの説明

要素を<>で囲んだものがタグと呼ばれます。要素名は3つとも似ていてとても紛らわしいので、何の略かを理解すると覚えやすいです。

tr要素

trは「Table Row(行)」の略です。表の行を1つ作成します。

th要素

thは「Table Header(見出し)」の略です。表の見出しとなるセルを1つ作成します。

td要素

tdは「Table Data(データ)」に略です。表のデータとなるセルを1つ作成します。

先ほどの作りたいイメージの表をコードで書くとこうなります。

<!DOCTYPE html>
<html>
<head>
<title>基本的な表の作成</title>
</head>
<body>
 <table border="1">
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
    <tr>
      <td>田中</td>
      <td>27</td>
    </tr>
    <tr>
      <td>佐藤</td>
      <td>42</td>
    </tr>
  </table>
</body>
</html>

※7行目の

<table border="1">

については後ほど説明します。

ブラウザ表示
表示結果

基本中の基本のタグしか使っていないのでとてもシンプルな表が出来上がります。

テーブルの装飾

枠と罫線をつけるborder属性

表に枠と罫線をつける場合は、border属性を指定します。

<table border="1以上の整数">

先ほどの7行目に

<table border="1">

というコードがありましたね。

borderとは、表の枠や罫線をつけるための属性で、border属性といわれます。「="1"」の部分には枠の幅を指定します。

ここに指定できる数字は1以上の整数となっているので気をつけましょう。ちなみに、要素と属性の違いは、以下のようになります。

  • 要素→見出しや段落などの部品
  • 属性→要素に情報を付加するもの

つまりtableという要素にborder属性を使って枠の幅という情報を付加しているということになります。ということは、borderを指定しない場合、枠はどうなると思いますか?

borderを指定しない場合のサンプルコード

<!DOCTYPE html>
<html>
<head>
<title>borderを指定しない場合</title>
</head>
<body>
 <table>
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
    <tr>
      <td>田中</td>
      <td>27</td>
    </tr>
    <tr>
      <td>佐藤</td>
      <td>42</td>
    </tr>
  </table>
</body>
</html>

ブラウザ表示
borderを指定しなかった場合
このように、枠なしの表ができてしまいます。表を作るときは、border属性を指定し忘れないように気をつけましょう!

では次に、枠の幅を太くしてみましょう。border属性に"5"を指定してみます。

<!DOCTYPE html>
<html>
<head>
<title>枠の幅を太くする</title>
</head>
<body>
 <table border="5">
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
    <tr>
      <td>田中</td>
      <td>27</td>
    </tr>
    <tr>
      <td>佐藤</td>
      <td>42</td>
    </tr>
  </table>
</body>
</html>

ブラウザ表示
枠を太くする表示結果

枠線に色をつけるbordercolor属性

枠に色をつける場合は、bordercolor属性を指定します。

<table border="1以上の整数" bordercolor="色">

「色」の部分には、「色名」か「16進数」で値を記述しましょう。

例)表の枠を赤にする場合

<table bordercolor="red">
<table bordercolor="#ff0000">

 

表の枠を赤にする場合のサンプルコード

<!DOCTYPE html>
<html>
<head>
<title>表の枠を赤にする</title>
</head>
<body>
 <table border="5" bordercolor="red">
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
    <tr>
      <td>田中</td>
      <td>27</td>
    </tr>
    <tr>
      <td>佐藤</td>
      <td>42</td>
    </tr>
  </table>
</body>
</html>

ブラウザ表示

表の枠を赤くする

表の背景に色をつけるbgcolor属性

テーブルの背景に色をつける場合は、bgcolor属性を指定します。bgは「Back Ground(背景)」の略です。

表全体に色をつける

表全体に色をつけるので、table要素にbgcolor属性で色を指定しましょう。

<table border="1以上の整数" bgcolor="色">

 

表全体の背景を黄色にする場合のサンプルコード

<!DOCTYPE html>
<html>
<head>
<title>表全体の背景を黄色にする</title>
</head>
<body>
 <table border="1" bgcolor="yellow">
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
    <tr>
      <td>田中</td>
      <td>27</td>
    </tr>
    <tr>
      <td>佐藤</td>
      <td>42</td>
    </tr>
  </table>
</body>
</html>

ブラウザ表示

スクリーンショット 2018-04-24 13.03.31

行のみに色をつける

特定の行のみに色をつけるので、tr要素にbgcolor属性で色を指定しましょう。

<tr bgcolor="色">

 

1行だけ背景をピンクにする場合のサンプルコード

<!DOCTYPE html>
<html>
<head>
<title>1行だけ背景をピンクにする</title>
</head>
<body>
 <table border="1">
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
    <tr bgcolor="pink">
      <td>田中</td>
      <td>27</td>
    </tr>
    <tr>
      <td>佐藤</td>
      <td>42</td>
    </tr>
  </table>
</body>
</html>

ブラウザ表示
1行だけ背景をピンクにする

セルのみに色をつける

特定のセルのみに色をつけるので、th要素またはtd要素にbgcolor属性で色を指定しましょう。

<th bgcolor="色">
<td bgcolor="色">

 

特定のセルに色をつける場合のサンプルコード

<!DOCTYPE html>
<html>
<head>
<title>特定のセルに色をつける</title>
</head>
<body>
 <table border="1">
    <tr>
      <th>名前</th>
      <th bgcolor="green">年齢</th>
    </tr>
    <tr>
      <td>田中</td>
      <td>27</td>
    </tr>
    <tr>
      <td bgcolor="orange">佐藤</td>
      <td>42</td>
    </tr>
  </table>
</body>
</html>

ブラウザ表示
セルに色をつける

セルのレイアウト

セルの幅や余白を調節する場合は、それぞれの属性にピクセルやパーセントを指定する必要があります。

ピクセルとパーセントの違い

ピクセルとは

絶対的な指定方法で、スクリーンの1ピクセルの長さを1とした単位です。表示されるサイズは使っているモニタの解像度に依存するので、どのモニタで表示しても同じように表示されません。

パーセントとは

相対的な指定法で、スクリーンの幅と高さを100%と考えたときの比率です。セルをパーセントで指定する時は基準となる長さが必要なため、最初にテーブル全体の長さを必ず指定する必要があります。

表の幅を変えるwidth属性

表全体やセルの幅を変える場合は、width属性を指定します。width属性に指定できる値はピクセルかパーセントです。

表全体の幅を変える

表全体の幅を変えるので、table要素にwidth属性で幅の大きさを指定しましょう。

ピクセルで指定する場合のサンプルコード

<!DOCTYPE html>
<html>
<head>
<title>表全体の幅をピクセルで指定する</title>
</head>
<body>
 <table border="1" width="200">
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
    <tr>
      <td>田中</td>
      <td>27</td>
    </tr>
    <tr>
      <td>佐藤</td>
      <td>42</td>
    </tr>
  </table>
</body>
</html>

ブラウザ表示
表全体の幅を大きくする(ピクセル)

パーセントで指定する場合のサンプルコード

<!DOCTYPE html>
<html>
<head>
<title>表全体の幅をパーセントで指定する</title>
</head>
<body>
 <table border="1" width="50%">
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
    <tr>
      <td>田中</td>
      <td>27</td>
    </tr>
    <tr>
      <td>佐藤</td>
      <td>42</td>
    </tr>
  </table>
</body>
</html>

ブラウザ表示

表の横幅がブラウザの全体100%に対して50%の幅で表示されます。

スクリーンショット 2018-04-24 13.20.22

セルのみの幅を変える

セルのみの幅を変える場合は、表全体の長さ指定して、それに対してパーセントで幅を調整します。

セルの幅をパーセントで指定する場合のサンプルコード

<!DOCTYPE html>
<html>
<head>
<title>セルの幅をパーセントで指定する</title>
</head>
<body>
 <table border="1" width="200">
 <!-- 表全体の長さを最初に指定しておく -->
    <tr>
      <th width="30%">名前</th>
      <th width="70%">年齢</th>
    </tr>
    <tr>
      <td>田中</td>
      <td>27</td>
    </tr>
    <tr>
      <td>佐藤</td>
      <td>42</td>
    </tr>
  </table>
</body>
</html>

ブラウザ表示

表全体の長さに対してセルの長さが30%と70%になっています。

セルの幅をパーセントで指定

表の高さを変えるheight属性

表の高さを変える場合は、hight属性を使ってwidth属性と同じようにピクセルかパーセントで指定していきます。

表全体の高さを変える

表全体の幅を変えるので、table要素にheight属性で幅の大きさを指定しましょう。

ピクセルで指定する場合のサンプルコード

<!DOCTYPE html>
<html>
<head>
<title>表の高さをピクセルで指定する</title>
</head>
<body>
 <table border="1" width="200" height="150">
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
    <tr>
      <td>田中</td>
      <td>27</td>
    </tr>
    <tr>
      <td>佐藤</td>
      <td>42</td>
    </tr>
  </table>
</body>
</html>

ブラウザ表示
表の高さをピクセルで変える

パーセントで指定する場合のサンプルコード

<!DOCTYPE html>
<html>
<head>
<title>表の高さをパーセントで指定する</title>
</head>
<body>
 <table border="1" width="50%" height="70%">
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
    <tr>
      <td>田中</td>
      <td>27</td>
    </tr>
    <tr>
      <td>佐藤</td>
      <td>42</td>
    </tr>
  </table>
</body>
</html>

ブラウザ表示

表の高さが親要素に対して、70%の幅で表示されます。
スクリーンショット 2018-04-24 13.31.37

セルのみの幅を変える

セルのみの幅を変える場合は、表全体の長さ指定して、それに対してパーセントで幅を調整します。

セルの幅をパーセントで指定する場合のサンプルコード

<!DOCTYPE html>
<html>
<head>
<title>セルの幅をパーセントで指定する</title>
</head>
<body>
 <table border="1" width="300" height="150">
 <!-- 表全体の高さを最初に指定しておく -->
    <tr height="20%">
      <th>名前</th>
      <th>年齢</th>
    </tr>
    <tr height="30%">
      <td>田中</td>
      <td>27</td>
    </tr>
    <tr height="50%">
      <td>佐藤</td>
      <td>42</td>
    </tr>
  </table>
</body>
</html>

ブラウザ表示

表の高さに対して、各セルの高さが20%、30%、50%の割合になっています。

スクリーンショット 2018-04-24 13.47.52

 

セルの余白を調節するcellpadding属性

セルの余白を調節する場合は、cellpadding属性を指定します。cellpadding属性もピクセルかパーセントで指定します。

cellpadding属性に"10"を指定してみます。

<!DOCTYPE html>
<html>
<head>
<title>セルの余白を調節する</title>
</head>
<body>
 <table border="1" width="200" cellpadding="10">
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
    <tr>
      <td>田中</td>
      <td>27</td>
    </tr>
    <tr>
      <td>佐藤</td>
      <td>42</td>
    </tr>
  </table>
</body>
</html>

ブラウザ表示

セルに余白ができました。
スクリーンショット 2018-04-24 12.25.57

セルを横方向に結合するcolspan属性

セルを横に結合する場合は、colspan属性を指定します。指定する数値は結合したいセルの数です。

セルを横方向に2つ結合する場合のサンプルコード

<!DOCTYPE html>
<html>
<head>
<title>セルを横に結合する</title>
</head>
<body>
 <table border="1" width="300" >
    <tr>
      <th>曜日</th>
      <th>open</th>
      <th>close</th>
    </tr>
    <tr>
      <td>月曜〜金曜</td>
      <td>10:00</td>
      <td>23:00</td>
    </tr>
    <tr>
      <td>土曜</td>
      <td>11:00</td>
      <td>21:00</td>
    </tr>
   <tr>
      <td>日曜・祝日</td>
      <td colspan="2">休み</td>
     <!-- セルを横に2つ結合する -->
    </tr>
  </table>
</body>
</html>

ブラウザ表示

スクリーンショット 2018-04-24 13.52.25

セルを縦方向に結合するrowspan属性

セルを横に結合する場合は、rowspan属性を指定します。colspan属性と同じように、結合したいセルの数を指定します。

セルを縦に2つ結合する場合のサンプルコード

<!DOCTYPE html>
<html>
<head>
<title>セルを縦に結合する</title>
</head>
<body>
 <table border="1" width="300" >
    <tr>
      <th>ice/hot</th>
      <th>種類</th>
      <th>金額</th>
    </tr>
    <tr>
      <td rowspan="2">hot</td>
      <!-- セルを縦に2つ結合する -->
      <td>コーヒー</td>
      <td>300</td>
    </tr>
    <tr>
      <td>紅茶</td>
      <td>250</td>
    </tr>
   <tr>
      <td>ice</td>
      <td>りんごジュース</td>
      <td>200</td> 
    </tr>
  </table>
</body>
</html>

ブラウザ表示スクリーンショット 2018-04-24 12.19.22

文字のレイアウトalign属性

文字のレイアウトにはalign属性に中央・左寄せ・右寄せを指定します。

文字を左に寄せるleft

表の中の文字を左に寄せたい場合は、align属性にleftを指定します。td要素の文字の初期値は左寄せになっています。

文字を左中央に寄せるcenter

表の中の文字を中央に寄せたい場合は、align属性にcenterを指定します。th要素の文字の初期値は中央寄せになっています。

文字を右に寄せるright

表の中の文字を中央に寄せたい場合は、align属性にrightを指定します。

文字の位置を変える場合のサンプルコード

<!DOCTYPE html>
<html>
<head>
<title>文字の位置を変える</title>
</head>
<body>
 <table border="1" width="200">
    <tr align="left">
      <th>名前</th>
      <th>年齢</th>
    </tr>
    <tr align="center">
      <td>田中</td>
      <td>27</td>
    </tr>
    <tr align="right">
      <td>佐藤</td>
      <td>42</td>
    </tr>
  </table>
</body>
</html>

ブラウザ表示スクリーンショット 2018-04-24 12.34.42

短時間でウェブサイト制作スキルをつけるには

HTMLやCSSはウェブサイト制作の基本であり、JavaScriptやPHPも合わせて覚えることでクオリティの高いサイトを作れるようになります。

もしあなたが今後、プログラミングスキルを身につけてエンジニアへ転職したい・個人でウェブサイト制作を請け負えるようになって働きたいなど、ウェブサイト制作を仕事にしていきたいならプログラミングスクールでの学習がおすすめです。

独学でも努力次第でサイト制作スキルが身につく人もいますが、弊社「侍エンジニア塾」の事例としてクラウドソーシングからお仕事を受注して授業中で納品まで行い、受講期間でエンジニアデビューした方もいます。

「知識だけでは仕事に繋がらなかった」38歳接客業からフリーランスデビューできた理由
更新日 : 2019年11月5日

こういった経験は独学ではできないので、プログラミングを仕事にしたい方はプログラミングスクールでの学習を検討しましょう。

スキル習得から仕事獲得まで

侍エンジニア塾ではコードを書けるようになるではなく、「プログラミングで人生を変える」ことを目的としたレッスンを行なっています。

  • あなたの理想に近い講師によるマンツーマン授業
  • あなたの目標から逆算したオーダーメイドカリキュラム
  • あなたのアイディアを形にするオリジナルアプリ制作

上記3つの特徴と共に仕事獲得までもご協力いたしますので、ウェブサイト制作を仕事にしたいなら是非無料体験レッスンへお越しください。

未経験でもサイト制作を仕事にするためのコツや、サイト制作の勉強を効率よく進めるための学習手順などもお教えいたします。

下記のボタンよりお申し込みください。オンラインでも受講可能のため、全国どこからでも受講可能です。

侍エンジニア塾
無料体験レッスンを受ける

まとめ

いかかがでしたか。これからHTMLを学ぶ場合、要素と属性がそれぞれ何をあらわしているのかを理解しておくと覚えやすくなります。

表作成のときにあれ?と思ったらぜひまたこの記事を参考にしてみてください!

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

シホ

シホ

1990年生まれ。長崎県出身。趣味は歌・登山・暗闇ボクシング。
最近HTMLとCSSの勉強を再スタートしました!
「初心者の方にもわかりやすく」をモットーにライターとして日々精進中です★

おすすめコンテンツ

いまならレッスン期間が2週間延長!この秋、プログラミングを学ぼう

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー