1．テーブル（表）の基本
<table>〜</table>：テーブルの基本タグ（枠なし）
<table border>〜</table>：テーブルの基本タグ（枠あり）
<td>〜</td>：セルを作る
<tr>〜</tr>：列を定義する
テーブルを使うためには、まず、「テーブルを使いますよ」と宣言しなくてはなりません。そのために<table>〜</table>タグでテーブルを宣言します。ちなみに、<table>〜</table>は、枠なし。<table border>〜</table>は枠ありの表になります。詳しくはサンプルで比較して見て下さい。
次に、テーブル（表）の内容を作成します。テーブルの内容は<table>〜</table>タグの間に作成し、そこで使われるのが<td>〜</td>タグと<tr>〜</tr>タグです。これらのタグは少し説明しづらいので、一応説明はしますが、後で実際にいろいろと試して理解することをおすすめします。まず、<td>〜</td>で挟まれた部分が、一つのセルとなります。それを幾つか作成するとそれらは、横に並べられますので、それはを<tr>〜</tr>タグで挟みます。すると、それらが横一列として定義され一つの行が作成されます。これを繰り返し、幾つかの行を作っていくというわけです。では、サンプルを見てみましょう。
<html>
<head>
</head>
<body>
<table>
<tr><td>鹿島</td><td>磐田</td></tr>
<tr><td>市原</td><td>名古屋</td></tr>
</table>
<p>
<table border>
<tr><td>鹿島</td><td>磐田</td></tr>
<tr><td>市原</td><td>名古屋</td></tr>
</table>
</body>
</html>
|
⇒サンプル |
|
2．表の位置を指定する
<table align="*">〜</table>
<table align="*">〜</table>タグを使うと表の位置を右か左に指定することができます。
*には、left,right を指定。
<html>
<head>
</head>
<body>
<table border align="left">
<tr><td>巨人</td><td>ヤクルト</td></tr>
<tr><td>大洋</td><td>中日</td></tr>
</table>
あっ、横浜だった･･･
<br>
<br>
<br>
<table border align="right">
<tr><td>巨人</td><td>ヤクルト</td></tr>
<tr><td>横浜</td><td>中日</td></tr>
</table>
修正完了⇒
</body>
</html>
|
⇒サンプル |
|
3．表に見だしをつける
<th>〜</th>
<th>〜</th>タグを使うことによって、表に見出しをつけることができます。
使い方については、サンプルを参照にして見て下さい。
<html>
<head>
</head>
<body>
<table border>
<tr><th>順位</th><th>チーム</th></tr>
<tr><td>1</td><td>鹿島</td></tr>
</table>
<p>
<table border>
<tr><th>順位</th><td>1</td></tr>
<tr><th>チーム</th><td>鹿島</td></tr>
</table>
<p>
<table border>
<tr><th></th><th>鹿島</th><th>磐田</th></tr>
<tr><th>鹿島</th><td>＼</td><td>○</td></tr>
<tr><th>磐田</th><td>×</td><td>＼</td></tr>
</table>
</body>
</html>
|
⇒サンプル |
|
4．タイトルをつける
<caption align="*">〜</caption>
上記のタグを使うことによって、テーブルにタイトルをつけることが出来ます。
*には top,bottom のいづれかを指定。
<html>
<head>
</head>
<body>
<table border>
<caption align="top">勝敗表（希望）</caption>
<tr><th></th><th>鹿島</th><th>磐田</th></tr>
<tr><th>鹿島</th><td>＼</td><td>○</td></tr>
<tr><th>磐田</th><td>×</td><td>＼</td></tr>
</table>
<p>
<table border>
<caption align="bottom">勝敗表（予定）</caption>
<tr><th></th><th>鹿島</th><th>磐田</th></tr>
<tr><th>鹿島</th><td>＼</td><td>○</td></tr>
<tr><th>磐田</th><td>×</td><td>＼</td></tr>
</table>
</body>
</html>
|
⇒サンプル |
|
5．セルの縦幅を指定
<td rowspan="*">〜</td>：通常
<th rowspan="*">〜</th>：見だし
上記のタグを使うことによってセルの縦幅を指定することが出来ます。
このタグは、とてもよく使うタグなので覚えておくことをおすすめします。
*には 縦の行数を指定。
<html>
<head>
</head>
<body>
<table border>
<tr><th rowspan="4">H組</th><td>日本</td></tr>
<tr><td>ベルギー</td></tr>
<tr><td>ロシア</td></tr>
<tr><td>チュニジア</td></tr>
</table>
<p>
<table border>
<tr><td rowspan="4">H組</td><td>日本</td></tr>
<tr><td>ベルギー</td></tr>
<tr><td>ロシア</td></tr>
<tr><td>チュニジア</td></tr>
</table>
</body>
</html>
|
⇒サンプル |
|
６．セルの横幅を指定
<td colspan="*">〜</td>：通常
<th colspan="*">〜</th>：見だし
上記のタグを使うことによってセルの横幅を指定することが出来ます。
このタグも、とてもよく使うタグなので覚えておくことをおすすめします。
*には 横の列数を指定。
<html>
<head>
</head>
<body>
<table border>
<tr><th colspan="4">H組</th></tr>
<tr><td>日本</td><td>ベルギー</td>
<td>ロシア</td><td>チュニジア</td></tr>
</table>
<p>
<table border>
<tr><td colspan="4">H組</td></tr>
<tr><td>日本</td><td>ベルギー</td>
<td>ロシア</td><td>チュニジア</td></tr>
</table>
</body>
</html>
|
⇒サンプル |
|
7．表の大きさを指定
<table width="*" height="〇" >〜</table>
上記のタグをつかうことによって、表の大きさを指定することが出来ます。
ここでは、ピクセル指定とパーセント指定が出来ますが、ピクセル指定の場合、画面の設定によって、表示のされ方が変わってしまうので、パーセント指定をしておく方がいいかもしれません。
*には、横幅を指定（ピクセル数 or ％）
〇には、縦幅を指定（ピクセル数 or ％）
<html>
<head>
</head>
<body>
<table border width="70%" height="50%">
<tr><td>ショーシャンクの空に</td>
<td>ライフイズビューティフル</td></tr>
<tr><td>グッドウィルハンティング</td>
<td>セブン</td></tr>
</table>
<p>
<table border width="200" height="50">
<tr><td>ショーシャンクの空に</td>
<td>ライフイズビューティフル</td></tr>
<tr><td>グッドウィルハンティング</td>
<td>セブン</td></tr>
</table>
</body>
</html>
|
⇒サンプル |
|
8．枠の太さ・マージンを指定
<table * >〜</table>
上記のタグをつかうことによって、枠の太さ・マージンを指定することが出来ます。
*には、border="枠の太さ"
cellspacing="セルの枠の太さ"
cellpadding="表中のテキストのマージン"
<html>
<head>
</head>
<body>
<table border>
<caption align="top">デフォルト</caption>
<tr><td>鹿島</td><td>磐田</td></tr>
<tr><td>市原</td><td>名古屋</td></tr>
</table>
<p>
<table border="10">
<caption>border="10"</caption>
<tr><td>鹿島</td><td>磐田</td></tr>
<tr><td>市原</td><td>名古屋</td></tr>
</table>
<p>
<table cellspacing="10" border >
<caption>cellspacing="10"</caption>
<tr><td>鹿島</td><td>磐田</td></tr>
<tr><td>市原</td><td>名古屋</td></tr>
</table>
<p>
<table cellpadding="10" border >
<caption>cellpadding="10"</caption>
<tr><td>鹿島</td><td>磐田</td></tr>
<tr><td>市原</td><td>名古屋</td></tr>
</table>
</body>
</html>
|
⇒サンプル |
|
9．外枠をを指定
<table border frame="*" >〜</table>
上記のタグをつかうことによって、表の外枠を指定することが出来ます。
ちなみに、ネットスケープでは表示されないのでご注意を!!
*には、void：外枠なし
above：上部の枠のみ
below：下部の枠のみ
lhs：左側の枠のみ
rhs：右側の枠のみ
hsides：上下の枠のみ
vsides：左右の枠のみ
<html>
<head>
</head>
<body>
<table border frame="void">
<caption align="top">void</caption>
<tr><td>鹿島</td><td>磐田</td></tr>
<tr><td>市原</td><td>名古屋</td></tr>
</table>
<p>
<table border frame="above">
<caption>above</caption>
<tr><td>鹿島</td><td>磐田</td></tr>
<tr><td>市原</td><td>名古屋</td></tr>
</table>
<p>
<table border frame="below" >
<caption>below</caption>
<tr><td>鹿島</td><td>磐田</td></tr>
<tr><td>市原</td><td>名古屋</td></tr>
</table>
<p>
<table border frame="lhs" >
<caption>lhs</caption>
<tr><td>鹿島</td><td>磐田</td></tr>
<tr><td>市原</td><td>名古屋</td></tr>
</table>
<p>
<table border frame="rhs">
<caption>rhs</caption>
<tr><td>鹿島</td><td>磐田</td></tr>
<tr><td>市原</td><td>名古屋</td></tr>
</table>
<p>
<table border frame="hsides" >
<caption>hsides</caption>
<tr><td>鹿島</td><td>磐田</td></tr>
<tr><td>市原</td><td>名古屋</td></tr>
</table>
<p>
<table border frame="vsides" >
<caption>vsides</caption>
<tr><td>鹿島</td><td>磐田</td></tr>
<tr><td>市原</td><td>名古屋</td></tr>
</table>
</body>
</html>
|
⇒サンプル |
|
10．内枠を指定
<table rules="*" >〜</table>
上記のタグをつかうことによって、表の内枠を指定することが出来ます。
これも、ネットスケープでは表示されないので注意してください。
*には、none：内枠なし
rows：行間の内枠のみ
cols：列間の内枠のみ
<html>
<head>
</head>
<body>
<table rules="none"r>
<caption align="top">none</caption>
<tr><td>鹿島</td><td>磐田</td></tr>
<tr><td>市原</td><td>名古屋</td></tr>
</table>
<p>
<table rules="rows">
<caption>rows</caption>
<tr><td>鹿島</td><td>磐田</td></tr>
<tr><td>市原</td><td>名古屋</td></tr>
</table>
<p>
<table rules="cols" >
<caption>cols</caption>
<tr><td>鹿島</td><td>磐田</td></tr>
<tr><td>市原</td><td>名古屋</td></tr>
</table>
</body>
</html>
|
⇒サンプル |
|
11．枠の色を指定
<tableborder bordercolor="*">〜</table>
<table border bordercolight="*" bordercolordark="*">〜</table>
<table border bordercolor="*">タグで、表の枠全体の色を指定できます。
<table border bordercolight="*" bordercolordark="*">タグで枠の陰陽別に色を指定できます。
*には１６進数による色指定をするか、直接色指定をします。くわしくは、こちらを参照。
<html>
<head>
</head>
<body>
<table border="10" bordercolor="#006400">
<caption>ダークグリーン</caption>
<tr><td>巨人</td><td>ヤクルト</td></tr>
<tr><td>横浜</td><td>中日</td></tr>
</table>
<br>
<br>
<br>
<table border="10" bordercolorlight="#00ffff"
bordercolordark="#0000ff">
<caption>アクアとブルー</caption>
<tr><td>巨人</td><td>ヤクルト</td></tr>
<tr><td>横浜</td><td>中日</td></tr>
</table>
</body>
</html>
|
⇒サンプル |
|
12．テキストの位置を指定
<tr align="*" valign="☆">〜</tr>：列全体のテキストの位置を指定
<th align="*" valign="☆">〜</th>：見出しのテキストの位置を指定
<td align="*" valign="☆">〜</td>：セルのテキストの位置を指定
上記のタグを使うことで、テーブルないのテキストの位置を指定することができます。
align="*"は、水平方向、valign="☆"は、垂直方向の指定です。
指定しない場合は、水平方向は左より（left）に、垂直方向は真ん中（middle）に表示されます。
*には、left,center,right を指定。
☆には、top,middle,bottom を指定。
<html>
<head>
</head>
<body>
<table border width="30%" height="30%">
<tr>
<th align="center" valign="top">J1</th>
<th align="left" valign="bottom">J2</td></tr>
<tr align="left" valign="middle">
<td>鹿島</td><td>京都</td></tr>
<tr>
<td align="right" valign="bottom">名古屋</td>
<td align="rignt" valign="top">新潟</td></tr>
</table>
</body>
</html>
|
⇒サンプル |
|
13．背景に色をつける
<td bgcolor="*">〜</td>
<td bgcolor="*">〜</td>タグを使うとセルに背景色をつけることができます。
*には１６進数による色指定をするか、直接色指定をします。くわしくは、こちらを参照。
<html>
<head>
</head>
<body>
<table border width="50%" height="50%">
<tr>
<td bgcolor="#ff8c00">巨人</td>
<td bgcolor="#0000ff">ヤクルト</td>
<td bgcolor="gray">阪神</td>
</tr>
</table>
</body>
</html>
|
⇒サンプル |
|
14．背景画像をつける
<table background="*">〜</table>
<td background="*">〜</td>
<th background="*">〜</th>
上記のタグを使うことによって背景画像を指定することができます。
*には画像のファイル名（URL）を指定します。
<html>
<head>
</head>
<body>
<table border width="80%" height="80%">
<tr>
<th background="ajax.gif">アヤックス</td>
<td background="note.gif">
アヤックスが好きなのです。フェイエノールトよりも…</td>
</tr>
</table>
</body>
</html>
|
⇒サンプル |
|