tableタグ -表（テーブル）を作成する｜HTML辞典

<table>タグとは？

<table> タグは、HTML 文書内で表（テーブル）を作成するためのタグです。
データを行と列の形式で整理し、視認性を向上させるために使用されます。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）。

閉じタグの有無

<table> は 開始タグ（<table>）と閉じタグ（</table>）の両方が必要 です。

基本的な記述方法

<table>
    <tr>
        <th>商品名</th>
        <th>価格</th>
    </tr>
    <tr>
        <td>りんご</td>
        <td>100円</td>
    </tr>
    <tr>
        <td>バナナ</td>
        <td>150円</td>
    </tr>
</table>

この記述により、表が作成されます。

使用できる主な属性

属性名	説明	例
border	表の境界線を指定（非推奨）	<table border="1">
cellpadding	セルの内側の余白を指定（非推奨）	<table cellpadding="10">
cellspacing	セル間の間隔を指定（非推奨）	<table cellspacing="5">
width	表の横幅を指定（非推奨）	<table width="100%">
summary	表の説明を設定（非推奨）	<table summary="売上データ">

⚠ 注意:
これらの属性は HTML5 では非推奨 となっており、CSS で代替することが推奨されています。

CSSを使ったデザイン変更

デフォルトでは 枠線が表示されません が、CSS でスタイルを適用できます。

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}

適切な使用例

✅ 商品一覧表を作成する

cssコピーする編集する<table>
    <tr>
        <th>商品</th>
        <th>価格</th>
        <th>在庫数</th>
    </tr>
    <tr>
        <td>みかん</td>
        <td>200円</td>
        <td>30個</td>
    </tr>
</table>

✅ <thead>, <tbody>, <tfoot> を使って表の構造を整理する

<table>
    <thead>
        <tr>
            <th>商品名</th>
            <th>価格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>りんご</td>
            <td>100円</td>
        </tr>
        <tr>
            <td>バナナ</td>
            <td>150円</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>合計</td>
            <td>250円</td>
        </tr>
    </tfoot>
</table>

適切でない使用例（誤った使い方）

❌ <table> をレイアウト目的で使用する

<!-- NG: テーブルでレイアウトを作成 -->
<table>
    <tr>
        <td>ヘッダー</td>
    </tr>
    <tr>
        <td>メインコンテンツ</td>
    </tr>
</table>

✅ 正しい書き方（レイアウトには CSS を使用）

<header>ヘッダー</header>
<main>メインコンテンツ</main>

❌ border や width を直接指定する（非推奨）

<!-- NG: 直接属性を設定 -->
<table border="1" width="100%">

✅ 正しい書き方（CSS で設定）

<style>
    table {
        width: 100%;
        border: 1px solid #000;
    }
</style>

<table>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<table>	表を作成する	<tr>, <td>, <th> などを含む	データを表形式で整理
<tr>	行を作成する	<th> や <td> を内包	テーブルの行
<th>	見出しセルを作成する	太字＋中央寄せ（デフォルト）	列名やカテゴリー名
<td>	データセルを作成する	一般的なデータ用	数値やテキストの表示

使用上の注意点

✅ <table> はデータを整理する目的で使用する

• レイアウト目的での使用は避け、代わりに CSS の grid や flexbox を活用する。

✅ border や cellspacing などの属性は使わず、CSS で制御する

• HTML5 では CSS によるデザイン変更が推奨されている。

✅ <thead>, <tbody>, <tfoot> を適切に使用する

• 可読性やアクセシビリティが向上し、SEO にも有利。

関連タグ

• <caption> – 表のタイトルを指定
• <tr> – 行を作成
• <th> – 見出しセルを作成
• <td> – データセルを作成
• <thead> – ヘッダー部分をグループ化
• <tbody> – データ部分をグループ化
• <tfoot> – フッター部分をグループ化

まとめ

<table> タグは、HTML 文書内で データを表形式で整理するためのタグ です。
適切に使用することで、データの可読性が向上し、アクセシビリティや SEO にも貢献します。