HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG
Click Here!

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |123456789101112131415|  次へ>>

★今すぐ仕事に結びつく稼げる資格!スキルアップガイド無料進呈中 Click Here![PR]

● 罫線の設定

・枠線と罫線の設定

表を表示するにあたり、次の属性を使用することで、表の枠線を設定することが出来ます。 これらの設定はいずれCSSを使用することが推奨されると思われます。

border属性は、表を囲む枠線の太さを設定するためにTABLE要素に設定します。
属性値は枠線の太さをピクセル値でのみ設定でき、 通常は0(枠線無し)となっています
つまり、初期値は罫線を表示しないため、 セル間に罫線を表示するためにTABLE要素にborder属性を設定することになります。

frame属性は表を囲む枠で、表示させる部分を限定させるのに使用します。 属性値は以下より選びます。
void:外枠なし。これは初期値です。
box又はborder:周囲すべて。
above:上端のみ。
below:下端のみ。
hsides:上端と下端のみ。
lhs:左端のみ。
rhs:右端のみ。
vsides:左右両端のみ。

rules属性は、表中のセルとセルの間に表示する罫線を設定するのに使用します。 属性値は以下より選びます。
none:罫線を表示しない。これは初期値です。
groups:罫線を行グループ間、と列グループ間にだけ表示します。
rows:罫線を、行間にだけ表示します。
cols:罫線を、列間にだけ表示します。
all:罫線を、すべての行間・列間に表示します。

border属性の属性値が『0』の場合は、frame属性の属性値が『void』(外枠なし)であり、 特に設定がない限りはrules属性の属性値が『none』(罫線を表示しない)であることを意味します。

border属性の設定において、下の二つは同じです。
<TABLE border="2">
<TABLE border="2" frame="border" rules="all">

border属性の『0』以外の属性値では、frame属性の属性値が『border』(周囲すべて)で、 特に設定がない限りはrules属性が『all』(すべての行間・列間に表示)であることを意味します。
また、TABLE要素の開始タグに『border』が設定してあった場合、 frame属性の属性値として解釈され、rules属性が『all』であり、 0ではないborder属性が設定されます。

これより下の二つは同じです。
<TABLE border>
<TABLE frame="border" rules="all">

・枠線の色と影 (非準拠)

bordercolorを使用する事で表の枠線に色を付ける事が出来ます。
<TABLE border="5" bgcolor="#CECECE" bordercolor="#AA2222">
<TR><TD bordercolor="#000000" bgcolor="#FFDDAA">

bordercolorは枠線の色になります。 外側の枠線は表全体を囲う線でTABEL要素に設定し、内側の細い線はセルの線でTD要素に設定します。
その間はTABLE要素の背景となります。
背景色はbgcolor属性を使用して設定できますが、非推奨となっており、 スタイルシート(CSS)のbackground−colorプロパティを使用して設定します。

bordercolordark、bordercolorlightを使用する事で 表の枠線に影を付ける事が出来ます。
<TABLE border="5" bgcolor="#FFDDAA" bordercolordark="#000000" bordercolorlight="#EFEFEF">

bordercolordarkが影の部分の(右と下)の色を設定する属性で、 bordercolorlight明るい部分(左と上)の色を設定する属性です。

表の枠線もスタイルシート(CSS)のborderプロパティを使用できます。 ridgeを設定すればこのような枠線になります。

bordercolor、bordercolordark、bordercolorlightは、InternetExplorer、 Netscape、Operaで確認できましたが、HTMLに準拠した属性ではないようです。 (Opera7.03ではbordercolorが無視されています。)

・枠線の重なり (InternetExplorer専用)

CSSのプロパティ『border-collapse』で、 隣接するセルの枠線を重ねるか、重ねないかを設定できます。
値は以下の二つです。
collapse:セルの枠線を隣接するセルの枠線と重ねて表示します。
separate:セルの枠線を隣接するセルの枠線と間隔をあけて表示します。

<TABLE border style="border-collapse:collapse">

・枠線の間隔 (Netscape専用)

CSSのプロパティ『border-spacing』でセルの枠線と枠線の間隔を設定することができます。
値は『px』『em』などの単位で記述します。
値を1つ設定した時は、上下左右の間隔が設定した値となり、 値を2つ設定した時は、順に上下、左右の間隔が設定した値になります。
この値は、border-collapseプロパティがseparateの時に有効になります。

<TABLE border style="border-collapse:separate ; border-spacing:5px">

・空白セルの枠線を表示 (Netscape専用)

通常、空白のセルには枠線が表示されません。
しかし、CSSのプロパティ『empty-cells』で、空白セルの枠線の表示非表示を設定できます。 値は以下の二つです。
show:空白セルの枠線を表示。
hide:空白セルの枠線を非表示。
この値は、border-collapseプロパティがseparateの時に有効になります。

<TABLE border style="border-collapse:separate">
<TD style="empty-cells:show">

↓空白↓empty-cells:showを設定

<<前へ  |上へ|  次へ>>
123456789101112131415

広告掲載で簡単収入!!登録無料のアフィリエイトプログラムなら導入は安心。
Click Here! リンクシェア アフィリエイト紹介プログラム http://draft.j-a-net.jp/banner/NEXT アクセストレード
アフィリエイトプログラム比較

TOP] [HOME

更新日時:2014/08/09