715790 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

テーブルの線をデザインする


　HＴMLタグのページ　みんな使ってるテーブルの点線はどうするの？　IE4以降, Netscape6のみ


テンプレートを公開したりオリジナルのテンプレートを作っているヒトに多く見られるテーブル飾り。
テーブルの線を点線にするにはどうしたらいいの?
styleを使います。

　styleは普通CSS（Cascading Style Sheet)といってページ全体に関わる指定を一気に引き受けてくれる便利やさんなのですが、
楽天では使用できない<head>～</head>タグの中に書き込まなければいけないので、使用できません。

しかし、タグで指定された各々の要素に対して指定する方法があるのでそれを使います。

基本的には、style="border:線の太さ 色 線種;" というように半角スペースを開けながらそれぞれの値を指定します。

枠の太さ （●px）
枠の太さは長さの単位を使用し指定します。
枠の形式
枠の形式には、solid（実線）dotted（点線）dashed（粗い点線）double（二重線）none（線なし）などが指定できます。
枠の色
枠の色はカラーコードや色名などを使用して指定します。


使用例
　点線の赤い細い枠のテーブルを作る
<table width="100" border="0" cellspacing="4" cellpadding="2" style="border: 1px dotted red;">
<tr>
<td>@@@@@</td>
</tr>
</table>　

ブラウザ表示
　
　@@@@@

*　ここで気をつけるのは　border="0"になっていることです。
borderの1に指定すると表の基本でやったようにグレーの枠線が表示されます。

ex.

　タグ
　<table width="100" border="1" cellspacing="4" cellpadding="2" style="border: 1px dotted red;"> <tr> <td>　@@@@@</td></tr> </table>

ブラウザ表示
　@@@@@

この場合はcellspacing="4"（セル幅） というようにstyleで指定している線とセル幅の内側の線にスペースが空いているのでまだいいですが、cellspacing="0" にしてしまうと・・・

ex.

　タグ
<table width="100" border="1" cellspacing="0" cellpadding="2" style="border: 1px dotted red;">
<tr>
<td>　@@@@@</td>
</tr>
</table>

ブラウザ表示
　@@@@@

こんな風に両方の線が重なってしまい、あまり綺麗じゃなくなりますので気をつけたいところです。

余談

上のborder="1"を使ってこんなことも出来ます。

styleとborderの両方に指示を入れる

タグ　
<table width="200" height="100" border="1" bordercolor="#6666FF" cellpadding="2" style="border: 4px dotted #ff9900;"> <tr> <td>　</td></tr> </table>

ブラウザ表示
　
　

*　セル幅の内側の線はborderの数値を上げてもいつも同じ線の太さなのでborder="1"を変更する必要はありません。


線の太さを変える　style="border: ●px;"

　1px
　<table width="100" height="100" border="0" style="border: 1px red solid;"> <tr> <td>　</td></tr> </table>

　
　

3px　
<table width="100" height="100" border="0" style="border: 3px red solid;"> <tr> <td>　</td></tr> </table>　

　
　


　6px
　<table width="100" height="100" border="0" style="border: 6px red solid;"> <tr> <td>　</td></tr> </table>

　
　


線種を変える　style="border: dotted"(solid dashed)



　点線にする　　dotted
<table width="100" height="100" border="0" style="border: 3px #ff66cc dotted;"> <tr> <td>　</td></tr> </table>


　
　


　破線にする　dashed
　<table width="100" height="100" border="0" style="border: 3px #ff66cc dashed;"> <tr> <td>　</td></tr> </table>


　
　


実線にする　　solid
<table width="100" height="100" border="0" style="border: 3px #ff66cc solid;"> <tr> <td>　</td></tr> </table>　

　
　
　

*　枠の色はカラーコードや色名を参考になさってみてください。

© Rakuten Group, Inc.