HTMLのtableで表を作成するには
HTMLでは、tableタグを使って表を作成することができます。実際に表を作成するには、関係するHTMLの要素を理解しておく必要があります。
ここでは、tableタグや関係する要素を用いて、表計算ソフトのような集計画面をウェブに表示させる方法を学んでいきます。後半には、見栄えをCSSで指定する方法も図解していきます。
HTMLの表の基本要素を学ぶ
表を作成するには、表計算ソフトを用いることが一般的です。その集計結果のような表示は、ウェブでも実現できます。例えば次のような表計算の集計結果（①）は、HTMLでも表示させることができます（②）。
ここでは、順を追ってHTMLの要素を学び、表を完成させていきます。
【参考】： MDN Docs: HTML の表の基本
（手順1）table要素
HTMLには、表作成に関連する要素がいくつか定義されています。必ず必要な要素として、tableが定義されており、<table>タグを使って表を作成することができます。<table>で表の始まりを表し、</table>でこの表を終了します。
次のような表を作成する場合には、表の前に ”<table>” を挿入し（①）、表の終わりに ”</table>” を追加します（②）。
これから学ぶtableタグに関する要素一覧は、次のリンクからも確認できます。
（手順2）tr要素
作成する表を行と列で見ていくと、各行には見出しやデータが含まれており、その行に必要な分だけ複数に渡って定義することができます。行の区切りはtr要素を用いて記述し、<tr>が行の始まりで</tr>で行の終了となります。
次の表の例では、各行の最初と最後にそれぞれ ”<tr>” と ”</tr>” を挿入します（①②）。
（手順3）行のヘッダーとデータを記述する
table要素とtr要素で、表の概略がカバーされました。ここでは、行の構成情報を定義していきます。それぞれの行はヘッダーとデータから成ります。
一般的な表計算ソフトでは、表の上部あるいは左側にデータの項目が示されており、この項目をヘッダーと呼びます。また、実際に表に記述する内容をデータと呼びます。
次の例では、1行目がヘッダーとして「会員番号」「加入日」「姓」「名」「性別」のような項目を指しています（①）。2行目以降は、実際にヘッダー項目に該当するデータが記述されています（②）。
ヘッダーとデータを明示するには、th要素とtd要素を使います。ヘッダーは、<th>と</th>で表します。データは、<td>と</td>です。
同じ行の左をヘッダー、それ以降をデータとする場合は、 ”<th>～</th><td>～</td>” のように同一行に混在させることもできます。
（手順1～3）表を実際にHTMLで記述する
これまでに、手順1では表の作成から終了として ”<table>～</table>” を学びました。手順2では行の開始から終了の ”<tr>～</tr> ”を学びました。そして、手順3のヘッダーとデータ ”<th>～</th><td>～</td>” で、必要な基本要素がカバーされます。
このHTML要素を、今回示した表で次のように表します。
<!DOCTYPE html>
<html>
<head>
<title>名簿の表作成</title>
</head>
<body>
<table>
<tr>
<th>会員番号</th>
<th>加入日</th>
<th>姓</td>
<th>名</td>
<th>姓別</td>
</tr>
<tr>
<td>J9-0001</td>
<td>2024年4月1日</td>
<td>伊藤</td>
<td>隆</td>
<td>男性</td>
</tr>
：
（中略）
：
<tr>
<td>J9-0006</td>
<td>2024年11月3日</td>
<td>高橋</td>
<td>花子</td>
<td>女性</td>
</tr>
</table>
</body>
</html>このHTMLをブラウザで表示させると、次のように表されます。
この段階では、表形式でヘッダーとデータを表示しただけですので、文字だけのとてもシンプルな表示です。このように表示しただけでは、見栄えが良いとは決して言えません。以降では、CSSを用いたスタイルシートで体裁を調整し、効果的な表に仕上げていきます。
スタイルシートで体裁を指定する
現在のHTMLの仕様は、コンテンツ自体をHTMLが示し、見栄えや体裁をCSSが担当します。従来は、色付けのbgcolor、幅を表すwidth、枠のサイズのborderなどをHTMLに使用することができましたが、現在は非推奨となっており、CSSの記述が必要です。
ここでは、推奨されるCSSを用いて体裁を調整していきます。CSSはtableを用いたデザインの基本なので、理解を深めていきましょう。
CSSで実際に体裁を指定する
表計算ソフトなどの集計では、枠線を追加したり、項目に色付けを行ったりして体裁を調整します。CSSを使用すれば、同等のことが可能です。
CSSをHTMLファイルに埋め込むには、 ”<style>～</style>” で記述します。 ”<head>～</head>” の範囲にCSSコードを記述します。なお、コンテンツ自体は、HTMLが担当するため、 ”<body>～/body>” の記述は変更する必要はありません。
今回は、枠線を ”border:” で指定し、線幅は1pxとします。 ”table” 枠の色は ”black” 、 ”th” や ”td” は ”gray” とします。ヘッダーの背景色は ”background-color: green;” 、文字の色は ”color: white;” で指定します。色はあらかじめ定義されている色のほか、rgb()で指定することもできます。
セルの幅は ”width: 125px;” のように指定することができますが、ここでは、表示の見やすさを優先して ”padding: 1px 20px 1px 20px;” でセルの余白幅を指定することとします。
この例では次のように、CSSで追記した部分は、 ”<head>～</head>” のみです。
<!DOCTYPE html>
<html>
<head>
<title>名簿の表作成</title>
<style>
table {
border: 1px solid black;
}
th {
border: 1px solid gray;
background-color: green;
color: white;
}
td {
border: 1px solid gray;
padding: 1px 20px 1px 20px;
}
</head>
<body>
：
（中略）
：
</body>
</html>このコードを、ブラウザで確認すると次のように表示されます。
これで、表計算ソフトとそん色ない表示がブラウザで確認できました。
tableのレイアウトをさらに調整する
table要素で示される表のレイアウトは、さらに整形しやすいように構造化されています。表の見出しに相当するキャプション、最後のまとめを表示するフッタがあります。そしてヘッダーと本体のボディで構成されます。
キャプションは、 ”<caption>～</caption>” で見出しを入れます。この表では ”<caption>2024年名簿 </caption>” のように用い、階層構造化したデータでは、ヘッダー部分を ”<thead>～</thead>” で表します。
ボディは ”<tbody>～</tbody>” 、フッタは ”<tfoot>～</tfoot>” で表します。フッタの体裁もCSSで追加指定します。
これを実際のコードで、次のように記述できます。
<!DOCTYPE html>
<html>
<head>
<title>名簿の表作成</title>
<style>
table {
border: 1px solid black;
}
：
（中略）
：
tfoot td {
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<caption>
2024年名簿
</caption>
<thead>
<tr>
<th>会員番号</th>
<th>加入日</th>
<th>姓</th>
<th>名</th>
<th>姓別</th>
</tr>
</thead>
<tbody>
<tr>
<td>J9-0001</td>
<td>2024年4月1日</td>
<td>伊藤</td>
<td>隆</td>
<td>男性</td>
</tr>
：
（中略）
：
<tr>
<td>J9-0006</td>
<td>2024年11月3日</td>
<td>高橋</td>
<td>花子</td>
<td>女性</td>
</tr>
</tbody>
<tfoot>
<th scope="row" colspan="2">人数合計</th>
<td>男性：4名</td>
<td>女性：2名</td>
<td>総数：6名</td>
</tfoot>
</table>
</body>
</html>表はセル結合も可能です。この例では、フッタを<th>タグで「colspan="2"」を指定し、2つのセルを結合しています。縦にセル結合する場合は、「rowspan」を指定します。 表示も、 “text-align: center;” で中央寄せし、 ”font-weight: bold;” で太字にしました。
この表をブラウザで確認すると、次のように表示されます。
HTMLのtable作成はしっかりとマスターしよう
tableを用いた表の作成は、慣れるまでは時間を要する場合もあります。その場合はタグ生成ツールなどを利用することもできます。1度慣れてしまえばファイルを再利用することも可能なので、まずは確実にコーディングできるように理解を深めましょう。
その他の関連記事
その他に関連する内容は、下記の記事でも紹介しています。ぜひ参考にしてください。
【参考】：HTML関連の資格おすすめ3選！資格試験の選び方や勉強方法も解説
【参考】：HTMLのdivタグとは？読み方・目的・使い方などを解説！
【参考】：初心者におすすめのHTMLエディタ5選！便利な機能で開発効率もアップ
【参考】：HTML/CSSを費用をかけずに学べるおすすめの入門書15選！
【参考】：初学者必見！HTMLを勉強するのにおすすめの本を5つ厳選
【参考】：【2024年版】初心者向けのHTML編集ソフト（エディタ）おすすめ9選
【参考】：HTML・CSSは独学で習得できる？初心者におすすめな最短の勉強方法
【参考】：HTMLエラーチェッカーは必須？ミスの予防＆品質向上に最適！
【参考】：HTMLでJavaScriptを動かすには？Javaについても解説
【参考】：HTMLのリスト要素とは？基本の書き方やカスタマイズ方法を解説
【参考】：HTMLメールの作り方とは？概要や作成の手順、注意すべき点を解説
【参考】：HTMLでホームページを作成するには？作り方やポイントを解説
【参考】：HTMLでscriptの書き方まとめ！使用例から使う時のポイントまで解説
【参考】：HTMLリダイレクトとは？種類と書き方、使い分けを解説
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから
ホーム
カテゴリ
フォロー