初心者必見！お小遣い稼ぎ完全マニュアル

【お小遣い稼ぎ完全マニュアル】では、インターネットを使ってお小遣い・副収入を稼ぐ方法を紹介します。もちろん無料で始められるので初心者でも安心！みんなでお小遣い・副収入をGETしましょう！

TOP > > 表を作る！応用編②　枠線の表示方法TOP > HP(ブログ)をカスタマイズする！ > 表を作る！応用編②　枠線の表示方法

表を作る！応用編②　枠線の表示方法

2006/10/19(木)

前回は、「枠線の太さ」について説明しました。

そうなの？という方はコチラ　→　表を作る！応用編①　枠線の太さ

今回は、枠線の表示方法をいろいろカスタマイズしてみましょう。

具体的には、

・外側の枠線の表示方法
・内側の枠線の表示方法
・枠線の種類

です。興味のある方は続きを読んでくださいね。

①外側の枠線の表示方法

まずは下の2つののテーブルをご覧ください。

1.1	1.2
2.1	2.2

1.1	1.2
2.1	2.2

2つのテーブルの違いがわかりますか？

何？わからない？･･･
右側のテーブルは枠線が2重になっていますが、左側のテーブルは外側の枠線が消えていますね。

ここでは、このように、外側の枠線の表示方法を変えるタグを説明します。

外側の枠線の表示方法を変えるタグは、

<table border frame="○○">

です。この"○○"の部分に、お好みのタグを入力することで外側の枠線の表示方法をカスタマイズできますよ。

ではその"○○"に入るタグを紹介します。

void	：外側の枠線を表示しない
hsides	：上下の外枠線だけを表示する
above	：上の外枠線だけを表示する
below	：下の外枠線だけを表示する
vsides	：左右の外枠線だけを表示する
lhs	：左の外枠線だけを表示する
rhs	：右の外枠線だけを表示する

---------------------------
②内側の枠線の表示方法

上に示した①の最後の表をもう一度ご覧ください。
これもテーブルで作成した表ですが、実は縦に2列の表なんです。

通常のテーブルであれば、列と列の間に枠線が表示されますよね？
上の表では内側の枠線を横だけ表示する設定にしています。

では早速、内側の枠線の表示方法を変えるタグを紹介します。

<table border rules="△△">

です。ではその"△△"に入るタグを紹介します。

all	：内側の枠線を全て表示する
none	：内側の枠線を全て消す
rows	：内側の横線だけを表示する
cols	：内側の縦線だけを表示する

---------------------------
③枠線の種類

最後に、枠線の種類について説明します。

普通にテーブルを作ると、いくら立体感をなくそうとしても、ほんの少しだけ立体感が残りますよね。
「ホントはただの線にしたいのに･･･」「まぁいいか～」
と思っていませんか？
そんな時は、枠線の種類を変えてしまいましょう。

枠線の種類を指定するタグは、

<table style="border:□□">

です。上の □□ に線の種類を指定しましょう。
正確には、

<table style="border:線の太さ線の種類線の色">

ですが、線の種類だけを指定する場合は、赤字のようにすれば良いですよ。
この場合、線が太いと感じると思うので、青字のようにすることをおすすめします。
色は黒で良いと言う場合は、「線の色」の部分は不要ですよ。

では線の種類を指定するタグの紹介。

solid	：実線
dotted	：点線(点が短い)
dashed	：点線(点が長い)
double	：二重線

---------------------------
枠線については、こんな感じでしょうか。
まずは実際に、いろいろと試しに作ってみてください。

上記①～③を組み合わせる場合は、

<table style="border:線の太さ線の種類線の色" frame="○○" rules="△△">

となりますよ。