■テーブル ３
| ☆テーブル☆ | ☆タグ講座☆ | ☆文字位置☆ |
|---|---|---|
|
中央
|
中央 | 中央 |
|
右寄せ
|
中央 | この文字は左寄せ |
テーブルNO2の 見出しを作ろう で、説明した < TH > タグと
ALIGN=LEFT・RIGHT・CENTER を使っています。
ALIGN=LEFT・CENTER・RIGHTを指定すると
文字がセルの中でそれぞれ左・中央・右寄せで表示されます。
< TR align=center > にすると、
その行にあるセルの文字は全て中央に表示されます。
< TD align=center > だと
そのセルの文字だけが中央に表示されます。
☆ 注 ☆
テーブルのサイズを指定していないと
列は文字が一番長いセルにあわせて表示されます
つまり 左に寄せていても 文字が長いので
セルいっぱいになっていますね。
下の位置に表示されてます
分かりづらいですね</TD><TD VALIGN=bottom>これも下</TD></TR></TABLE>
| この行のセルの文字は、全て上の位置に表示されます。 | 上の位置です | ここも上 |
|---|---|---|
|
ここは中
|
このセルの文字は 下の位置に表示されてます 分かりづらいですね | これも下 |
↑で、説明したように、セル幅を決めていないので
セルは、文字数の多いものに合わせて、広がっています。
文字位置 １は、横方向でしたが
今度は縦方向の位置を指定します。
valign= top でセルの上位置に表示
valign= middle は中央に
valign= bottom は下位置です。
| Width=200px | Width=200px |
|---|---|
| 3 | 4 |
TABLE WIDTH=○pxで、全体の長さを入れます
＜TD＞で指定したい幅をいれます。
左に＜300px＞とすれば、右は＜100px＞となります。
px で幅を決めて下さいね
★ 見本 ★
↓のテーブルのタグは上と同じもので、幅指定していません。
文字が多いと、セルは文字にあわせた大きさになります。
| 文字が多いと、セルは文字に合わせた大きさになりますよ。 | 2 |
| 3 | 4 |
・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:
これを、文字でセルの長さが変わらないように
TD WIDTH=200pxでセルの幅を決めてみます。
これでセルの幅は同じになります。
| 文字が多いセルは文字に合わせたサイズになります | 2 |
| 3 | 4 |
| セル1 | セル 2 |
|---|---|
| 3 | 4 |
HEIGHT=100pxでテーブルの高さを指定しています。
Cell 1
| A | B |
|---|---|
| C | D |
Cell 2
Cell 3
4
5
6
↑のタグに幅・高さを入れて表示してみます。
よく見て、ご自分で勉強してください。
★ 見本 ☆
Cell 1
| A | B |
|---|---|
| C | D |
Cell2
Cell 3
Cell4
Cell5
Cell6
<TABLE BORDER width="150px" HEIGHT="150px"><TR HEIGHT="100px"> <TD width="50px"> Cell 1<TABLE BORDER width="40px" HEIGHT=70px"><TR HEIGHT="35px"><TD width="20px">A</TD><TD width="20px">B</TD></TR><TR HEIGHT="35px"><TD>C</TD><TD>D</TD></TR></TABLE> </TD> <TD width="50px">Cell2</TD><TD width="50px">Cell 3 <TR HEIGHT="50px"><TD>Cell4</TD><TD>Cell5</TD><TD>Cell6</TD></TR></TABLE>
すこし複雑な感じがしますが
要するに < TD > と < /TD > の中に
テーブルタグを入れるだけ！！簡単ですよ～☆
☆cellpadding & cellspacing ☆ でも
テーブルの中にテーブルを組み込んでいます。
● おまけ ●
☆cellpadding & cellspacing ☆で使ったテーブルinテーブルのタグです。
と同じですが、セルが多くなった時の色付けです。
★ 見本1 ★
| Cell1 | Cell2 |
|---|---|
| Cell3 | Cell4 |
★ 見本２ ★
| Cell1 | Cell2 |
|---|---|
| Cell3 | Cell4 |
テーブル全体に色を付ける場合は
< TABLE BGCOLOR="#" >
この場合枠にも色が付きます。
セルに色を付けるときは
< TD BGCOLOR="#" > にします。
★ 見本１ ★
| Cell 1 | Cell 2 |
|---|---|
| Cell ３ | Cell ４ |
| Cell ５ | Cell ６ |
↑はセルの文字にそれぞれ色を指定する方法です。
設定したい、セルに < FONT COLOR="色" > を書き込みます。
★ 見本２ ★
| Cell 1 | Cell 2 |
|---|---|
| Cell ３ | Cell ４ |
| Cell ５ | Cell ６ |
一行だけ色を変える場合は
< TR style='color:#00FFFF' > の様に
＜TR＞ に指定する事で、
その行の文字色だけを変更できます。
同じ色で設定をするなら、
< style='color:#FFFFFF' > の様に
＜style＞ に指定すれば
一度でテーブル内の文字色を変更出来ます。
★ 見本１ ★
BORDER=2に設定しています。
| Cell 1 | Cell 2 |
|---|---|
| Cell 3 | Cell 4 |
★ 見本２ ★
BORDER=１０に設定しています。
| Cell 1 | Cell 2 |
|---|---|
| Cell 3 | Cell 4 |
★ 見本１ ★
BORDER=2に設定しています。
| Cell 1 | Cell 2 |
|---|---|
| Cell 3 | Cell 4 |
★ 見本２ ★
BORDER=2に設定しています。
| Cell 1 | Cell 2 |
|---|---|
| Cell 3 | Cell 4 |
枠の明るい部分と影の部分に色を付けています。
BORDERCOLORLIGHT="色" で明るい部分の色です。（紫色） BORDERCOLORDARK="色" で影になる部分の色です。(黄色）
★ 見本１ ★
| Cell 1 | Cell 2 |
|---|---|
| Cell 3 | Cell 4 |
★ 見本２ ★
| Cell 1 | Cell 2 |
|---|---|
| Cell 3 | Cell 4 |
ここでは、外枠が解かり易い様に
＜TABLE BORDER=0＞にしています。
数字を入れると、セル毎に枠が付きますよ。
外枠の指定は
style=border-style: dotted; border-width:3px;
この部分です。
青 で書かれている枠の種類を
色々変えてみて下さいね。
ラインの表示を参考にしてね～
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
☆ 枠のスタイルを変えてみよう NO2 ☆
★ 見本１ ★
| Cell 1 | Cell 2 |
|---|---|
| Cell 3 | Cell 4 |
★ 見本2 ★
| Cell 1 | Cell 2 |
|---|---|
| Cell 3 | Cell 4 |
★ 見本3 ★
| Cell 1 | Cell 2 |
|---|---|
| Cell 3 | Cell 4 |
■ 見本１は、＜ｽﾀｲﾙを変えてみようNO1＞のタグにプラスして
＜TD＞自体にもﾎﾞｰﾀﾞｰｽﾀｲﾙを入れました。
＜TD＞セル１・・左＆上 ＜TD＞セル２・・右＆上
＜TD＞セル３・・左＆下 ＜TD＞セル４・・右＆下
■ 見本2は、テーブル自体のﾎﾞｰﾀﾞｰを入れないで
＜TD＞のみ、ﾎﾞｰﾀﾞｰｽﾀｲﾙを入れました。
（指定した箇所は、↑と同じです）
■ 見本1・見本2では、セルに隙間があきます。
この隙間を作らないようにするには、
cellspacing="0" cellpadding="0"
これを入れることで解消します。
見本3は、cellspacing="0" cellpadding="0"を入れた例です。
■ 見本1のタグ ■
<table border=0 width=300 bordercolor="#6F00D2F" style=border-style:dashed;border-width:5px;> <TR><TD style="border-left:#CF9E9E 5px double;border-top:#CF9E9E 5px double;">Cell 1</TD><TD style="border-right:#CF9E9E 5px double;border-top:#CF9E9E 5px double;">Cell 2</TD></TR> <TR><TD style="border-left:#CF9E9E 5px double;border-bottom:#CF9E9E 5px double;">Cell 3</TD><TD style="border-right:#CF9E9E 5px double;border-bottom:#CF9E9E 5px double;">Cell 4</TD></TR> </TABLE>
■ 見本２のタグ ■
<table border=0 width=300> <TR><TD style="border-left:#CF9E9E 5px double;border-top:#CF9E9E 5px double;">Cell 1</TD><TD style="border-right:#CF9E9E 5px double;border-top:#CF9E9E 5px double;">Cell 2</TD></TR> <TR><TD style="border-left:#CF9E9E 5px double;border-bottom:#CF9E9E 5px double;">Cell 3</TD><TD style="border-right:#CF9E9E 5px double;border-bottom:#CF9E9E 5px double;">Cell 4</TD></TR> </TABLE>
■ 見本３のタグ ■
<table border=0 width=300 cellspacing="0" cellpadding="0" > <TR><TD style="border-left:#CF9E9E 5px double;border-top:#CF9E9E 5px double;">Cell 1</TD><TD style="border-right:#CF9E9E 5px double;border-top:#CF9E9E 5px double;">Cell 2</TD></TR> <TR><TD style="border-left:#CF9E9E 5px double;border-bottom:#CF9E9E 5px double;">Cell 3</TD><TD style="border-right:#CF9E9E 5px double;border-bottom:#CF9E9E 5px double;">Cell 4</TD></TR> </TABLE>
テーブル １ ・ ２ ・ ４ ・ ５ ・ ６ ・ ７
© Rakuten Group, Inc.
