|
|
| テーブルタグのマスター |
1.テーブルタグってどんなの？
テーブルタグとは、表のようにデータを整理したり、
写真や、文字のレイアウトに使ったりと、
とても重要なタグのひとつです。
なのでこれはマスターしておきましょう!!
2.どんなものか見てみる。
こんな感じの表になります。
3.実際に打ち込んで見ましょう。
<table border="1">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
と打ち込んで見てください。
そして４つある<td></td>の間に
それぞれ好きな文字を入れてみて下さい。
どうですか?表が出来ましたか？
おそらくこのようなものが出来たと思います。
これが出来ていればまずは、合格です。
4.上のタグの意味を解説します。
まず、<table border="1"></table>は
これからテーブルを作りますよ。という意味です。
必ず必要です。
そしてその中にあるborder="1"は
線の太さを指定しています。
もちろん数字が大きくなればなるほど
線もどんどん太くなっていきます。
次に<tr></tr>は行を指定しています。
<tr></tr>の数を増やせば
増やすほど行の数は増えていきます。
次に<td></td>は列を指定しています。
<td></td>の数を増やせば
増やすほど行の数は増えていきます。
これがテーブルタグの基本です。
次はそのテーブルタグを色々カスタマイズしていきます。
|
| テーブルタグのカスタマイズ |
1.テーブルの背景を変更する。
2.セルの背景を変更する。
3.テーブルや、セルの大きさをカスタマイズする。
4.セルの中の字や絵の場所を決める。
5.テーブルのラインの色、太さを決める。
6.セルを結合する。
7.セルの中の余白、枠の幅を決める。
8.テーブルにタイトルをつける。
以上を項目ごとに次で説明していきます。
|
| 項目説明 |
1.テーブルの背景を変更する。
<table bgcolor="○">
○の部分に色の指定をします。
2.セルの背景を変更する。
<td bgcolor="○">
○の部分に色の指定をします。
3.テーブルや、セルの大きさをカスタマイズする。
・縦の大きさを決める。
<table height="○">
<td height="○">
それぞれ○の部分に大きさを数字で入れます。
ちなみに上のどんなものか見てみるのテーブルの
縦の大きさは、50です。(単位はピクセルです。)
・横の大きさを決める。
<table width="○">
<td width="○">
それぞれ○の部分に大きさを数字で入れます。
ちなみに上のどんなものか見てみるのテーブルの
縦の大きさは、50です。(単位はピクセルです。)
4.セルの中の字や絵の場所を決める。
・縦の位置を決める
<td align="○">
○に上揃えならtop
中央揃えならmiddle
下揃えならbottom
・横の位置を決める
<td valign="○">
○に左揃えならleft
中央揃えならcenter
右揃えならright
5.テーブルのラインの色、太さを決める。
・ラインの色を決める
<table bordercolor="○">
○の部分に色の指定をします。
・ラインの太さを決める。
<table border="○">
○の部分に太さの数字の指定をします。
6.セルを結合する。
・縦に結合する。
<td rowspan="○">
○の部分にいくつのセルを結合するかを数字で入れます。
・横に結合する。
<td colspan="○">
○の部分にいくつのセルを結合するかを数字で入れます。
7.セルの中の余白、枠の幅を決める。
・枠とテキストや画像の間の余白を決める。
<table cellpadding="○">
○の部分にピクセルで数字を入れます。
・セルとセルの間の距離を決める。
<table cellspacing="○">
○の部分にピクセルで数字を入れます。
8.テーブルにタイトルをつける。
<table>のすぐ下に
<caption align="○">★</caption>
テーブルの上にタイトルを表示するならtop
テーブルの下にタイトルを表示するならbottom
★にテーブルのタイトルを入れます。
|
|
広告スペース
|
|
|
|
|
|
|
