| 改行なし | 改行<BR> 改行<BR> 改行<BR> 改行<BR> 改行 |
| 改行なし |  |
ここまでの經驗(経験)があれば、情報を載せる分には 支障は無いだらう(だろう)けど、 せっかくなら、その配置にも手を加へたい(加えたい)ところ。
そこで <TABLE>タグの登場。
基本構造はコレ。
<TABLE BORDER=1>
<TR>
<TD>ここに文章を入力</TD>
</TR>
</TABLE>
で。
コイツを表示すると かう(こう)なる。
| ここに文章を入力 |
…枠がついただけじゃねーか。
—ごもっとも！
だがね、コイツは應用(応用)次第で いろんな使ひ方(使い方)が
出來る(出来る)のだ。
順にタグの意味を説明すると、
<TABLE BORDER=1> … 表の始まり
<TR> … 一段目の始まり
<TD> … 一枠の始まり
</TD> … 一枠の終はり(終わり)
</TR> … 一段目の終はり(終わり)
</TABLE> … 表の終はり(終わり)
段だの枠だの なんのこっちゃ って状態だと思うんで、まぁ とりあへず(とりあえず)
應用(応用)を 見てみんしゃい。
まづ(まず)は 枠を増やしてみる。
|
<TABLE BORDER=1> <TR> <TD>ここに文章を入力1</TD> <TD>ここに文章を入力2</TD> </TR> </TABLE> |
→ |
|
もう いっちょ。
|
<TABLE BORDER=1> <TR> <TD>枠1</TD> <TD>枠2</TD> <TD>枠3</TD> <TD>枠4</TD> <TD>枠5</TD> </TR> </TABLE> |
→ |
|
今度は かう(こう)。
|
<TABLE BORDER=1> <TR> <TD>一段目</TD> </TR> <TR> <TD>二段目</TD> </TR> <TR> <TD>三段目</TD> </TR> </TABLE> |
→ |
|
合はせ(合わせ)技で かう(こう)だ！
|
<TABLE BORDER=1> <TR> <TD>イ-1</TD> <TD>イ-2</TD> <TD>イ-3</TD> <TD>イ-4</TD> <TD>イ-5</TD> </TR> <TR> <TD>ロ-1</TD> <TD>ロ-2</TD> <TD>ロ-3</TD> <TD>ロ-4</TD> <TD>ロ-5</TD> </TR> <TR> <TD>ハ-1</TD> <TD>ハ-2</TD> <TD>ハ-3</TD> <TD>ハ-4</TD> <TD>ハ-5</TD> </TR> <TR> <TD>ニ-1</TD> <TD>ニ-2</TD> <TD>ニ-3</TD> <TD>ニ-4</TD> <TD>ニ-5</TD> </TR> </TABLE> |
→ |
|
…靴箱みたいっすね。
いや、そんな感想はどーでもいいよ。←
枠の數(数)は、それぞれの段ごとにバラバラにすることも可能(ただし左に寄る)。
|
<TABLE BORDER=1> <TR> <TD>イ-1</TD> <TD>イ-2</TD> <TD>イ-3</TD> <TD>イ-4</TD> <TD>イ-5</TD> </TR> <TR> <TD>ロ-1</TD> <TD>ロ-2</TD> </TR> <TR> <TD>ハ-1</TD> <TD>ハ-2</TD> <TD>ハ-3</TD> </TR> </TABLE> |
→ |
|
…なんか 見榮え(見栄え)惡く(悪く)ね？
と、そんな時は <TD>タグに「COLSPAN=○」を附加(付加)して 幅を效かせ(効かせ)よう。
○の部分には 數字(数字)が入る。
2列分 幅を廣げる(広げる)には COLSPAN=2 、3列分なら COLSPAN=3 。
|
<TABLE BORDER=1> <TR> <TD>イ-1</TD> <TD>イ-2</TD> <TD>イ-3</TD> <TD>イ-4</TD> <TD>イ-5</TD> </TR> <TR> <TD>ロ-1</TD> <TD COLSPAN=4>ロ-2,3,4,5</TD> </TR> <TR> <TD COLSPAN=2>ハ-1,2</TD> <TD COLSPAN=3>ハ-3,4,5</TD> </TR> </TABLE> |
→ |
|
|||||||||||||||
同樣(同様)に、上下の段を廣げる(広げる)には
「ROWSPAN=○」を使ふ(使う)。
COLSPAN=○との同時使用も可。
|
<TABLE BORDER=1> <TR> <TD ROWSPAN=3>イ-1<BR>ロ<BR>ハ</TD> <TD>イ-2</TD> <TD>イ-3</TD> <TD>イ-4</TD> <TD>イ-5</TD> </TR> <TR> <TD>ロ-2</TD> <TD>ロ-3</TD> <TD ROWSPAN=2 COLSPAN=2>ロ-4,5<BR>ハ-4,5</TD> </TR> <TR> <TD COLSPAN=2>ハ-2,3</TD> </TR> </TABLE> |
→ |
|
|||||||||||
<TD>タグに「BGCOLOR="#○○"」を 書き加へ(加え)れば、枠ごとに色の指定もできる。
表 全體(全体)の色を指定する時は <TABLE>タグに附加(付加)しよう。
|
<TABLE BORDER=1> <TR> <TD ROWSPAN=3>イ-1<BR>ロ<BR>ハ</TD> <TD BGCOLOR="#C0C0C0">イ-2</TD> <TD>イ-3</TD> <TD BGCOLOR="#FFFF00">イ-4</TD> <TD>イ-5</TD> </TR> (以下 略) |
→ |
|
|||||||||||
|
<TABLE BORDER=1 BGCOLOR="#FFA500"> <TR> <TD ROWSPAN=3>イ-1<BR>ロ<BR>ハ</TD> <TD>イ-2</TD> <TD>イ-3</TD> <TD>イ-4</TD> <TD>イ-5</TD> </TR> (以下 略) |
→ |
|
|||||||||||
ちなみに、<TD>〜</TD>の部分を <TH>〜</TH>にすると、中の文字が 太字+中央配置になる。
|
<TABLE BORDER=1> <TR> <TH>見出し</TH> </TR> <TR> <TD>---項目1---</TD> </TR> <TR> <TD>---項目2---</TD> </TR> <TR> <TD>一部<B>太字</B></TD> </TR> </TABLE> |
→ |
|
<TABLE>タグに附加(付加)できる情報には、他に、
「CELLSPACING=○」(枠線の太さ)と、「CELLPADDING=○」(枠内の文字と枠線の隙間)がある。
|
|
|
左: <TABLE BORDER=1 CELLSPACING=5> 右: <TABLE BORDER=1 CELLSPACING=10> |
|
|
|
左: <TABLE BORDER=1 CELLPADDING=5> 右: <TABLE BORDER=1 CELLPADDING=10> |
また、「BORDER=○」の値を變へ(変え)れば 表の外枠の大きさが變へ(変え)られる。
("0"だと枠線が消える。)
|
|
|
左: <TABLE BORDER=0 CELLPADDING=1 CELLSPACING=1> 右: <TABLE BORDER=5 CELLPADDING=1 CELLSPACING=1> |
あとは、
畫像(画像)を入れたり、改行したりすると、枠の高さが増すけど、
字の少ないところは 自動的に 中間的な高さに配置されることになる。
| 改行なし | 改行<BR> 改行<BR> 改行<BR> 改行<BR> 改行 |
| 改行なし | |
かういふ(こういう)時は、<TD>タグに
「VALIGN=TOP」(上部に寄せる)、もしくは「VALIGN=BOTTOM」(底部に寄せる)を 附加(付加)することで、
表示位置を操作できる。
| 上に寄せる | 改行<BR> 改行<BR> 改行<BR> 改行<BR> 改行 |
| 下に寄せる | |
|
上段 左: <TD VALIGN=TOP>上に寄せる</TD> 下段 左: <TD VALIGN=BOTTOM>下に寄せる</TD> |
同じ樣(様)に、横幅が廣い(広い)時なんかは
「ALIGN=CENTER」(中央配置)、もしくは「ALIGN=RIGHT」(右寄せ)を
<TD>タグに 附加(付加)するもできる。
| 中央配置 |
| 横幅が長ーーーーーーーーーーーーーーーい |
| 右に寄せる |
|
最上段: <TD ALIGN=CENTER>中央配置</TD> 最下段: <TD ALIGN=RIGHT>右に寄せる</TD> |
<TD ALIGN=CENTER>中央配置</TD>の場合は、
<TD><CENTER>中央配置</CENTER></TD> なんてタグでも 同じだけどね。
と、まぁ、表の作り方については こんなもんかな。
多分 こーゆーのって、いぢり(いじり)ながら
覺えて(覚えて)いくもんだらう(だろう)から、
とにかく 自分でやってみた方がいいよ。
ざっと見たぐらゐ(ぐらい)で ピンとは來ない(来ない)っしょ。(俺も
最初はさう(さう)だった。…いや、今もよく分かってねぇかも。←)
さてさて、一覽表(一覧表)なんか作った日にゃァ、とんでもなく
縱(縦)に長いページになることもあらう(あろう)ぞ。
こんな時、いちいち 上からスクロールしてったんじゃ 大變(大変)。
てコトで、さういふ(そういう)場合の ショートカットリンクを作り方も紹介しとく。
まづ(まず)は 飛んできたい場所に
<A NAME="○○">
といふ(いう)タグを仕込む。
マーク1 <A NAME="mark1">(←タグは 通常 ブラウザには表示されない))
○○の部分には アルファベットか數字(数字)で 名前をつける。
ブラウザでページを表示してゐる(いる)人には 見えないので、とにかく 自分で分かりやすいやうな(ような)ヤツをね。
マーキングが出來たら(出来たら)あとは リンク用のパスだけど、これは、
<A HREF="#○○">クリックする文字列</A>
マーク先が別ページの場合は、
<A HREF=" .html#○○">クリックする文字列</A>
となる。
んじゃ まぁ、どんな具合になるか、テストページを用意しとくよ。
mark_test.html(使用例)
もちろん このタグは、
<TABLE BORDER=1>
—のやうに(ように)、表の中に仕込むことも可能。
ちなみに、このタグは マークしたところを畫面(画面)の一番上に呼び出すタグだけど、
ページの終はり(終わり)の方に設置すると 一番上まで呼び出されないこともある。
表示されないといへば(いえば)、
<! ○○>
なんてタグも ブラウザには表示されない。
表示されたら邪魔だけど、HTML内にメモしておきたいコトがあったら、コレを使はう(使おう)。
<! ここにメモ>
vol.5 ページを分ける← →vol.7 フレームを使ふ(使う)
試しに ココ↑にも マーキングしとくね。
<TR>
<TD ROWSPAN=5>ア行<A NAME="gyo_A"></TD>
<TD>ア</TD>
<TD>イ</TD>
<TD>ウ</TD>
<TD>エ</TD>
<TD>オ</TD>
</TR>
(以下 略)
最後尾が表示された状態になっちゃったら、それ以上ページを持ち上げることは 出來ない(出来ない)からね。
(マーキングとかにはならないので、ホントに メモ以外の用途には 全く使へない(使えない)。)
TOP>タグ打ちでWebページをつくる>vol.6.表を作る