テーブル(表)を作ろう

どんなホームページを作成するにせよ、表は結構使うかもしれませんね。最初は戸惑うかもしれませんが、じっくり覚えましょう。 まずはもっとも単純な3行3列の表を作ってみましょう。

1行1列目 1行2列目 1行3列目
2行1列目 2行2列目 2行3列目
3行1列目 3行2列目 3行3列目

このようにするには以下のように記述しましょう。

<html>
<head>
<title>私のホームページのタイトル</title>
</head>
<body>
<table border=”1″ align=”center”>
<tr>
<td>1行1列目</td>
<td>1行2列目</td>
<td>1行3列目</td>
</tr>
<tr>
<td>2行1列目</td>
<td>2行2列目</td>
<td>2行3列目</td>
</tr>
<tr>
<td>3行1列目</td>
<td>3行2列目</td>
<td>3行3列目</td>
</tr>
</table>
</body>
</html>

わかりましたか?ブラウザでこんな風に表示されましたか?

まず表全体が、 <table> ~ </table>で囲まれています。

そして、行を<tr> ~ </tr>で囲んでいます。
そして、その行を<td> ~ </td>で区切って表になっています。 同様に<tr>や<td>を追加していくと行や列が追加されます。

さらによく見ると、<tableの後に半角スペースそしてborder=”1″これはテーブルの枠線の太さです。今は1ピクセルです。数字を大きくすれば太くなっていきます。そして前のページで出たalign=”center”で中央に寄せています。

テーブルのサイズ、枠線などのサイズ指定

<table width=”350″ height=”250″ border=”10″ align=”center” cellpadding=”10″ cellspacing=”10″>

というように<table>タグの後ろに追加してみましょう。こんな風になるはずです。解説すると、

<table width=”テーブルの幅” height=”テーブルの高さ” align=”右、左、中央” border=”外枠の幅” cellpadding=”枠線とテキストとの間隔” cellspacing=”枠線の幅”>

これらのサイズの指定は数字(ピクセル)で指定できます。高さと幅は%でも指定できますので、いろいろな数字を入れてブラウザでどのように見えるか試してみましょう。

さて続いて次のページでは複数のセル(一つ一つの枠)にまたがったセルを作ります。

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録