テーブル(表)を作成する

HTMLで表を作成する方法を紹介します。

とりあえず表をつくってみる

さっそくですがテーブルを作成します。以下のようにHTMLを書けばOKです。

<table border="1">
<tr>
<td>漢字</td><td>読み方</td>
</tr>
<tr>
<td>日本</td><td>にほん</td>
</tr>
<tr>
<td>犬</td><td>いぬ</td>
</tr>
</table>

すると以下のようになります。

tr要素は<table>から</table>の間で使用して、行の区切りを定義します。

td要素は<tr>から</tr>の間で使用して、列の区切りを定義します。

また、borderではボーダーラインの太さを表しています。

ヘッダ項目をつくる

先ほどの表の「漢字」と「読み方」は見出しなので強調したいですね。

そこで、以下のように変更します。

<table border="1">
<tr>
<th>漢字</th><th>読み方</th>
</tr>
<tr>
<td>日本</td><td>にほん</td>
</tr>
<tr>
<td>犬</td><td>いぬ</td>
</tr>
</table>

すると以下のようになります。

ただ、<td>を<th>へ変更すると強調されます。

強調したいヘッダ項目は<th>で強調しましょう。

サイズを指定する

 テーブルのサイズを指定する

テーブルのサイズを指定するには、

<table width=”ピクセル数” height=”ピクセル数”>内容</table>

とします。widthで幅、heightで高さを指定します。

ピクセル数でなくて%で指定することもできます。

セルのサイズを指定する

テーブルではなくて、セルのサイズを指定するには

<td width=”ピクセル数” height=”ピクセル数”>内容</td>

<th width=”ピクセル数” hegith=””ピクセル数”>内容</td>

で指定します。

キャプションを付ける

テーブルにキャプションを付ける場合は、

<table border="1">
<caption align="right" valign="bottom">漢字の読み方</caption>
<tr>
<th>漢字</th><th>読み方</th>
</tr>
<tr>
<td>日本</td><td>にほん</td>
</tr>
<tr>
<td>犬</td><td>いぬ</td>
</tr>
</table>

のように<caption>タグを加えます。すると以下のように表示されます。

alignでキャプションの位置を指定します。

• top：表の上に表示
• bottom：表の下に表示

テーブルの位置を指定する

画像と同じように表の左寄せや右寄せはalignにより指定できます。

tableタグの中に記述します。

また、vspaceやhspaceにより表と文字との間のスペースを指定できます。

例えば、

<table border="1" align="left" hspace="10" vspace="20">
<caption align="right" valign="bottom">漢字の読み方</caption>
<tr>
<th>漢字</th><th>読み方</th>
</tr>
<tr>
<td>日本</td><td>にほん</td>
</tr>
<tr>
<td>犬</td><td>いぬ</td>
</tr>
</table>

のようにすれば

と表示されます。

著者：安井 真人(やすい　まさと)
@yasui_masatoさんをフォロー