ＨＰ相談室 > HP作成講座 > テーブルを使ってみよう！1
| ►テーブルを使ってみよう！1 ココではテーブルに関することを説明します。
|
| ◆テーブルとは？
テーブルは表を作るタグです。けど、表を作ることによりも、ホームページのレイアウトに使われることが多いです。HP相談室にもたくさんのテーブルを使っています。ただ、あまり使いすぎるとページ表示が遅くなったりするので、使いすぎには注意が必要です。 |
| ◆テーブルの基本
もっとも簡単なテーブルを作って見ましょう。
これがもっとも簡単なテーブルです。変な枠が表示されました。 |
| ◆表を作る
表を作って見ましょう。まずは横2マスにしてみましょう。
コレをブラウザで表示すると下のように横2マスなります。
見ていただければ分かるとおり、<td>〜</td>を追加することで、横2マスになりました。もっと増やせば、３，４，５マスと増えていきます。 次は縦を2行にしてみましょう。
コレをブラウザで表示すれば、下のように縦に2行なります。
コレもまた、見れば分かるとおり、<tr>〜</tr>を追加することで縦に2行になりました。 それでは、上の2つを応用して３*3の表を作ってみましょう。
コレをブラウザで表示させれば、下のように３*３の表が完成します。
できましたでしょうか？<td>〜</td>で横のマスを増やすことができ、<tr>〜</tr>で行が増えるわけです。 |
| ◆見出しセル
見出しセルをつければ、表っぽくなります。 使い方は<td>〜</td>と同じです。
これをブラウザで表示させれば、下のように見出しのところが通常より大きくなります。
見れば分かるように、<th>〜</th>を<td>〜</td>と同じように使えば、見出しセルが作れます。 ◆マスを連結させる テーブルは無事作ることが出来ました、けど、連結させたいマスもありますよね。そういうときは、下のようにします。
これをブラウザで表示させれば、下のように連結できます。
さてさて、今回は少し難しいですよね。colspan="2"と言うのは右方向に２マス連結するということです。 次は縦方向に連結させてみましょう。
コレをブラウザで表示させれば、下のようになります。
横方向と似ていますね。rowspan="2"と言うのは縦方向に２マス連結するということです。 colspanが横、rowspanが縦です。 |
||||||||||||||||||||||||||
| ◆文字と回りの枠の間の空白を変える
中枠から文字までの間隔を広げたい、そんな時は下のようにしてください。
○の部分に数字を入力します。10でやってみます。
中枠から文字までの距離が広がりました。 |
| ◆表の大きさを変える
表の大きさを変えたい時もあると思います。表の大きさを変えるには2つのやり方があるので、頭に入れておきましょう。 %…開いているウィンドウを100%とした時にどれだけの大きさにするか。 ピクセル…ウィンドウの大きさに関係なく、大きさを固定する。 前者は、ウィンドウの大きさが変わると、表の大きさが変わります。後者はウィンドウを大きくしても小さくしても、表の大きさは変わりません。 では、大きさの変え方です。
○の部分に％なら○○％、ピクセルなら数字を入れてください。分かりにくいので、％指定とピクセル指定両方を実際に作って見ます。
例なので実際の大きさとは違いますので、実際に数値を変えていろいろやってみてください。 |
| ◆表の位置を変える
表の位置を変えたい時は、下のようにしてください。
実際にやってみます。
テーブルの位置が変わりました。ここで、注意して欲しいのが、左寄せにすると</table>より後に書いた文章が表の右側に、右寄せにすると、逆に文字が表の左側に入りこむと言うことです。
文字が入りこむのを回避するには、</table>の後に<br>を何個か付け加えて、改行を行って回避するか、<table align="left">とは書かずに、<div align="left"><table>・・・</table></div>と言う風にするかどちらかで回避してください。 |