• HTML入門【<table>タグ】
    ~テーブル(表)を作成してみよう~

    公開日:2016年08月08日 最終更新日:2022年04月25日

    ページ内にテーブルを作成するには、<table>タグ、<tr>タグ、<td>タグを使います。本コラムではテーブル作成の基本を解説します。テーブルの見出しタイトルをつける方法やセルを結合する方法、CSSを使った罫線のスタイルの変更方法についても実際のコードを記述しながら学習して下さい。基本を学んだら便利ツールを使ってHTMLのコーディングをしましょう。

    プロエンジニアの無料会員登録はこちら

    目次

    【関連記事】CSSでテーブル(表)をデザインする【基礎編】
    【関連記事】CSSでテーブル(表)をデザインする【応用編】
    【関連記事】CSSでシンプルなテーブルをデザインする

    1. 基本のテーブル(表)を作成する

    1.1 テーブルを構成する基本のタグ

    テーブルを作成する前に、基本的な用語を説明します。HTMLだけではなく、Excelやデーターベースで使われる共通の概念をしっかりと覚えておきましょう。

    あるデーターのまとまりを分類して縦の列と横の列に並べて表したものを「テーブル(表)」と言います。テーブルを構成するのは、データの分類項目を表す縦並びの区切りである「列(カラム[Column])」と、横並びの区切りの「行(ロウ[row])」、それからデータの入っているマスの「セル(Cell)」です。

    ● テーブルの基本構成

    HTML入門【<table>タグ】~テーブル(表)を作成してみよう~フリーランスエンジニア案件情報 | プロエンジニアtable2-0

    HTMLでは、「行」と「セル」に対応するタグを「table タグ」で囲んであげる事で表を作成する事ができます。

    <th> タグ :[Table Header] ・・テーブルの「テーブル見出し」を表すタグ

    <tr> タグ :[Table Raw] ・・テーブルの「」を表すタグ

    <td> タグ :[Table Data] ・・テーブルの「セル」を表すタグ

    」に対応するタブはありませんが、「tdタグ」を並べることで列を表しています。

    データを保持する「tdタグ」のまとまりを「trタグ」で囲み列を作成し、その列のまとまりである「trタグ」を「tableタグ」で囲みます。

    ● テーブルタグの構成

    HTML入門【<table>タグ】~テーブル(表)を作成してみよう~フリーランスエンジニア案件情報 | プロエンジニアtable2-1

    それでは、実際にHTMLを記述しながら、それぞれのタグの役割を一つ一つ確認してゆきましょう。

    <!DOCTYPE html>
    <html>
    <head><title>HTML入門-表の作成</title></head>
    <body>
    <table>
    <tr>
    <td>1行目</td>
    </tr>
    </table>
    </body>
    </html>

    「セル」は一つですが、データを<td>タグで囲み、その前後を<tr>タグで囲んでいます。一行の全体を、<table>~</table>タグの中に入れてテーブルを作成します。

    ブラウザーで表示するとこのようになります。

    HTML入門【<table>タグ】~テーブル(表)を作成してみよう~フリーランスエンジニア案件情報 | プロエンジニアtable0

    一見テーブルのように見えませんがHTMLではきちんとテーブルとして認識されています。
    テーブルの罫線を表示してテーブルらしくしてみましょう。

    ▲ページトップへ戻る

    1.2 罫線の表示 "border"属性

    HTMLではデザインやレイアウトに関する属性はスタイルシート(CSSなど)を用いて定義するべきとして、いくつかの属性を非推奨としています。table要素における"border"属性は、現在非推奨とされていませんが見栄えに関する属性はスタイルシートを利用するとよいでしょう。

    本コラムではHTMLの入門記事として、<table>要素の属性として"border"属性を指定して説明します。

    "border"属性を使い「border="罫線の太さ(ピクセル数)"」をテーブルの要素に指定することで罫線を表示することができます。

    <body>
    <table border="1">
    <tr>
    <td>1行目</td>
    </tr>
    </table>
    </body>

    ブラウザーでの表示

    HTML入門【<table>タグ】~テーブル(表)を作成してみよう~フリーランスエンジニア案件情報 | プロエンジニアtable1

    "border"属性を指定して少しテーブルらしくなりました。

    ▲ページトップへ戻る

    1.3 行と列の作成

    次にセル一つだけの表に行と列を追加してみましょう。

    ●列の追加

    列の追加は<tr>~</tr>タグの中に<td>~</td>タグを追加していくだけです。

    <body>
    <table border="1">
    <tr>
    <td>1行目(左の列)</td>
    <td>1行目(右の列)</td>
    </tr>
    </table>
    </body>

    ブラウザーでの表示

    HTML入門【<table>タグ】~テーブル(表)を作成してみよう~フリーランスエンジニア案件情報 | プロエンジニアtable2

    複数の列(セル)を追加してみましょう。

    <body>
    <table border="1">
    <tr>
    <td>1行目(左の列)</td>
    <td>1行目(真中の列)</td>
    <td>1行目(右の列)</td>
    </tr>
    </table>
    </body>

    ブラウザーでの表示

    HTML入門【<table>タグ】~テーブル(表)を作成してみよう~フリーランスエンジニア案件情報 | プロエンジニアtable3

    ●行の追加

    テーブルに行を追加してみましょう。1行目の<tr>~</tr>タグのあとに新しい行の<tr>タグを追加します。

    <body>
    <table border="1">
    <tr><td>1行目(左)</td><td>1行目(右)</td></tr>
    <tr><td>2行目(左)</td><td>2行目(右)</td></tr>
    </table>
    </body>

    ブラウザーでの表示

    HTML入門【<table>タグ】~テーブル(表)を作成してみよう~フリーランスエンジニア案件情報 | プロエンジニアtable4

    2行3列のテーブルです。

    <body>
    <table border="1">
    <tr>
    <td>1行目(左の列)</td>
    <td>1行目(真中の列)</td>
    <td>1行目(右の列)</td>
    </tr>
    <tr>
    <td>2行目(左の列)</td>
    <td>2行目(真中の列)</td>
    <td>2行目(右の列)</td>
    </tr>
    </table>
    </body>

    ブラウザーでの表示

    HTML入門【<table>タグ】~テーブル(表)を作成してみよう~フリーランスエンジニア案件情報 | プロエンジニアtable5

    ▲ページトップへ戻る

    2. テーブル(表)のセルを結合する

    1章では、テーブルの基本構造である<table>タグと<tr>タグ、<td>タグを使いテーブルを作成しました。次はテーブル内のセルを結合してみましょう。

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

    となりのセルと結合するには、<td>タグの属性として、"colspan"属性を使います。
    それでは以下テーブルの「1行目(左の列)」と「1行目(真中の列)」をつなげてみましょう。

    HTML入門【<table>タグ】~テーブル(表)を作成してみよう~フリーランスエンジニア案件情報 | プロエンジニアtable5

    「1行目(左の列)」のセルと「1行目(真中の列)」に対応するHTMLタグは4行目と5行目になります。

    <body>
    <table border="1">
    <tr>
    <td>1行目(左の列)</td>
    <td>1行目(真中の列)</td>
    <td>1行目(右の列)</td>
    </tr>
    <tr>
    <td>2行目(左の列)</td>
    <td>2行目(真中の列)</td>
    <td>2行目(右の列)</td>
    </tr>
    </table>
    </body>

    タグの属性に、「colspan="つなげるセルの数"」を指定し「<td colspan="2">」とします。その右隣のセルは不要なので5行目の「<td>1行目(真中の列)</td>」を消します。

    <table border="1">
    <tr>
    <td colspan="2">1行目(左の列)</td>
    <td>1行目(右の列)</td>
    </tr>
    <tr>
    <td>2行目(左の列)</td>
    <td>2行目(真中の列)</td>
    <td>2行目(右の列)</td>
    </tr>
    </table>

    ブラウザーでの表示はこのようになります。

    HTML入門【<table>タグ】~テーブル(表)を作成してみよう~フリーランスエンジニア案件情報 | プロエンジニアtable10

    ▲ページトップへ戻る

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

    次に縦方向にセルをつなげてみましょう。
    縦につなげるには横と同じように、<td>タグに属性を追加しますが、"rowspan"属性を使います。

    <body>
    <table border="1">
    <tr>
    <td>1行目(左の列)</td>
    <td>1行目(真中の列)</td>
    <td>1行目(右の列)</td>
    </tr>
    <tr>
    <td>2行目(左の列)</td>
    <td>2行目(真中の列)</td>
    <td>2行目(右の列)</td>
    </tr>
    </table>
    </body>

    「1行目(左の列)」と「2行目(左の列)」を縦方向に結合させるには、「rowspan="つなげるセルの数"」を<td>タグに指定し、不要になった「<td>2行目(左の列)</td>」を消します。

    <body>
    <table border="1">
    <tr>
    <td rowspan="2">連結した左の列</td>
    <td>1行目(真中の列)</td>
    <td>1行目(右の列)</td>
    </tr>
    <tr>
    <td>2行目(真中の列)</td>
    <td>2行目(右の列)</td>
    </tr>
    </table>
    </body>

    すると、1行目のセルとその下の2行目のセルが結合されて表示されます。

    HTML入門【<table>タグ】~テーブル(表)を作成してみよう~フリーランスエンジニア案件情報 | プロエンジニアtable11

    ▲ページトップへ戻る

    3. テーブルの構成要素

    3.1 タイトルを付ける <caption>タグ

    テーブルにタイトルを付けるには、<caption>タグを用います。<table>タグの直後に配置します。

    <body>
    <table border="1">
    <caption>テーブルのタイトル</caption>
    <tr>
    <td>1行目(左の列)</td>
    <td>1行目(真中の列)</td>
    <td>1行目(右の列)</td>
    </tr>
    <tr>
    <td>2行目(左の列)</td>
    <td>2行目(真中の列)</td>
    <td>2行目(右の列)</td>
    </tr>
    </table>
    </body>

    ブラウザーの表示

    HTML入門【<table>タグ】~テーブル(表)を作成してみよう~フリーランスエンジニア案件情報 | プロエンジニアtable12

    ▲ページトップへ戻る

    3.2 テーブルの見出しを付ける <th>タグ

    HTMLの文章を書くときと同じようにテーブルにも見出し行を作成し、見やすくしてみましょう。
    テーブルの見出しタグは<td>タグの代わりにに<th>タグを指定することで見出しとしての意味を持ちます。一番先頭に行を追加し、<th>~</th>タグで見出しを囲みます。

    <body>
    <table border="1">
    <caption>テーブルのタイトル</caption>
    <tr>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
    </tr>
    <tr>
    <td>1行目(左の列)</td>
    <td>1行目(真中の列)</td>
    <td>1行目(右の列)</td>
    </tr>
    <tr>
    <td>2行目(左の列)</td>
    <td>2行目(真中の列)</td>
    <td>2行目(右の列)</td>
    </tr>
    </table>
    </body>

    ブラウザーの表示

    HTML入門【<table>タグ】~テーブル(表)を作成してみよう~フリーランスエンジニア案件情報 | プロエンジニアtable14

    ▲ページトップへ戻る

    3.3 ヘッダー <thead>タグとフッター <tfoot>タグ

    ●<thead>タグ:

    <thead>タグは、テーブルのヘッダー要素で<thead>~<thead>タグで囲みます。
    さきほど作成した<th>(見出し)タグは、<thead>タグの中に配置します。

    ●<tfoot>タグ:

    <tfoot>タグは、<thead>タグの直後にを配置することで、テーブルの一番下にフッター要素として表示されます。
    ※<thead>タグ→<tfoot>タグの順番に配置しないと、きちんと表示されないブラウザーもありますので注意して下さい。

    <body>
    <table border="1">
    <caption>テーブルのタイトル</caption>
    <thead><tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr></thead>
    <tfoot><td colspan="3">テーブルのフッターです。</td></tfoot>
    <tr>
    <td>1行目(左の列)</td>
    <td>1行目(真中の列)</td>
    <td>1行目(右の列)</td>
    </tr>
    <tr>
    <td>2行目(左の列)</td>
    <td>2行目(真中の列)</td>
    <td>2行目(右の列)</td>
    </tr>
    </table>
    </body>

    ブラウザーの表示

    HTML入門【<table>タグ】~テーブル(表)を作成してみよう~フリーランスエンジニア案件情報 | プロエンジニアtable13

    ▲ページトップへ戻る

    4. テーブルの罫線の線種を CSS で作成する

    テーブルの線の種類を少し変更してみます。先ほどはテーブルの罫線をborder属性で指定しましたが、通常は、スタイルシートを用いてテーブルの装飾をします。分かりやすくする為に、HTMLファイルとCSSのファイルは分離していませんが、スタイルを設定するファイルはHTML文書と分離した方がよいでしょう。

    <!DOCTYPE html>
    <html>
    <head><title>HTMLの基礎</title></head>
    <style>
    table {
    font-family: "メイリオ", sans-serif;/* フォントのスタイルを指定する */
    border-collapse: collapse; /* 隣接するセルの罫線を重ねて表示する */
    width: 80%; /* 要素の横幅を指定する */
    }
    td, th {
    border: 1px solid #000000; /* 境界線を実線で指定する */
    text-align: left; /* インライン要素の位置を指定する */
    padding: 8px; /* 要素の余白を指定する(上下左右) */
    }
    </style>
    <body>

    <table border="1">
    <caption>テーブルのタイトル</caption>

    <tr>
    <td>1行目(左の列)</td>
    <td>1行目(真中の列)</td>
    <td>1行目(右の列)</td>
    </tr>
    <tr>
    <td>2行目(左の列)</td>
    <td>2行目(真中の列)</td>
    <td>2行目(右の列)</td>
    </tr>
    </table>
    </body>
    </html>

    5行目から14行目までの「<style>タグ」で囲まれた箇所がCSSの記述になります。「 td セレクタ」と「 th セレクタ」でフォントの位置や余白を設定しています。「borderプロパティ(11)行目でテーブルの境界線を指定します。また、「table」セレクタで、テーブル罫線の重なりを指定する「border-collapse」罫線が重なった場合の表示を設定しています。「collapse」を設定しましたので、罫線の重なる部分でも表示は重なりません。

    ブラウザーの表示

    HTML入門【<table>タグ】~テーブル(表)を作成してみよう~フリーランスエンジニア案件情報 | プロエンジニアtable2-2

    【関連記事】CSSでテーブル(表)をデザインする

    ▲ページトップへ戻る

    5. HTMLエディターを使ってテーブルを作る

    テーブルを作る基本はしっかりと身につけてほしいのですが、テーブルのセルの数、行数が多くなるとHTMLの構造が分からなくなることがあります。そんなときはフリーで気軽に使えるHTMLエディターを使ってHTMLのテーブルタグを作成するととても便利です。【初心者におすすめ】HTMLエディター10選!で紹介したエディターを使って<table>タグを作成してみましょう。

    PCにインストールしたez-HTMLを立ち上げて[ファイル]→[新規作成]で文書を作ります。
    ez-HTMLは新規作成すると自動でHTMLの基本タグを挿入してくれます。<body>タグの中にカーソルをおいて、表タブをクリックします。

    HTML入門【<table>タグ】~テーブル(表)を作成してみよう~フリーランスエンジニア案件情報 | プロエンジニアtable6

    表タブの左にある雷マークのアイコンをクリックし「クイックテーブル」を表示します。

    HTML入門【<table>タグ】~テーブル(表)を作成してみよう~フリーランスエンジニア案件情報 | プロエンジニアtable8

    カーソルを動かし表示したいセルの数を選択します。今回は6行×5列のテーブルを選択しました。
    マウスの左クリックでテーブルのセル数を確定させると<body>タグの中に<table>タグと<td>タグ、<tr>タグが自動で挿入されます。挿入したいデータや情報を<td>タグの中に記述してゆきましょう。

    HTML入門【<table>タグ】~テーブル(表)を作成してみよう~フリーランスエンジニア案件情報 | プロエンジニアtable9

    ある程度基本的なHTMLの構文を覚えていくことも重要ですが、同時にコーディングの際に使うツールを色々試してみると効率よく作業ができます。

    ▲ページトップへ戻る

    最新案件情報をチェック!

    月額単価70万円〜80万円
    勤務地 東京都 中央区
    月額単価60万円〜70万円
    勤務地 東京都 港区
    月額単価80万円〜90万円
    勤務地 東京都 中央区
    月額単価80万円〜90万円
    勤務地 東京都 中央区

    フリーランスの方でこのようなお悩みありませんか?

    • 定期的に案件を紹介してほしい
    • 完全フルリモートワークや、週1出勤など、働き方を選びたい
    • 単価交渉など営業周りが苦手なので、誰かに任せたい

    プロエンジニアにお任せください!

    プロエンジニアはほとんどEND直案件!高額単価案件ならお任せください。
    完全フルリモートや、週1出勤など、希望に合わせた働き方ができる案件を多数ご用意しています。
    単価や契約交渉などは弊社キャリアコンサルタントに全てお任せください。

    無料登録して、あなたの希望に合った案件をチェック!

    簡単60秒!無料登録はこちらから

    おすすめ記事

  • ピックアップ

    フリーランス

    【TypeScript/React】フルスタックエンジニア★入札資格情報サービスの機能・保守開発

    クラウドソーシング事業やBPO事業を展開している企業にて、官公庁・自治体等の入札資格情報を管理できる...

    月額単価:70万円〜80万円

    フリーランス

    【JavaScript/PHP】フルスタックエンジニア★運送業界向け業務管理システムの開発

    運送業界に特化したサービスを展開している企業にて、今回は運送業界向け業務管理システムのフルスタッ...

    月額単価:60万円〜70万円

    フリーランス

    【Vue/PHP(Laravel)】フルスタックエンジニア★予算情報・事業計画検索サービスの追加機能開発

    クラウドソーシング事業やBPO事業を展開している企業にて、民間企業向けに予算情報・事業計画検索サービ...

    月額単価:80万円〜90万円

    フリーランス

    【Vue/PHP(Laravel)】フルスタックエンジニア★入札情報サービスのリニューアル開発

    クラウドソーシング事業やBPO事業を展開している企業にて、入札情報サービスに関わる公的機関向けのサー...

    月額単価:80万円〜90万円

SCROLL TOP