テーブル(表)を作成する
2013年4月12日:HTML
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さんをフォロー