テーブル（表）は、<table>、<tr>、<td>の３種類のタグを使うことによって作成できます。ひとつのテーブル全体を<table>と</table>が囲み、横一行ごとを<tr>と</tr>、セル（表のマス）ひとつごとを<td>と</td>で囲みます。
<td>と</td>の中にそれぞれのセルの内容（文字や他のタグ）を記述していきます。
<table>
<tr>
<td>セル１</td>
<td>セル２</td>
<td>セル３</td>
</tr>
<tr>
<td>セル４</td>
<td>セル５</td>
<td>セル６</td>
</tr>
<tr>
<td>セル７</td>
<td>セル８</td>
<td>セル９</td>
</tr>
</table>
と記述すると、以下のように表示されます。
| セル１ | セル２ | セル３ |
| セル４ | セル５ | セル６ |
| セル７ | セル８ | セル９ |
これでは、表のように見えませんが、<table>タグの属性のひとつで、罫線規定するborderを使うと表であることが分かります。最初の行の<table>を<table border="1">と書き換えると、以下のように表示されます。
| セル１ | セル２ | セル３ |
| セル４ | セル５ | セル６ |
| セル７ | セル８ | セル９ |
border="1"の"1"は罫線の太さを表します。数字が大きくなると太くなり、"0"にすると罫線が表示されません。<table>タグの属性には以下のような属性を指定することができます。（以下の属性一覧は<table width="750" border="1" cellpadding="5" background="../images/background.jpg">タグを使って書かれています。）
| align="left/center/right" |
表の表示位置：左寄せ/センタリング/右寄せ
表１をalign="center"とした場合
|
|||||||||
| border="n" | 罫線の太さ：（"0"の場合は罫線なし） | |||||||||
| cellspacing="n" |
セルとセルとの間隔
表１をcellspacing="10"とした場合
|
|||||||||
| cellpadding="n" |
罫線とセルの内容との間隔
表１をcellpadding="10"とした場合
|
|||||||||
| width="n/n%" |
表の幅（ピクセル数/ウィンドウサイズに対する比率）
表１をwidth="400"とした場合
|
|||||||||
| height="n/n%" |
表の高さ（ピクセル数/ウィンドウサイズに対する比率）
表１をheight="150"とした場合
|
|||||||||
| bgcolor="color" |
背景の色
表１を bgcolor="pink"とした場合
|
|||||||||
| babordercolor="color" | 罫線の色(Netscape Ver.3では非対応) | |||||||||
| background="url" | 背景の画像(Netscape Ver.3では非対応) |
最初の表を表すHTMLの最初の行<table>を上記の属性をいくつか使用して <table align="center" border="5" cellspacing="10" cellpadding="5" width="80%" height="240" bgcolor="skyblue"> のように書き換えると、以下のように表示されます。いろいろ試してみて下さい。
| セル１ | セル２ | セル３ |
| セル４ | セル５ | セル６ |
| セル７ | セル８ | セル９ |
横の行を表す<tr>でも以下の属性を指定することができます。
| align="left/center/right" | 内容の横の表示位置：左寄せ/センタリング/右寄せ |
| valign="top/center/bottom" | 内容の縦の表示位置：上寄せ/センタリング/下寄せ |
| bgcolor="color" | 背景の色 |
| babordercolor="color" | 罫線の色(Netscape Ver.3では非対応) |
| background="url" | 背景の画像(Netscape Ver.3では非対応) |
表２では<tr>の属性を指定してありません。表２の<tｒ>を上記の属性をいくつか使用して、１行目の<tr>を<tr align="center" valign="center" bgcolor="mintcream" bordercolor="blue">、２行目の<tr>を<tr align="right" valign="bottom" bgcolor="lavender" bordercolor="red">、３行目の<tr>を<tr align="left" valign="top" bgcolor="lavender" background="../images/background.jpg"> のように書き換えると、以下のように表示されます。いろいろ試してみて下さい。(NetscapeとInternet Explorerで属性の表示の仕方が若干違う場合もありますので注意してください。)
| セル１ | セル２ | セル３ |
| セル４ | セル５ | セル６ |
| セル７ | セル８ | セル９ |
セルを宣言する<td>では以下の属性を指定することができます。
| align="left/center/right" | 内容の横の表示位置：左寄せ/センタリング/右寄せ |
| valign="top/center/bottom" | 内容の縦の表示位置：上寄せ/センタリング/下寄せ |
| width="n/n%" | セルの幅（ピクセル数/ウィンドウサイズに対する比率） |
| height="n/n%" | セルの高さ（ピクセル数/ウィンドウサイズに対する比率） |
| bgcolor="color" | 背景の色 |
| babordercolor="color" | 罫線の色(Netscape Ver.3では非対応) |
| background="url" | 背景の画像(Netscape Ver.3では非対応) |
| nowrap | 内容の改行禁止 |
表２の<td>の属性を上記の属性を使って指定すると、行ごとではなく、セルごとに内容の表示位置や背景などを表４のように変えることができます。表４では、<td height="80">とセルの高さを指定し、さらにその他の属性をセルごとに変えてあります。いろいろ試してみて下さい。
| セル１ | セル２ | セル３ |
| セル４ | セル５ | セル６ |
| セル７ | セル８ | セル９ |
Project HTMLで表を使う必要はないかも知れませんが、<table>を利用すると、表現力が増すことが分かったと思います。例えば、次のようなレイアウトを作ることも可能です。
Just as one of his earliest published stories "The First Seven Years" suggests, it seems to me that the life of Bernard Malamud can best be divided by seven-year phases. The first seven years (1914-1921) is a pre-school formative period. The second (1922-1928) is an elementary school formative and early adolescent period, which ends with the graduation from P.S. 181 in Brooklyn and entering Erasmus Hall High School, meaning that his childhood is over. The third (1929-1935) starts with his mother's death and the beginning of the Great Depression, which must have affected the author tremendously in his view of life as a young would-be writer. Unlike Miriam or Helen Bober, he goes to City College of New York, then an institution for bright but poor students. The fourth (1936-1942) begins with the graduation from CCNY. He is now on his own and, like Frank Alpine, he has to work at odd jobs, later mostly teaching at evening high schools. Malamud, however, goes to graduate school of Columbia and the fourth phase ends with the M.A. in English from it. |
The fifth seven years (1943-1949) begins with a little rush of publications of his short stories in little magazines issued for young people anticipating the end of the War. But after the initial rush, he stops publishing in 1944. He knows that he is not ready yet. It is a period in which he has to learn the art of writing and work on it silently and stoically as a late beginner, perhaps a little like Sobel in "The First Seven Years". (Incidentally, Malamud is thirty in 1944 and Sobel is hired by the shoemaker Feld at the same age.) Besides, he marries Ann de Chiara and a son Paul is born. He now has a family to support teaching evening high school classes. This happy but hard time, however, will be soon over. He finds a new job at the end of the period. He will begin "a new life" in Corvallis, Oregon, as an instructor of Composition at Oregon State University, then called Oregon State College. With the beginning of the sixth seven years (1950-1956), he becomes a real writer. In the initial year of 1950, three stories appear in "real" magazines, including "The First Seven Years" in Commentary. His stories are published constantly in the following years; among them is the most famous one "The Magic Barrel" published in Partisan Review in 1954. |
上のレイアウトは単純で、１行２セルの表を以下のタグを使用して作っただけです：
|
<table align="center" border="0" width="90%" cellspacing="0" cellpadding="40" background="../images/background.jpg"> <tr> <td align="left" valign="top" width="50%"> セル１ </td> </tr> <tr> <td align="left" valign="top" width="50%"> セル２ </td> </tr> </table> |
「セル１」、に左の文章と画像、「セル２」に右側の文章が入ります。
表をHTMLで記述するのは大変な労力を要すると感じるかも知れませんが、「秀丸」の「コピー」と「張り付け」機能や「検索」の「置き換え」機能を使えば、以外と簡単にできます。このページは、ホームページを作るソフトを使用しないで、「秀丸」だけで作ってみました。