バナー画像

HTMLでWebサイトを作成する際、テーブル(表)形式で表現することで、ユーザーにとって分かりやすく情報をまとめられる機会は多いものです。

本記事では、HTMLのテーブル(表)実装の基本から、簡単なカスタマイズテクニックを初心者向けにご紹介していきたいと思います。

HTMLでのテーブル実装方法


HTMLでテーブルを作成するには、4つのタグを利用して実装していきます。

  • tableタグ
  • trタグ
  • thタグ
  • tdタグ

tableタグ

テーブル自体を表すタグです。

テーブルのサイズや枠線の有無など、テーブルの大枠となる情報を設定します。

trタグ

Table Rowの略称です。

テーブルの内側の「行」を表します。

「tr」タグの数により、テーブル内の行数が決定します。

thタグ

Table Headerの略称です。

テーブルの見出しとなる項目を表します。

tdタグ

Table Dataの略称です。

テーブルのデータとなる項目を表します。

HTMLでシンプルなテーブルを作成するサンプルコード


実際に、HTMLでシンプルなテーブルをブラウザ上に表示してみたいと思います。

デザイン無しでテーブルを表示する

まずは、CSSでのデザインを一切せずに上述したテーブル関連のタグだけで、ブラウザ上でテーブルを表示します。

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Table Sample</title>
</head>
<body>
  <table>
    <tr>
      <th>見出し1</th>
      <th>見出し2</th>
    </tr>
    <tr>
      <td>データ1</td>
      <td>データ2</td>
    </tr>
  </table>
</body>
</html>

サンプルをブラウザ上で表示した結果が、下記キャプチャとなります。

シンプルにテーブル関連のタグのみを記述した場合、枠線なども表示されず簡素な表示内容となっています。

簡単な装飾で、テーブルの見た目を整えよう

table要素の属性として最も頻繁に利用するのが、「border」属性となります。

基本的にデザイン部分に関しては、全てCSSで装飾することが推奨されています。

枠線を追加する

テーブルに枠線を設定するには、「border」属性を使用します。

border属性の値は、ピクセル単位となっており、値が大きいほど太い枠線が表示されます。

<table border="1"></table>

枠線の色を設定する

枠線の色を設定するには従来「bordercolor」属性を使用していました。

HTML5からはCCSの「border-color」プロパティを利用する方法が推奨されています。

table {
  border-color: #e6e6fa;
}

テーブルの幅を設定する

テーブルの幅を決定するには従来「width」属性を使用していました。

HTML5からはCSSの「width」プロパティを利用する方法が推奨されています。

table {
  width: 500px;
}

背景色を設定する

背景色を設定するには従来「bgcolor」属性を使用していました。

HTML5からはCSSの「background-color」プロパティを利用する方法が推奨されています。

table {
  background-color: #f5f5f5;
}

上記でご紹介した内容を全て適用すると、下記のようなサンプルコードが出来上がります。

index.html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Table Sample</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <table border="1">
    <tr>
      <th>見出し1</th>
      <th>見出し2</th>
    </tr>
    <tr>
      <td>データ1</td>
      <td>データ2</td>
    </tr>
  </table>
</body>
</html>
style.css
table {
  width: 500px;
  border-color: #e6e6fa;
  background-color: #f5f5f5;
}

ブラウザ上に表示した結果が、下記のキャプチャとなります。

HTMLで表示するテーブルをカスタマイズしてみよう


上記でシンプルなテーブルの作成方法をご紹介してきましたが、HTMLに少し属性を追加するだけで、「列」や「行」を任意の構造にカスタマイズすることも可能です。

テーブルの行や列を結合させる

テーブル内の「行」や「列」を結合させて、少し変則的なテーブルを作成してみたいと思います。

index.html

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

    </tr>
    <tr>
      <td>データ7</td>
      <td>データ8</td>
      <td>データ9</td>
    </tr>
  </table>
</body>
</html>

style.css

table {
  width: 500px;
  border-color: #e6e6fa;
  background-color: #f5f5f5;
}

サンプルをブラウザ上で確認すると、下記のキャプチャのように表示されます。

テーブルの行結合について解説

まずテーブルの「行」を結合させるには「rowspan」属性を使用します。

「rowspan」属性では、値に指定した数値の分、「行」が結合された状態でテーブルが作成されます。

今回のサンプルでは、「データ4」を表示する「td」タグに対して「rowspan=”3″」を設定しているため、ブラウザ上では3行分が結合された状態で表示されています。

テーブルの列結合について解説

次にテーブルの「列」を結合させるには「colspan」属性を使用します。

「colspan」は「column span」の略称で、値に指定した数値の分、「列」が結合された状態でテーブルが作成されます。

今回のサンプルでは、「データ6」を表示する「td」タグに対して「colspan=”2″」と設定しているため、2列分のカラムが結合された状態で表示されていることをご確認頂けます。

さいごに:HTMLの実装ではテーブルをうまく活用して見栄えの良いWebサイトを作成しよう


本記事では、HTMLでテーブルを実装する方法について、基本的な内容をご紹介してきました。

Webサイト上でテーブルを利用する多くの目的としては、見栄えを良くし直感的に情報を分かりやすくすることが挙げられます。

CSSで自分なりにテーブルをカスタマイズしてみて、より見栄えの良いサイト作りに挑戦してみてください。

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

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

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

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

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

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

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

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

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

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

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