<table><caption><tr><th><td>：基本の表要素 - まぬねこの足跡。。。

概要
属性の解説
- ＜th＞＜td＞タグ用
  - colspan属性：横方向のセルの連結
    - 書き方
    - 表示イメージ
  - rowspan属性：たて方向のセルの連結
    - 書き方
    - 表示イメージ
使い方
語源
参考

概要

＜table＞タグ：表要素

・表形式のデータ。行と列のセルデータによる二次元の表

＜caption＞タグ：表キャプション要素

・表のキャプション (タイトル) を指定

＜tr＞タグ：表の行要素

・セルの行を定義

＜th＞タグ：表見出し要素

・見出しであるセルを定義

＜td＞タグ：表データセル要素

・データ（内容）セル

属性の解説

＜th＞＜td＞タグ用

colspan属性：横方向のセルの連結

＜td colspan="3"(連結セルの数)＞ごはん＜/td＞

書き方

<table>
    <tr>
        <th colspan="2">食事</th>   ・・・※ここに注目！！
    </tr>
    <tr>
        <th>和食</th>
        <th>洋食</th>
    </tr>
    <tr>
        <td>ごはん</td>
        <td>パン</td>
    </tr>
</table>

表示イメージ

※枠線・背景色は別途CSSで記載。・・・タグのみでは枠線・背景色は表示されない。

：結合したセル

食事
和食	洋食
ごはん	パン

rowspan属性：たて方向のセルの連結

＜td rowspan="3"(連結セルの数)＞ごはん＜/td＞

書き方

<table>
    <tr>
        <th rowspan="2">食事</th>   ・・・※ここに注目！！
        <th>和食</th>
        <th>洋食</th>
    </tr>
        <tr>
        <td>ごはん</td>
        <td>パン</td>
    </tr>
</table>

表示イメージ

※枠線・背景色は別途CSSで記載。・・・タグのみでは枠線・背景色は表示されない。

：結合したセル

食事	和食	洋食
食事	ごはん	パン

使い方

＜table＞＜tr＞＜td＞タグ：単純な表

書き方

<table>
    <tr>
        <td>さくら</td>
        <td>うめ</td>
    </tr>
    <tr>
        <td>まつ</td>
        <td>たけ</td>
    </tr>
</table>

表示イメージ

※枠線・背景色は別途CSSで記載。・・・タグのみでは枠線・背景色は表示されない。

さくら	うめ
まつ	たけ

＜table＞＜tr＞＜th＞＜td＞タグ：ヘッダー＋単純な表

書き方

<table>
    <tr>
        <th>和食</th>
        <th>洋食</th>
    </tr>
    <tr>
        <td>ごはん</td>
        <td>パン</td>
    </tr>
        <td>みそ汁</td>
        <td>コーンスープ</td>
    </tr>
</table>

表示イメージ

※枠線・背景色は別途CSSで記載。・・・タグのみでは枠線・背景色は表示されない。

和食	洋食
ごはん	パン
みそ汁	コーンスープ

＜table＞＜caption＞＜tr＞＜th＞＜td＞タグ：キャプション＋ヘッダー＋単純な表*

書き方

<table>
    <caption>おいしい食事</caption>
    <tr>
        <th>和食</th>
        <th>洋食</th>
    </tr>
    <tr>
        <td>ごはん</td>
        <td>パン</td>
    </tr>
    <tr>
        <td>みそ汁</td>
        <td>コーンスープ</td>
    </tr>
</table>