HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLテーブル（表）の作り方｜table・tr・th・tdタグの基本をわかりやすく解説

Webページ上で表を作成するには、HTMLの<table>タグを使用します。テーブルは、行を表す<tr>タグ、見出しセルを表す<th>タグ、そしてデータセルを表す<td>タグを組み合わせて構成されます。

HTMLテーブルの基本構造

テーブルは以下の要素で構成されています。

  • <table>：テーブル全体を定義するコンテナ要素
  • <tr>（Table Row）：テーブルの1行を定義します
  • <th>（Table Header）：見出しとなるセルを定義します。多くのブラウザでは太字かつ中央揃えで表示されます
  • <td>（Table Data）：通常のデータセルを定義します

基本の書き方（構文）

HTMLテーブルは次のように記述します。

<table>
<tr>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
</tr>
</table>

このように、1つ目の<tr>で見出し行を作り、以降の<tr>でデータ行を追加していくのが基本的な流れです。

テーブルで使える主な属性

属性説明
colspanセルを横方向（列）にまたがって結合します。例えば「colspan="2"」と指定すると、2列分の幅を持つセルになります。
rowspanセルを縦方向（行）にまたがって結合します。「rowspan="3"」と指定すると、3行分の高さを持つセルになります。

これらの属性を使うことで、複雑なレイアウトの表も柔軟に作成できます。

キャプション（表題）の追加

<caption>要素を使うと、テーブルに表題を付けることができます。キャプションはデフォルトでテーブルの上部中央に表示され、スクリーンリーダー利用者にとっても表の内容を把握しやすくなるため、アクセシビリティの観点からも推奨されています。

<caption>ここに表題を記述</caption>

<caption>は必ず<table>タグの直後（最初の子要素として）に記述してください。

実装例

それでは、実際にHTMLテーブルを使ったサンプルコードを見てみましょう。学生の名前と学籍番号を表示する簡単な表です。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
    table {
        margin: 2rem auto;
        width: 400px;
    }
    caption {
        color: #fff;
        font-size: 1.5rem;
    }
</style>
<body>
<h1>HTML Tables</h1>
<table border="2">
<caption>Student Data</caption>
<tr>
<th>Name</th>
<th>Roll No.</th>
</tr>
<tr>
<td>John</td>
<td>031717</td>
</tr>
<tr>
<td>Elon</td>
<td>051717</td>
</tr>
</table>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、「Student Data」というキャプション付きの表が表示され、1行目に「Name」「Roll No.」という見出し、その下に各学生のデータが整然と並びます。

HTMLテーブル（表）の作り方｜table・tr・th・tdタグの基本をわかりやすく解説

まとめ

HTMLテーブルは、<table>・<tr>・<th>・<td>という4つの基本タグを覚えれば簡単に作成できます。さらにcolspanやrowspanでセルを結合したり、<caption>で表題を追加したりすることで、より見やすく情報伝達力の高い表を実現できます。なお、近年では装飾目的でのテーブル使用は避け、あくまで「表形式のデータ」を示すために使うことがベストプラクティスとされています。デザイン面はCSSで調整しましょう。

  1. HTML DOM TableHeaderオブジェクトの使い方を徹底解説

    HTML DOMのTableHeaderオブジェクトは、HTMLドキュメント内の<th>要素（テーブルヘッダーセル）を表すオブジェクトです。JavaScriptを使って動的にテーブルの見出しセルを作成・操作したい場合に活用できます。 TableHeaderオブジェクトの作成方法 TableHeaderオブジェクトを作成するには、documentオブジェクトのcreateElement()メソッドを使用します。 構文 document.createElement(TH); 引数に「TH」を指定することで、<th>要素に対応するTableHeaderオブジェクトが生成されま

  2. 【初心者向け】HTML DOM テーブルの tHead プロパティの使い方を解説

    HTML DOM の table オブジェクトが持つ tHead プロパティは、HTML 文書内のテーブルに含まれる <thead> 要素を取得するためのプロパティです。テーブルのヘッダー部分へ動的にアクセスしたい場合に便利です。 基本構文 tHead プロパティの基本的な書き方は以下のとおりです。 object.tHead 戻り値として <thead> 要素が返されます。テーブルに <thead> が存在しない場合は null が返される点に注意してください。 サンプルコード 実際に tHead プロパティを使用した例を見てみましょう。ボタンをクリックする