HTML で表を作成する TABLE タグの使い方

何かを比較するような内容をメモするときに、わかりやすくなるように、上の画像のように表組みにしたくて、HTML で表を作成する方法を覚えたつもりだけど、複数のタグを駆使していて複雑ゆえ、3日で忘れそうだから、ここにメモしておこうと思います。

使用するタグ

まずは登場人物の紹介から。

<table> </table> ・・・このタグで囲まれた部分が、ひとつの表になります。
<tr> </tr>・・・このタグで囲まれた部分が、1行になります。
<td> </td>・・・このタグで囲まれた部分が、セルなります。
<th> </th>・・・このタグは td と置き換えて使い、見出しになります。

タグの意味

意味がわかったほうが覚えやすいので、何の略かもメモしておきます。

tr = Table Raw
td = Table Data
th = Table Header

表を作ってみる

こんな風に書いてみました。

<table>
<tr>
	<th> - </th>
	<th>The Stone Roses</th>
	<th>The Smiths</th>
	</tr>
<tr>
	<th>Vocal</th>
	<td>イアン・ブラウン</td>
	<td>モリッシー</td>
</tr>
<tr>
	<th>Guitar</th>
	<td>ジョン・スクワイア</td>
	<td>ジョニー・マー</td>
</tr>
<tr>
	<th>Bass</th>
	<td>マニ</td>
	<td>アンディ・ルーク</td>
</tr>
<tr>
	<th>Drums</th>
	<td>レニ</td>
	<td>マイク・ジョイス</td>
</tr>
</table>

<table>

<tr>

<th>The Stone Roses</th>

<th>The Smiths</th>

</tr>

<tr>

<th>Vocal</th>

<td>モリッシー</td>

</tr>

<tr>

<th>Guitar</th>

<td>ジョン・スクワイア</td>

</tr>

<tr>

</tr>

<tr>

<th>Drums</th>

</tr>

</table>

完成図

上記のコードで、以下のように表示されます。ちなみに、装飾はこのブログのテンプレートのCSSで設定されいるものです。見出しである th タグの部分が大文字になっているのも、CSSによるものです。一般的には、太字で中央に揃います。

–	The Stone Roses	The Smiths
Vocal	イアン・ブラウン	モリッシー
Guitar	ジョン・スクワイア	ジョニー・マー
Bass	マニ	アンディ・ルーク
Drums	レニ	マイク・ジョイス