HOME

楽しい消防団

自転車に乗ろう

私がせんむ

パソコンレスキュー隊

せんむのQ&A

PC改造部屋

宮中囃子連

掲示板

リンク集

パソコン レスキュー隊

ホームページの初歩の初歩

PCレスキュー隊目次

HPの初歩の初歩目次 

 

テーブルタグのちょっとおもしろい利用法

テーブルタグのちょっと面白い利用法を紹介します。

下に一例を書きましたので参考にしてください。
各数字の部分や属性の部分を変更したらブラウザの更新ボタンを押して確認しましょう。
どのように見た目が変わるのかがわかると思います。
実際にはタグは<body>〜</body>の間に書きます。
また<table>〜</table>のようにタグは必ず対で書くのを忘れないように注意してください。

bgcolor="#A2B4FF"などの「A2B4FF」の部分は色の指定です。希望の色を16進数で書きます。


ちょっとおもしろい利用法その1

ボタンみたいでしょ

画像を使わないでも、ボタンのような雰囲気になります。
文字はテキストなので画像を使うよりも全体のファイルサイズが軽くなります。

<table border="5" width="160" height="40" bgcolor="#A2B4FF" bordercolordark="#7B9DFF" bordercolorlight="#E2EDFF">
<tr>
<td align="center" bgcolor="#A2B4FF" bordercolor="#A2B4FF">
ボタンみたいでしょ
</td>
</tr>
</table>

スペースの関係で改行しているように見えますが、タグの途中で改行しないように
border="*"は罫線の太さ
bgcolor="#******" はセルを含めた表全体の背景の色
bordercolordark="#******" は罫線の右側と下側の濃いほうの色
bordercolorlight="#******" は罫線の左側と上側の薄いほうの色

 

ちょっとおもしろい利用法その2

TOP

PROFILE

BBS

LINK

罫線を消してセルごとに色を変えてみました。

それぞれの文字ににリンクを設定するとメニューなどにいいと思います。

<table border="0" width="150">
<tr><td align="center" bgcolor="#FFBCE2">TOP</td></tr>
<tr><td align="center" bgcolor="#FFE9FC">PROFILE</td></tr>
<tr><td align="center" bgcolor="#FFBCE2">BBS</td></tr>
<tr><td align="center" bgcolor="#FFE9FC">LINK</td></tr>
</table>

 

TOP

PROFILE

BBS

LINK

上の応用編。

cellspacing="0" で罫線の巾(セル同士のすき間)を無しにしてみました。
<td bgcolor="#・・・・・・">はセルの背景の色

<table border="0" width="150" cellspacing="0">
<tr><td align="center" bgcolor="#FFBCE2">TOP</td></tr>
<tr><td align="center" bgcolor="#FFE9FC">PROFILE</td></tr>
<tr><td align="center" bgcolor="#FFBCE2">BBS</td></tr>
<tr><td align="center" bgcolor="#FFE9FC">LINK</td></tr>
</table>

 

TOP

PROFILE

BBS

LINK

上の応用編。セル同士のすき間に色をつけてみました。

cellspacing="1" でセルとセルのすき間を小さくします。
<table bgcolor="#FF74C5" は表全体の背景色ですのでセルとセルのすき間にもこの色が設定されます。
各セルの背景色は<td bgcolor="#・・・・・・">で設定します。

<table border="0" width="150" cellspacing="1" bgcolor="#FF74C5">
<tr><td align="center" bgcolor="#FFBCE2">TOP</td></tr>
<tr><td align="center" bgcolor="#FFE9FC">PROFILE</td></tr>
<tr><td align="center" bgcolor="#FFBCE2">BBS</td></tr>
<tr><td align="center" bgcolor="#FFE9FC">LINK</td></tr>
</table>

 

アクセスカウンターをつけてみよう フレームページを作ろう   実際にHPをアップロードしてみよう  目次

 

おまけのページTOPへ

質問は掲示板へ

HPのトラブルはURLを書いてください

 

 

 


女の子お絵かき掲示板ナスカiPhone修理