【HTML】captionタグ - 表のタイトル

HTMLのcaptionタグをご紹介します。

captionタグ

captionタグは表のタイトルをマークアップします。

基本構文

<table>
    <caption>タイトル</caption>
    <tr>
        <th>列名</th>
        <th>列名</th>
        <th>列名</th>
    </tr>
    <tr>
        <th>行名</th>
        <td>データ</td>
        <td>データ</td>
    </tr>
    <tr>
        <th>行名</th>
        <td>データ</td>
        <td>データ</td>
    </tr>
</table>

サンプルコード

表のデフォルトでは枠線がない場合があります。
サンプルでは分かりやすくするため、枠線を付けるスタイル（装飾）のコードを掲載しています。

スタイルコード

<style>
    table { border-collapse: collapse ; }
    td,th { border: 1px solid black; }
</style>

ソースコード

<style>
    table { border-collapse: collapse ; }
    td,th { border: 1px solid black; }
</style>
<table>
    <caption>ページ解析</caption>
    <tr>
        <th>ページ</th>
        <th>ユーザー数</th>
        <th>アクセス数</th>
    </tr>
    <tr>
        <th>AAA</th>
        <td>10</td>
        <td>70</td>
    </tr>
    <tr>
        <th>BBB</th>
        <td>30</td>
        <td>50</td>
    </tr>
</table>

プレビュー