バナー画像

HTMLで表を作成する場合、複数のタグを組み合わせて使用する必要があるため、プログラミングを始めたばかりの方にはイマイチ理解出来ていないという方もいらっしゃるかと思います。

本記事では、HTMLでの表作成の方法をステップ毎に分かりやすく解説していきたいと思います。

HTMLで表を作成する際の基本的な考え方


HTMLで表を作成する場合「table」タグを使用します。

「table」「tr」「th」「td」の4つのタグを利用して、任意の表形式を組み上げていきます。

テーブルによって「行」や「列」の数は異なりますが、基本的な使い方を把握しておけば自由にカスタマイズすることが可能です。

表を作成する際の考え方を順番に確認していきましょう。

HTMLで表を作成する手順1: 表示したい行数を決める


まずは表に対して「行」を何行表示するか決定しましょう。

行の指定には「tr」タグを使用します。

例えば3行の表を作成したい場合は、下記のサンプルのようになります。

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>
ポテパンダの一言メモ

tableタグに関しては、表の大枠を定義するものです。
1つの表を作成するためには必ず<table>と</table>を定義する必要があります。

HTMLで表を作成する手順2: 見出しの位置を決める


次に見出しの位置を決めていきましょう。

HTMLの表作成では見出しとして「th」タグを使用します。

1行目を見出しに設定

1行目を見出しとしたい場合には、下記のサンプルのようになります。

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

thタグを指定した数だけ見出しの列が作成されます。

1列目を見出しに設定

表の左端に見出しを持ってきたい場合には、下記のサンプルのように記述することで実現可能です。

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

各行の最初にthタグを設置することにより、1列目を見出しとして設定することが可能です。

HTMLで表を作成する手順3: データ部分を作成


上述のサンプルで登場していますが、データ部分には「td」タグを使用します。

表示したい列数分、tdタグをtrタグの内部に記述していきます。

各行に指定するtdタグは同数で設定するのが一般的です。

各行で列数を変更することも可能ですが、レイアウトが崩れるため、後述するセル結合以外での利用は一般的ではありません。

ポテパンダの一言メモ

ちなみにthタグに関しては使用しなくても問題ありません。
データだけを表形式で表示したい場合には、「table」「tr」「td」タグのみでテーブルを作成します。

ここまでの説明をサンプルコードで掲載すると下記のようになります。

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Table Create Sample</title>
</head>
<body>
 <h2>見出しあり(1行目)</h2>
 <table>
   <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>
 <h2>見出しあり(1列目)</h2>
 <table>
   <tr><th>見出し1</th><td>データ1</td><td>データ2</td></tr>
   <tr><th>見出し2</th><td>データ3</td><td>データ4</td></tr>
   <tr><th>見出し3</th><td>データ5</td><td>データ6</td></tr>
 </table>
 <h2>見出しなし</h2>
 <table>
   <tr><td>データ1</td><td>データ2</td><td>データ3</td></tr>
   <tr><td>データ4</td><td>データ5</td><td>データ6</td></tr>
   <tr><td>データ7</td><td>データ8</td><td>データ9</td></tr>
 </table>
</body>
</html>

ブラウザでは下記のように表示されます。

ポテパンダの一言メモ

tableタグは属性を指定しない場合、枠線は表示されません。
またthタグに設定した値は太字・中央寄せで表示される特徴があります。

HTMLで表を作成する応用編: セル同士の結合


セル同士を結合させることで変則的な表を作成することも可能です。

セルを横に繋げる場合「colspan属性」、セルを縦に繋げる場合「rowspan」属性を指定します。

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

ポテパンダの一言メモ

今回はセル結合のサンプルと同時に、より表っぽく見えるように少しデザインを加えました。

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Table Create Sample</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
 <table>
   <tr><th>見出し1</th><td>データ1</td><td rowspan="2">データ2</td></tr>
   <tr><th>見出し2</th><td>データ3</td></tr>
   <tr><th>見出し3</th><td colspan="2">データ4</td></tr>
 </table>
</body>
</html>

style.css

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

table {
  width: 400px;
}

th{
  width: 150px;
  background-color: darkgrey;
  padding: 10px;
}

td {
  width: 250px;
  text-align: center;
}

ブラウザでは下記のように表示されます。

CSS部分についての簡単な解説

セル結合のサンプルで設定した、デザイン部分のCSSコードについて簡単に解説していきます。

枠線を指定

tableタグは、デザイン指定を行わない場合、枠線が表示されないため、一見すると表のように見えません

そこでCSS側で枠線を表示する処理を加えました。

borderプロパティで枠線自体の設定は可能ですが、各タグに枠線が設定されることによりデフォルトでは2重線のように表示されてしまいます。

そこで隣接するボーダーを重ねるために「border-collapse:collapse」を指定してあげることで、1重の枠線で表を囲ったように見せています。

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

テーブルと各セルの幅指定

テーブルとセルの幅指定にはwidthプロパティを使用しています。

今回の場合、全体を400ピクセルで指定し、画面左側に表示される見出しは150ピクセル、データ用のセルは250ピクセルに固定しました。

table {
  width: 400px;
}

th{
  width: 150px;
}

td {
  width: 250px;
}

セル内テキストの余白を調整

デフォルトの表示では、セル内のテキストが枠線から近すぎるように感じたため、10ピクセル分隙間を開けるように設定しています。

thタグに記述したpaddingプロパティが役割を担います。

また、テキストを中央揃えにしたかったため、データ用セルには「text-align:center」を指定して中央揃えするようにしました。

ポテパンダの一言メモ

見出しを分かりやすくするように、background-colorプロパティで背景色をダークグレイに指定しています。

th{
  background-color: darkgrey;
  padding: 10px;
}

td {
  text-align: center;
}

さいごに: HTMLでの表作成は順を追って確認すれば仕組みは簡単


本記事では、HTMLでの表作成の手順について各ステップを分解して細かくご紹介してみました。

初心者の方の中には、いきなりWebサイトの複雑なテーブルタグを分解して混乱している方も多いようですので、確実にステップを踏んで理解していきましょう。

今回ご紹介した内容を元に、ご自身でもいくつかの表をHTMLで作成してみてください。

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

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

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

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

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

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

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

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

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

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

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