Home > TagScript > html、css、Java > テーブル(表組)

htmlタグで表を作成する

新規作成日 2016-11-28
最終更新日

表を作成するには、まず、htmlタグを作成します。最初のひな型を用意しておき、それをコピペ修正する方法が効率的だと思います。

htmlタグで表を作成する

テーブル(表組)を表現するには、tableタグを使用します。 tableタグで、表の開始と終了を、tableタグで表し、行を表すtrタグとセルを表すtdタグを記述して表を作成します。 その他に、表のタイトルを表すcaptionタグ、表の見出しを表すthタグが使用されます。

emmet入力を使用すると入力の手間を軽減できます。 emmet入力の支援があっても手入力だと大変なので(私は、こういったものを覚えられない人です)、 コピペで、1行ずつ入力し必要な個所を修正し、tabキーで展開します。

では、具体的な例を紹介します。

1行目が見出しの表を作成する(キャプション付き)

emmet入力

table>caption+(tr>th*3)+tr*2>td*3

生成されるタグ

<table>
    <caption></caption>
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

この中に、表の中の項目を記入してきます。

<table>
    <caption>タイトル</caption>
    <tr>
        <th>見出し1</th>
        <th>見出し2</th>
        <th>見出し2</th>
    </tr>
    <tr>
        <td>項目 11</td>
        <td>項目 21</td>
        <td>項目 31</td>
    </tr>
    <tr>
        <td>項目 12</td>
        <td>項目 22</td>
        <td>項目 32</td>
    </tr>
</table>

実際に、表示される表は、適用しているリセットcssによって、あるいは、使用しているブラウザによって、多少変わると思います。

タイトル
見出し1 見出し2 見出し2
項目 11 項目 21 項目 31
項目 12 項目 22 項目 32

1行目と1列目が見出しの表を作成する(キャプション付き)

emmet入力

table>caption+(tr>th*3)+tr*2>(th+td*2)

生成されるタグ

<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>

この中に、表の中の項目を記入してきます。

<table>
	<caption>タイトル</caption>
    <tr>
	<th>見出し1</th>
        <th>見出し2</th>
        <th>見出し3</th>
    </tr>
    <tr>
      	<th>見出し11</th>
        <td>項目 12</td>
        <td>項目 13</td>
    </tr>
    <tr>
	<th>見出し21</th>
        <td>項目 22</td>
        <td>項目 23</td>
    </tr>
</table>

実際に、表示される表は、適用しているリセットcssによって、あるいは、使用しているブラウザによって、多少変わると思います。

タイトル
見出し1 見出し2 見出し3
見出し11 項目 12 項目 13
見出し21 項目 22 項目 23

1行ごとに見出しを持つ表を作成する(キャプション付き)

emmet入力

table>caption+((tr>th*3)+tr>td*3)*2

生成されるタグ

<table>
    <caption></caption>
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

この中に、表の中の項目を記入してきます。

<table>
    <caption>タイトル</caption>
    <tr>
        <th>見出し1</th>
        <th>見出し2</th>
        <th>見出し3</th>
    <tr>
        <td>項目 11</td>
        <td>項目 12</td>
        <td>項目 13</td>
    </tr>
    <tr>
        <th>見出し 21</th>
        <th>見出し 22</th>
        <th>見出し 23</th>
    </tr>
    <tr>
        <td>項目 31</td>
        <td>項目 32</td>
        <td>項目 33</td>
    </tr>
</table>

実際に、表示される表は、適用しているリセットcssによって、あるいは、使用しているブラウザによって、多少変わると思います。

タイトル
見出し1 見出し2 見出し3
項目 11 項目 12 項目 13
見出し 21 見出し 22 見出し 23
項目 31 項目 32 項目 33

テキストエディタに入力支援機能が無いか確認する

多くの人が面倒だと思っていると思うので、テキストエディタのアドオンに便利ツールが公開されている可能性があるので、探してみると何か見つかるかもしれません。

テーブルタグ作成ツール

テーブルタグ作成ツールはいくつか存在するので、見つけたら、書き留めておきましょう