tableタグを理解しましょう！

tableタグ

• table要素（タグ）は表組み（テーブル）を作成します。

作成する表（例）

タグ構成

タグ説明

• table：表全体を作成します。
• tr：「Table Row（行）」の略です。表の行を１つ作成します。
• th：「Table Header（見出し）」の略です。表の見出しとなるセルを１つ作成します。
• td：「Table Data（データ）」に略です。表のデータとなるセルを１つ作成します。

HTML

    <table>
        <tr><th>名前</th><th>年齢</th></tr>
        <tr><td>田中</td><td>27</td></tr>
        <tr><td>佐藤</td><td>42</td></tr>
    </table>
	

表示結果

HTML

    <table class="tbl-01">
        <tr><th>名前</th><th>年齢</th></tr>
        <tr><td>田中</td><td>27</td></tr>
        <tr><td>佐藤</td><td>42</td></tr>
    </table>
	

CSS

    table.tbl-01 table {
        border-collapse: collapse;
    }
    table.tbl-01 th {
        width: 200px;
        background-color: #eee;
        text-align: center;
        border: 1px #ccc solid;
    }
    table.tbl-01 td {
        width: 200px;
        text-align: center;
        border: 1px #ccc solid;
    }

    ※「border-collapse」は隣接するセルのボーダーの表示型式を指定します。
    　collapse：隣接するセルのボーダーを重ねて表示します。
    　separate：隣接するセルのボーダーを間隔をあけて表示します。
	

表示結果

関連タグ

• caption：表の概要を記述します。captionタグはtableタグの直下に書く必要があります。
• colgroup：列のグループを定義します。colgroupタグはtableタグの直下に書く必要があります。
  colgroupタグで指定できるスタイルは「background,border,width,visibility」です。
• thead,tbody,tfoot：表のヘッダ、ボディ、フッタグループを定義します。
  省略可能ですが指定するとよりテーブル構造を明確化できます。

注意事項

• thタグは縦に並べても良く表の中に点在していても大丈夫です。
• セルを横方向つなげる時はthタグまたはtdタグに「colspan="つなげたい数"」を指定します。
• セルを縦方向つなげる時はthタグまたはtdタグに「rowspan="つなげたい数"」を指定します。
• セル内の余白を設定する時はthタグまたはtdタグのCSSで「padding」を指定します。
• セル内に画像を表示させる時はthタグまたはtdタグ内に「img」タグを記述します。

表示形式

表示形式

表示形式

表示形式

表示形式

課題作成方法

• 上記のテーブルサンプルから1つ選択してHTML/CSSファイルを作成してください。
• HTMLファイルとCSSファイルを独立させて作成し下記のフォルダ型式にしてください。
• 表の中のデータおよび表型式（色、幅、フォントサイズなど）は適時変更しても大丈夫です。

フォルダ型式

    work_〇〇〇〇_20210313.zip
        demo01
            index.html
            style.css
        demo02
            index.html
            style.css
        demo03
            index.html
            style.css
        demo04
            index.html
            style.css
        demo05
            index.html
            style.css

    ※格納するのは作成したフォルダだけで大丈夫です。
    ※zipファイルはDropBoxの「提出 → 【作品】サイト①_20210313」に格納してください。