バナー画像

HTMLでWebページを作成する際、商品の比較や一覧表示として表(テーブル)を利用したいといった要望は頻繁に挙がります。

本記事では、HTMLで表を作る方法から基本的な使い方、簡単なデザインのやり方までを網羅的にご紹介していきたいと思います。

HTMLで表の作り方とは?


HTMLで表を作る際、「table」タグを使用します。

正確にいうと「table」「tr」「th」「td」の4つのタグを組み合わせて表を作成していきます。

tableタグ

tableタグの役割としては、表の基本となる大枠を構成するために使用されます。
後述する「tr」「th」「td」タグの組み合わせ方によって、様々な形式の表を作成することが可能です。

trタグ

trタグの役割としては、表の行を定義するために使用されます。

「table row」タグの略称です。

trタグがtableタグの中にいくつ定義されているかによって、表の行数が確定します。

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

上記の例では3行の表が表示されます。

thタグ

thタグの役割としては、表の見出しを定義するために使用されます。

「table header」タグの略称です。

<table>
  <tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr>
  <tr><td></td><td></td><td></td></tr>
</table>

上記の例では、2行の表が作成され、1行目に3列の見出しが表示されます。

tdタグ

tdタグの役割としては、表の中に実際のデータを設定するために使用されます。

「table data」タグの略称です。

表の目的によって、テキストだけでなく、数値や画像といった様々なデータが設定されます。

<table>
  <tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr>
  <tr><td>テキスト</td><td>数値</td><td>画像</td></tr>
</table>

HTMLでの表作成をサンプルコードで確認しよう


では実際にHTMLでの表作成をサンプルコードで確認してみましょう。

属性指定なしのシンプルな表サンプル

まずは属性を一切指定せずに、シンプルな表を作成して基本的な使い方を確認していきたいと思います。

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Table Sample</title>
</head>
<body>
 <table>
   <tr>
     <th>名前</th>
     <th>年齢</th>
     <th>地域</th>
   </tr>
   <tr>
     <td>山田 太郎</td>
     <td>23</td>
     <td>東京都</td>
   </tr>
   <tr>
     <td>山田 花子</td>
     <td>20</td>
     <td>大阪府</td>
   </tr>
 </table>
</body>
</html>

ブラウザで表示した結果が下記の通りです。

属性を指定しない場合、一見表には見えないようなデザインで表示されていますね。

属性指定ありのシンプルな表サンプル

次に、よくWebサイトで見られるような表の形式になるよう、タグに属性を加えて修正してみましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Table Sample</title>
</head>
<body>
 <table border="1px" width="300px">
   <tr>
     <th>名前</th>
     <th>年齢</th>
     <th>地域</th>
   </tr>
   <tr>
     <td>山田 太郎</td>
     <td>23</td>
     <td>東京都</td>
   </tr>
   <tr>
     <td>山田 花子</td>
     <td>20</td>
     <td rowspan="2">大阪府</td>
   </tr>
   <tr>
     <td>田中 一</td>
     <td>30</td>
   </tr>
 </table>
</body>
</html>

ブラウザで表示した結果が下記の通りです。

tableタグにborder属性を指定し、枠線を表示させています。

また、tdタグのrowspan属性を使用してセルを結合するサンプルも合わせて取り入れています。

ポテパンダの一言メモ

rowspan属性では縦方向にセルを結合することが可能です。
colspan属性を使用すれば横方向にセルを結合することも可能です。

HTML5基準に沿って表のデザインを変更してみよう


HTML5基準では、デザインに関する記述は外部CSSファイルとして記述することが推奨されています。

実際に上述したサンプルをCSSに切り分けてコーディングするとどのような書き方になるのか確認していきましょう。

CSSファイルにデザイン処理を記述するサンプルコード

外部CSSファイルとして「style.css」ファイルを定義して、デザイン部分の切り出しを行ったサンプルが下記のコードです。

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Table Sample</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
 <table>
   <tr>
     <th>名前</th>
     <th>年齢</th>
     <th>地域</th>
   </tr>
   <tr>
     <td>山田 太郎</td>
     <td>23</td>
     <td>東京都</td>
   </tr>
   <tr>
     <td>山田 花子</td>
     <td>20</td>
     <td rowspan="2">大阪府</td>
   </tr>
   <tr>
     <td>田中 一</td>
     <td>30</td>
   </tr>
 </table>
</body>
</html>

style.css

table {
  width: 300px;
  border: 1px solid;
}

tr, th, td{
  border: 1px solid;
}

ブラウザで表示した結果が下記の通りです。

HTMLタグの属性で指定した場合と同じように表示されていることをご確認頂けます。

td属性に指定したrowspan属性に関しては、CSSで置き換えるのは一般的ではないため、上述のサンプルと同様の記述としています。

ポテパンダの一言メモ

今回はCSSファイルにHTMLタグを直接指定してデザインを記述していますが、特定のHTMLタグにデザインを施したい場合にはid属性やclass属性を定義してデザインを実装してください。

さいごに:HTMLで表(テーブル)作成処理は頻出処理の1つ


本記事では、HTMLで表(テーブル)を表示する方法と基本的な使い方についてご紹介してきました。

今回ご紹介した内容は基本中の基本となる部分で、ここからデザインを追加したり、表示する内容をデータベースから取得するなど、実務では様々な応用技術を組み合わせてWebサイトに表示する表を作成していきます。

まずは今回ご紹介した基本を抑えて頂き、HTMLで表を表示する方法の根幹知識を身につけ、各種応用技術と組み合わせて様々な表に関する処理を実装出来るように、挑戦していきましょう。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。