|
|
●「テーブル」を使おう ●「テーブル」の決まりごと ●作ってみよう ●文字や画像の配置を変えてみよう。 ●色をつけてみよう ●複雑なテーブル |
 |
 |
ゴン太の紹介ページを作って、彼女を募集したいの。さっき描いたスケッチみたいなレイアウトにしたいんだけど・・・。
|
 |
「テーブル」を使えば簡単だよ！ |
|
「テーブル」ってあのご飯を食べる・・・？ |
|
ちがうちがう。（笑）「表組」のことだよ。
|
|
テーブルとは、「表組」のことを言います。手書きの場合でもそうですが、「表組」を使ったほうが、整理されて見やすいですよね。またホームページではいわゆる数値が書き込まれて入るような「表組」だけではなく、レイアウトをカッコ良くするために用いることも多いです。 |
 |
|
でも「表組」作るなんて難しそうだなぁ。 |
|
ちょっとややこしいかもしれないけど、これが出来ればあとはそんなに覚えることはないから、頑張って！！
|
|
テーブルのタグは<table>が基本です。 <table>〜</table>で囲みます。テーブルの中にあるマス目のことを「セル」といいます。「セル」が横に並ぶと「行」になり、行が縦に「列」をなして、「表組」を形成します。「セル」には 「見出しセル<th>〜</th>」と「データセル<td>〜</td>」の2種類があります。「見出しセル」に書き込まれた文字は自然に太字 （ボールド）になります。「<tr>〜</tr>」タグで挟み込んだセルが1行になります。 |
|
|
|
「セル」とか、なんか聞き慣れない名前が・・・ |
|
「セル」って名前が付いているけれど、結局は単なる「マス目」だから、気にしない、気にしない。 |
|
では、実際に基本のテーブルのタグを書いてみましょう。 |
|
<table> |
| 左の見出し | 右の見出し |
|---|---|
| 左上のセル | 右上のセル |
| 左下のセル | 右下のセル |
|
なんかこのままじゃ、表って感じがしないねぇ。 |
|
そうだね、枠をつけてみようか。 |
|
枠をつけるときは、<table>のタグの中に「border（表の周囲の枠と太さ）」、「cellspacing（表の枠線の太さ）」、「cellpadding（枠線の文字との距離）」を書き込むことで更に細かい表のデザインが指定できます。太さや、距離の単位ははピクセルです。 |
|
<table border=8> |
| 左上のセル | 右上のセル |
| 左下のセル | 右下のセル |
| 左上のセル | 右上のセル |
| 左下のセル | 右下のセル |
| 左上のセル | 右上のセル |
| 左下のセル | 右下のセル |
| 左上のセル | 右上のセル |
| 左下のセル | 右下のセル |
|
テーブルの大きさってどうすればいいの？ |
|
ピクセル数でも指定できるし、ウインドウの大きさに対する比率（%）でもテーブルの大きさは指定できるんだよ。 |
|
表全体の大きさを変える場合、<table>のタグの中に「width（幅） 」と「height（高さ）」を書き込むことで、「ピクセル単位」、またはブラウザウインドウの大きさに対する比率として「％単位」で指定することができます。この指定をしない場合、表の大きさはセルの中の文字列の長さや、画像の大きさに合わせて自動的に決まります。 セルの大きさを指定したい場合は<td>タグの中に「width」や「height」を入れることで同様に変更することができます。 |
|
表全体の幅が400ピクセルで、高さが150ピクセルの表<br> |
| 左上のセル | 右上のセル |
| 左下のセル | 右下のセル |
| 左上のセル | 右上のセル |
| 左下のセル | 右下のセル |
| 左上のセル | 右上のセル |
| 左下のセル | 右下のセル |
| 左上のセル | 右上のセル |
| 左下のセル | 右下のセル |
|
ゴン太のにがお絵を入れるところと、名前と、紹介文と、「彼女募集中！」って大きく書く欄が必要だから・・・セルは４つ作ればイイんだね。 |
|
うん。画像を入れる場合は、今まで文字を入れていた所に
<img>のタグを入れるだけだよ。 |
|
<html> |
|
|
|
「ゴン太」って字を真ん中に置きたいなぁ。 |
|
セル内の文字の配置や、画像の配置もタグで指定出来るよ。 |
|
セル内の文字や画像の位置は<th>や<td>タグ内に「algin=」を書き込みます。左に寄せたい時は「algin="left"」、中央に置きたいときは 「algin="center"」、右に寄せたいときは「algin="right"」と指定しましょう。 位置を指定する時に「align=」を先ほどから良く使っていることに気が付きましたか？いままでも「align=」のタグで色々な位置の指定をしてきましたが、これもその応用です。位置を指定するタグがセルを指定するタグの中に入っているだけのことなのです。 |
|
<table border width=400> |
| 左 | 中央 | 右 |
|---|---|---|
| セル内で左寄せ | セル内の中央置き | セル内で右寄せ |
|
こんな感じかな？？ |
|
<html> |
|
|
|
表の中でも位置の指定とかできるってことは、表にも色を付けられるんじゃない？ |
|
おおっ、余裕の発言だね。（笑）そうだよ、色も付けられるよ。 |
|
セルの背景色を指定するときは、<th>や<td>のタグの中に「bgcolor=」を指定します。これは<body>で指定したときと全く同じですね。テーブル全体の枠の色、セルごとの枠の色を指定する際は「bordercolor=」を指定します。色をテーブル全体の枠に適用したいときは<table>タグの中へ、セルごとの枠に適用したいときは<tr>の中へ書き込みます。表の背景に画像ファイルを張り込む場合は「background=」を、表全体の背景にしたいときは<table>に、セル一つ一つの背景にしたいときは<th>または<td>のタグの中に書き込みます。 |
|
色つきのセル<br> |
| 左の見出し | 右の見出し |
|---|---|
| 左上のセル | 右上のセル |
| 左下のセル | 右下のセル |
| 左の見出し | 右の見出し |
|---|---|
| 左上のセル | 右上のセル |
| 左下のセル | 右下のセル |
| 左の見出し | 右の見出し |
|---|---|
| 左上のセル | 右上のセル |
| 左下のセル | 右下のセル |
|
じゃあさっそく色を付けてみようかな？ |
|
<html> |
|
|
|
最初に書いたスケッチみたいにレイアウトはできないの？ |
|
じゃあ、「セルの統合」を覚えよう。
|
|
セルを縦や横で統合するには<th><td>タグの中に「rowspan=」「colspan=」という指示を書き込み、横に隣り合わせに並ぶセルをつなげてひとつの幅の広いセルにしたり、縦に隣り合わせに並ぶセルをつなげて1つの縦に長いセルにしたりします。縦方向のセルを統合するときは、「rowspan=ひとまとめにするセルの個数（数字）」、横方向のセルを統合するときは「colspan=ひとまとめにするセルの個数（数字）」でセルの統合をします。 頭の中でセルの統合をイメージするのは難しいですから、紙に描いてみてから指定をすると簡単です。 |
|
<table width="90%" border="1"> |
|
私の大切なモノ
|
||
| 毎日欠かせない | 音楽 | |
| 金庫にしまいたい | 日記帳 | |
| 一億円でも売りたくない | 彼からもらった指輪 | |
| こういう人になりたい | オトコノコ | ジュンジくん |
| オンナノコ | ミキちゃん | |
|
これでスケッチ通りのページを作れるね！ |
|
テーブルは難しいけど、これさえ覚えればレイアウトにとっても便利だね。 |
|
<html> |
| ※よくわからない人は「5.いよいよ作ってみよう」の時と同じ要領で、上のノリコの書いたHTMLをコピーして「ワープロソフト」にペーストし、内容を自分に合わせて書き換えてみましょう。 わかってきた人は、ノリコの例を参考に、自分でHTMLを打ってみましょう。 |
|
カッコ良くなったね！ゴン太もこれでモテるようになるかな？ |
|
それは何とも言えないなあ。（笑） |
 |
 |
