STEP9 : テーブルを使う さて今回は、テーブルを使ったページを作ってみましょう。
テーブルというのは枠を繋げて表を作るものです。
こんな風に縦横好きなだけ増やしていけます。
| 1 | 2 | 3 |
| 4 | 5 | 6 |
このマス１つ１つのことをセルといいます。
このサイトでも多用しているのにお気づきでしょうか？
実はこのページ全体もテーブルを用いて書いてあります。
枠を表示させないようにすると、文章や画像をうまく配置する仕切りとしても使えるので、レイアウトを整えるのにとても便利です。
このコーナーの目次のように項目を整理するのにとても便利ですし、装飾にも活用できると思いますのでぜひ使ってみてください＾＾
まずは全体を<table> 〜</table> タグで囲みます。
そしてその間に<td>〜</td>タグで1マスずつ作っていきます。
上の例で番号をつけたように、左から右へと増えていき、次の段にいくときにtrタグを使います。 文章の改行のbrと同じような感じですね＾＾
また、テーブルの枠の太さをtableタグの中でborder属性を指定します。
| <table border="値"> |
値には0から7の数字をいれ、小さいほど細く0で枠なしになります。
2×2マスで枠の太さ１の表を作るなら次のようになります。
| 書き方 | 見え方 | ||||
|
<table border="1"> <td> 1-1</td> <td> 1-2</td> <tr> <td> 2-1</td> <td> 2-2</td> </table> |
|
さらにtableタグの中やtdタグの中に属性を加えていくことで、いろいろと見た目を変えることができます。
それぞれの使用例と一緒に紹介していきます。
9-1 テーブルの大きさセルの大きさを指定する。テーブルは特に大きさを指定しない場合、セル内の文章の量に応じて自動的に調整されます。
しかしテーブル全体の大きさを指定したいのならtableタグ内に、
セルの大きさを指定するならtdタグ内に、次の属性を付け加えます。
| 横の長さを指定 width="値" 縦の長さを指定 height="値" |
値はピクセルでも、ウィンドウに対する%でもどちらでもOKです。
(テーブルの中にテーブルを作る場合、%はテーブルを入れるセルに対する割合になります。)
| セルの大きさをピクセルで指定 | テーブルの大きさを%で指定 | |||||
| 書 き 方 |
<table border="1" > <td width="20" height="50">1</td> <td width="30" height="50">2</td> </table> |
<table border="1" width="50%" height="20%"> <td>1</td> <td>2</td> </table> | ||||
| 見 え 方 |
|
|
9-2 枠の色を指定するテーブルの枠の色を指定するにはtableタグ内に、bordercolor属性を書き足します。
| bordercolor="値" |
値にはこれまでと同じで、blue等のカラーネームか#0000ff等のカラーコードを入れます。
カラーコードの一覧はこちら
テーブルの枠の色を青にするには次のように書きます。
| 書き方 | 見え方 | ||
| <table border="1" bordercolor="blue"> <td width="20" height="50">1</td> <td width="20" height="50">2</td> </table> |
|
9-3 テーブルの背景を指定するテーブル全体の背景色を指定するにはtableタグ内にbgcolor属性を加えます。
| bgcolor="値" |
値はいつも通り、カラーネームでもカラーコードでも構いません。
テーブルの背景を青くするには次のように書きます。
| 書き方 | 見え方 | ||
| <table border="1" bgcolor="blue"> <td width="20" height="50">1</td> <td width="20" height="50">2</td> </table> |
|
また、ページの壁紙と同じようにしてテーブルの背景にも壁紙を設定することができます。
ページの背景と同じように、tableタグ内にbackground属性を加えます。
| background="壁紙ファイルのアドレス" |
この画像をテーブルの背景に設定するには次のように書きます。| 書き方 | 見え方 | ||
| <table border="1" background="image/tex2_bl.gif"> <td width="50" height="50">1</td> <td width="50" height="50">2</td> </table> |
|
9-4 セルの中の文字の位置を指定する。セルの中でデフォルトでは文字は左上詰めで表示されていきますが、これを変更したい場合はtdタグ内に次の属性を指定します。
|
横方向の指定 align="値" 値はそれぞれ、左詰め=left 中央=center 右詰=right 縦方向の指定 valign="値" 値はそれぞれ、上詰め=top 中央=middle 下詰め=bottom |
文字の場所を指定したいセルについて次のように書きます。
| 書き方 | 見え方 | ||
| <table border="1"> <td align="center" valign="top" width="100" height="100">1-中央上</td> <td align="right" valign="bottom" width="100" height="100">2-右下</td> </table> |
|
9-5 行・段にまたがったセル１つセルを複数行（段）にまたがって表示します。いくつかのセルを合体させた大きなセルを作ります。
tdタグ内に次の属性を加えてください。
| 横方向にまたがって表示 colspan="値" 縦方向にまたがって表示 rowspan="値" |
値はそれぞれまたがって表示したい行・段数を入れます。
特に縦にまたがったセルを作った時に、他のセルの書き方に戸惑うかもしれませんが、次の段に行くときに<tr>タグを使うということを意識してがんばってください＾＾
横2マスにわたって表示する場合と、縦2マスにわたって表示する場合はそれぞれ次のように書きます。
| 書き方 | 見え方 | ||||||
| <table border="1"> <table border="1"> <td colspan="2">横２つ</td> <td>1</td> <tr> <td>2</td> <td>3</td> <td>4</td> </table> |
| ||||||
| <table border="1"> <td rowspan="2">縦２つ</td> <td>1</td> <tr> <td>2</td> <tr> <td>3</td> <td>4</td> </table> |
| ||||||
9-6 枠と文字の間隔を指定する。枠と文字の間隔を変えたい場合は、tableタグ内にcellpadding属性を加えます。
| cellpadding="値" |
値はピクセルで指定します。
また、1にすると指定なしと同じになります。
枠と文字の間隔を10ピクセルにするには次にように書きます。
| 書き方 | 見え方 | ||
| <table border="1" cellpadding="10"> <td>これで</td> <td>10ピクセルです</td> </table> |
|
9-7 レイアウトを整える枠をゼロにして見えないようにしページを区切ることで、文章や画像、カウンター等を思い通りの場所に配置することができます。
画像の横に文章を書くと一行しか表示できませんが、これをテーブルを使うと次のように表せます。
| 書き方 | 見え方 | ||
|
<table border="0"> <td><img src="image/sky105.jpg"></td> <td align="center">画像の横にも<br> 複数行の文章を<br> 書くことができます。</td></table> |
|
