テーブルの線をデザインする
HＴMLタグのページ
みんな使ってるテーブルの点線はどうするの？ IE4以降, Netscape6のみ
テンプレートを公開したりオリジナルのテンプレートを作っているヒトに多く見られるテーブル飾り。
テーブルの線を点線にするにはどうしたらいいの?
styleを使います。
styleは普通CSS（Cascading Style Sheet)といってページ全体に関わる指定を一気に引き受けてくれる便利やさんなのですが、
楽天では使用できない<head>～</head>タグの中に書き込まなければいけないので、使用できません。
しかし、タグで指定された各々の要素に対して指定する方法があるのでそれを使います。
基本的には、 style="border:線の太さ 色 線種;"というように半角スペースを開けながらそれぞれの値を指定します。
枠の太さ（●px）
楽天では使用できない<head>～</head>タグの中に書き込まなければいけないので、使用できません。
しかし、タグで指定された各々の要素に対して指定する方法があるのでそれを使います。
基本的には、 style="border:線の太さ 色 線種;"というように半角スペースを開けながらそれぞれの値を指定します。
枠の太さ（●px）
- 枠の太さは長さの単位を使用し指定します。
- 枠の形式
- 枠の形式には、solid（実線）dotted（点線）dashed（粗い点線）double（二重線）none（線なし）などが指定できます。
- 枠の色
- 枠の色は カラーコードや色名
などを使用して指定します。
使用例
点線の赤い細い枠のテーブルを作る
ブラウザ表示
* ここで気をつけるのは border="0"になっていることです。
borderの1に指定すると 表の基本 でやったようにグレーの枠線が表示されます。
ex.
タグ
ブラウザ表示
この場合はcellspacing="4"（セル幅） というようにstyleで指定している線とセル幅の内側の線にスペースが空いているのでまだいいですが、cellspacing="0" にしてしまうと・・・
ex.
タグ
ブラウザ表示
こんな風に両方の線が重なってしまい、あまり綺麗じゃなくなりますので気をつけたいところです。
余談
上のborder="1"を使ってこんなことも出来ます。
styleとborderの両方に指示を入れる
タグ
ブラウザ表示
* セル幅の内側の線はborderの数値を上げてもいつも同じ線の太さなのでborder="1"を変更する必要はありません。
<table width="100" border="0" cellspacing="4" cellpadding="2" style="border: 1px dotted red;"
>
<tr>
<td>@@@@@</td>
</tr>
</table>
<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>
<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
3px
6px
<table width="100" height="100" border="0" style="border: 1pxred solid;"> <tr> <td> </td></tr> </table>
3px
<table width="100" height="100" border="0" style="border: 3pxred solid;"> <tr> <td> </td></tr> </table>
6px
<table width="100" height="100" border="0" style="border: 6pxred 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.
