<table> tagについて (11/13/2000)
Back to: Comp Home
テーブル(表)は、<table>、<tr>、<td>の3種類のタグを使うことによって作成できます。ひとつのテーブル全体を<table>と</table>が囲み、横一行ごとを<tr>と</tr>、セル(表のマス)ひとつごとを<td>と</td>で囲みます。 <td>と</td>の中にそれぞれのセルの内容(文字や他のタグ)を記述していきます。 <table> <tr> <td>セル1</td> <td>セル2</td> <td>セル3</td> </tr> <tr> <td>セル4</td> <td>セル5</td> <td>セル6</td> </tr> <tr> <td>セル7</td> <td>セル8</td> <td>セル9</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">タグを使って書かれています。)
最初の表を表すHTMLの最初の行<table>を上記の属性をいくつか使用して <table align="center" border="5" cellspacing="10" cellpadding="5" width="80%" height="240" bgcolor="skyblue"> のように書き換えると、以下のように表示されます。いろいろ試してみて下さい。
横の行を表す<tr>でも以下の属性を指定することができます。
表2では<tr>の属性を指定してありません。表2の<tr>を上記の属性をいくつか使用して、1行目の<tr>を<tr align="center" valign="center" bgcolor="mintcream" bordercolor="blue">、2行目の<tr>を<tr align="right" valign="bottom" bgcolor="lavender" bordercolor="red">、3行目の<tr>を<tr align="left" valign="top" bgcolor="lavender" background="../images/background.jpg"> のように書き換えると、以下のように表示されます。いろいろ試してみて下さい。(NetscapeとInternet Explorerで属性の表示の仕方が若干違う場合もありますので注意してください。)
セルを宣言する<td>では以下の属性を指定することができます。
表2の<td>の属性を上記の属性を使って指定すると、行ごとではなく、セルごとに内容の表示位置や背景などを表4のように変えることができます。表4では、<td height="80">とセルの高さを指定し、さらにその他の属性をセルごとに変えてあります。いろいろ試してみて下さい。
Project HTMLで表を使う必要はないかも知れませんが、<table>を利用すると、表現力が増すことが分かったと思います。例えば、次のようなレイアウトを作ることも可能です。
上のレイアウトは単純で、1行2セルの表を以下のタグを使用して作っただけです:
「セル1」、に左の文章と画像、「セル2」に右側の文章が入ります。 表をHTMLで記述するのは大変な労力を要すると感じるかも知れませんが、「秀丸」の「コピー」と「張り付け」機能や「検索」の「置き換え」機能を使えば、以外と簡単にできます。このページは、ホームページを作るソフトを使用しないで、「秀丸」だけで作ってみました。 |