表を作成するには、まず、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 |
テキストエディタに入力支援機能が無いか確認する
多くの人が面倒だと思っていると思うので、テキストエディタのアドオンに便利ツールが公開されている可能性があるので、探してみると何か見つかるかもしれません。
テーブルタグ作成ツール
テーブルタグ作成ツールはいくつか存在するので、見つけたら、書き留めておきましょう
- テーブルタグ作成ツール(外部サイト)
- Table Tag Generator(外部サイト)
