HTML/CSS基礎 第9回 『表の作り方について理解しよう』

表を作成する

HTML/CSS基礎 第9回では表の作成の仕方について説明していきます。

表は<table>タグ、<tr>タグ、<th>タグ、<td>タグを組み合わせて作成します。各タグの説明は以下の通りです。

　　　<table>タグ：表全体を囲むことで、表の範囲を示すためのタグです。border属性を設定することで、表を罫線で囲むことができます。属性値を変更することで線の種類の変更も可能。

　　　<tr>タグ：「Table Row」の略です。表の一行を囲みます。

　　　<th>タグ：「Table Header」の略です。表の見出しとなるセルを作成し、表記される文字は太字となります。

　　　<td>タグ：「Table Date」の略です。表のデータとなる各セルを作成します。

サンプルコードと実行した際のサンプルを掲載するのでご確認ください。

<table border="1">
    <tr>
        <th>　セル1　</th>
        <th>　セル2　</th>
    </tr>
    <tr>
        <td>　セル3　</td>
        <td>　セル4　</td>
    </tr>
    <tr>
        <td>　セル5　</td>
        <td>　セル6　</td>
    </tr>
</table>

border属性の属性値を変更することで罫線の線種を変更することが可能です。リファレンスを参考にしながら様々な値を代入してご確認ください。

表の各セルをつなげる

横方向につなげる

セルを横につなげるときには、つなげたいセルの<th>タグもしくは<td>タグにcolspan属性を付け加えます。属性値としてつなげたいセルの数を記入してください。

縦方向につなげる

セルを縦につなげる場合はrowspan属性を追加します。こちらもcolspan属性と同じように、属性値につなげたいセルの数を指定します。

サンプルコード及び表示サンプル

<table border="1">
    <tr>
        <th colspan="2">　セル1+2　</th>
    </tr>
    <tr>
        <td rowspan="2">　セル3+5　</td>
        <td>　セル4　</td>
    </tr>
    <tr>
        <td>　セル6　</td>
    </tr>
</table>

今回掲載している二つのコードと表を見比べることで、コードの書き方・表示のされ方の違いがご理解いただけたのではないかと思います。

次回からはフォームについて説明させていただきます。