HTMLで表のことをテーブルといいます。
ここを理解するのが最初のハードルとなるかも…じっくりね。
テーブル(表)を作ろう
どんなホームページを作成するにせよ、表は結構使うかもしれませんね。最初は戸惑うかもしれませんが、じっくり覚えましょう。 まずはもっとも単純な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="枠線の幅">
これらのサイズの指定は数字(ピクセル)で指定できます。高さと幅は%でも指定できますので、いろいろな数字を入れてブラウザでどのように見えるか試してみましょう。
さて続いて次のページでは複数のセル(一つ一つの枠)にまたがったセルを作ります。

