HTMLテーブルの作り方：初心者向けステップバイステップガイド

HTMLテーブルとは、行と列で構成されたデータの集合体です。HTMLでテーブルを作成するには<table>要素を使用します。行の作成には<tr>、列（セル）の作成には<td>、テーブルの見出しには<th>を使います。

テーブルは、行と列を使ってデータを分かりやすく提示するための手段です。私たちは日常のさまざまな場面でテーブルに触れています。バスの時刻表や、食品に含まれる成分表示などがその代表例です。

HTMLにおいても、テーブルはデータを見やすく整理して表示するための重要な手法として使われています。このチュートリアルでは、具体例を交えながら、HTMLテーブルの基本、複数の行や列にまたがるセルの作成方法、そしてテーブルのスタイリング方法について解説します。最後まで読めば、HTMLでテーブルを作成・操作するプロになれるでしょう。

HTMLテーブルの作成方法

テーブルとは、行と列で整理されたデータの集合です。テーブルを使うことで、データセット内の値同士の関係性をひと目で把握できるようになります。

HTMLでは、<table>要素を使ってテーブルを定義します。<table>要素の中では、以下のタグを使用できます。

• <tr>：行を作成する
• <td>：列（データセル）を作成する
• <th>：テーブルの見出しセルを作成する

例として、コーヒーショップで販売しているコーヒーの種類と価格を一覧にしたテーブルを作成してみましょう。このテーブルには「コーヒー」と「価格」の2つの列があり、3行のデータが含まれます。以下のコードでこのテーブルを定義できます。

<table>
	<tr>
		<th>Coffee</th>
		<th>Price</th>
	</tr>
	<tr>
		<td>Espresso</td>
		<td>$2.00</td>
	</tr>
	<tr>
		<td>Cappuccino</td>
		<td>$2.50</td>
	</tr>
	<tr>
		<td>Latte</td>
		<td>$2.75</td>
	</tr>
</table>

ブラウザでの表示結果は次のようになります。

この例では、1行の見出し行、2つの列、3行のデータ行を持つテーブルを作成しました。それでは、コードの内容を詳しく見ていきましょう。

まず、<table>タグを使ってWebページ上にテーブルを作成することを指示します。次に<tr>タグで1行目を作成し、その中に<th>タグでテーブルの列見出しを定義しています。ここでは「Coffee」と「Price」が列見出しに該当します。

続いて、さらに3つの<tr>タグを使って、コーヒーの名前と価格を表示する3行のデータ行を作成しています。各行の<tr>タグの中には<td>タグが含まれており、これがテーブル内の各セルを表します。たとえば、最初のコーヒーの項目では、「Espresso」と「$2.00」がそれぞれ<td>要素で表現されています。

テーブルのスタイリング

HTMLのテーブルには、さまざまな方法でスタイルを適用できます。ここでは代表的なスタイリング手法を紹介します。

枠線（ボーダー）の追加

HTMLのテーブルは、デフォルトでは枠線が表示されません。テーブルに枠線を付けたい場合は、CSSを使用する必要があります。CSSのborderプロパティを使うことで、HTMLテーブルに枠線を追加できます。

先ほど作成したテーブルに、黒の実線の枠線を追加してみましょう。以下のようなコードを使用します。

table, th, td {
	border: 1px solid black;
}

このスタイルをテーブルに適用すると、テーブル全体と各セルに枠線が表示されるようになります。修正後のテーブルは次の通りです。

枠線が付いたことで、テーブルのデータが格段に読みやすくなりました。ただし、上記のスタイルでは各セルごとに個別の枠線が引かれ、線が二重に見えてしまいます。これらの枠線を1本にまとめたい場合は、border-collapseプロパティを使用します。そのためのコードは以下の通りです。

table {
	border-collapse: collapse;
}

適用後のテーブルはこのようになります。

ご覧の通り、各セルに個別の枠線が引かれる代わりに、テーブル全体がすっきりとした1本の枠線で囲まれるようになりました。

見出しの配置（アライン）

デフォルトでは、<th>タグで定義された見出しはセルの中央に配置されます。見出しをセルの左端または右端に揃えたい場合は、<th>タグに対してtext-alignプロパティを指定します。

使用するコードは以下の通りです。

th {
	text-align: left;
}

このスタイルを先ほどのテーブルに適用すると、次のようなテーブルになります。

上記のテーブルでは、列見出しがテーブルの左側に揃えられています。

HTMLテーブルに適用できるスタイルは他にも多数ありますが、このチュートリアルでは枠線と枠線の結合に焦点を絞って解説しました。以降のセクションでも、ここで定義したスタイルを使い、データを読みやすい形で表示していきます。

複数の行・列にまたがるセルの作成

テーブルを扱っていると、1つのセルを複数の行や列にまたがらせたい場面が出てきます。

そんなときに役立つのが、colspan属性とrowspan属性です。rowspanはテーブル内で複数の行にまたがるセルを作成するために、colspanは複数の列にまたがるセルを作成するために使用します。

以下は、colspanを使って「Price」列を2列分にまたがらせたテーブルの例です。

<table>
    <tr>
        <th>Coffee</th>
        <th colspan="2">Price</th>
    </tr>
    <tr>
        <td>Espresso</td>
        <td>$2.00 (new)</td>
        <td>$2.00 (old)</td>
    </tr>
</table>

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

ご覧の通り、「Price」の見出しが2列分にまたがって表示されています。rowspanも同じ要領で使用でき、複数の行にまたがるセルを作成できます。

次に、メニューにある特定のコーヒーの詳細情報を格納するテーブルを例に考えてみましょう。

毎月末日に顧客の購買意欲を高めるために適用される割引価格と、通常価格を、同じ「Price」という見出しの下にラベル付きで表示したいとします。この場合、以下のようなコードで実現できます。

<table>
        <tr>
            <th>Coffee</th>
            <td>Espresso</td>
        </tr>
        <tr>
            <th rowspan="2">Price</th>
            <td>$2.00 (regular)</td>
        </tr>
        <tr>
            <td>$1.80 (discounted)</td>
        </tr>
</table>

このテーブルの出力結果は以下の通りです。

この例では、「Price」というラベルが2行にまたがって表示されていることが確認できます。

テーブルのヘッダー・ボディ・フッターの定義

テーブルを扱う際、データをより適切に構造化するために使える3つのタグがあります。

<thead>タグはテーブルのヘッダー（見出し部分）を定義し、<tbody>タグはテーブルの本体（メインコンテンツ）を定義し、<tfoot>タグはテーブルのフッターを定義します。

最初の例で使ったテーブルを題材に、具体的な使い方を見ていきましょう。コーヒーショップで販売しているすべてのコーヒーを一覧するテーブルを作成するとします。コードの可読性を高めるため、テーブルのヘッダー・ボディ・フッターを分けて記述したい場合は、以下のように書きます。

<table>
	<thead>
	<tr>
		<th>Coffee</th>
		<th>Price</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>Espresso</td>
		<td>$2.00</td>
	</tr>
	<tr>
		<td>Cappuccino</td>
		<td>$2.50</td>
	</tr>
	<tr>
		<td>Latte</td>
		<td>$2.75</td>
	</tr>
	</tbody>
	<tfoot>
		<tr>
			<th>Last Updated</th>
			<td>January 9th, 2020</td>
		</tr>
	</tfoot>
</table>

このテーブルでは、<thead>、<tbody>、<tfoot>の各タグを使って、それぞれヘッダー・ボディ・フッターを定義しています。

<thead>タグは、「Coffee」と「Price」という列見出しを含むヘッダー行を区別するために使用しています。<tbody>タグには、テーブルのメインデータであるコーヒーの価格情報を含む行を格納しています。

<tfoot>タグには、テーブルの最終更新日を示す行を格納しています。この情報はコーヒーとその価格の一覧そのものではないため、フッターとして分離しているのです。

これらのタグは必須ではありませんが、HTMLでテーブルをより明確に構造化するうえで非常に役立ちます。

HTMLテーブルへのキャプション追加

<caption>タグを使うと、テーブルにタイトル（キャプション）を追加できます。

<caption>タグは、開始タグ<table>の直後に配置しなければならない点に注意してください。以下は、<caption>タグを使ってコーヒーリストに「Coffee Menu」という見出しを追加した例です。

<table>
	<caption>Coffee Menu</caption>
	<tr>
		<th>Coffee</th>
		<th>Price</th>
	</tr>
	<tr>
		<td>Espresso</td>
		<td>$2.00</td>
	</tr>
	<tr>
		<td>Cappuccino</td>
		<td>$2.50</td>
	</tr>
	<tr>
		<td>Latte</td>
		<td>$2.75</td>
	</tr>
</table>

表示結果は次のようになります。

このコードでは、<caption>タグを使ってテーブルに「Coffee Menu」というタイトルを追加しています。

まとめ

テーブルはシンプルなものから複雑なものまで、自由に設計できます。この記事では、HTMLテーブルの基本について知っておくべきことをほぼ網羅的に解説しました。

具体的には、HTMLでテーブルを作成する方法、基本的なスタイルの適用方法、テーブルの構造化、複数の行や列にまたがるセルの作成方法、キャプションの使い方について取り上げました。

これであなたも、プロのようにHTMLテーブルを扱うための知識を身につけました。ぜひ実際の開発で活用してみてください。