画像を使わず、タグを使ってテープルの枠を色々と表示させてみました。
テーブルを重ねる
TABLEを二重にすることによって、枠線を表示させています。
|
2004/01/01(Mon)...
シンプルな線タイプ。
TABLEタグのcellspacingが枠の太さとなります。
|
|
 |
 |
 |
 |
<TABLE cellspacing="0" cellpadding="0" border="0"
bgcolor="#000099"> ← 外枠の色
<TR>
<TD>
<TABLE cellspacing="2" cellpadding="10" width="100%" border="0"> ← 枠の太さ
<TR>
<TD bgcolor="#ffffff" width="300"> ← テーブル内の色
<P>2004/01/22(Mon)...</P>
<P>シンプルな線タイプ。<BR>
TABLEタグのcellspacingが枠の太さとなります。</P>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
|
 |
 |
 |
 |
borderプロパティを使って点線を表示する
cssのborderプロパティを使って点線を表示させています。
詳しい解説はこちらへどうぞ → 「
枠線の設定をまとめて指定する」
|
2004/01/11(Mon)...
枠線を点線で表示させています。
太さを変えることで雰囲気が違います。
これはborder=4です。
|
|
2004/01/22(Mon)...
枠線を点線で表示させています。
太さを変えることで雰囲気が違います。
これはborder=3です。
|
|
|
|
2004/01/13(Mon)...
枠線を点線で表示させています。
太さを変えることで雰囲気が違います。
これはborder=2です。
|
|
2004/01/14(Mon)...
枠線を点線で表示させています。
太さを変えることで雰囲気が違います。
これはborder=1です。
|
|
|
|
|
|
<TABLE cellspacing="2" cellpadding="10" width="100%"
border="0" bgcolor="#ffffff" style="border-color:#99cc66;
↑枠線の色
border-width:4px; border-style:dotted;">
↑枠線の太さ(それぞれ変えてね) ↑枠線の形状(点線)
<TR>
<TD width="200">
<P>2004/01/11(Mon)...</P>
<P>枠線を点線で表示させています。<BR>
太さを変えることで雰囲気が違います。<BR>
これはborder=4です。</P>
</TD>
</TR>
</TABLE>
|
|
|
|
|
borderプロパティを使って実線と点線を二重にする
こちらもcssのborderプロパティを使って実線と点線を表示させています。
テーブルを二重にすることによって、違う種類の枠線を重ねることができます。
詳しい解説はこちらへどうぞ → 「
枠線の設定をまとめて指定する」
|
2004/01/21(Mon)...
実線と点線の二重線です。
こちらは線だけ。
|
|
|
|
|
2004/01/21(Mon)...
実線と点線の二重線です。
こちらは背景色をつけてみました。
|
|
|
|
|
|
|
−線だけタイプ−
<TABLE cellspacing="0" cellpadding="5" width="100%"
↑実線と点線の間隔
border="0" style="border-color:#a3a3bf;
↑枠線の色(実線部分)
border-width:1px; border-style:solid;" bgcolor="#ffffff">
<TR>
<TD>
<TABLE cellspacing="0" cellpadding="10" width="100%"
↑点線と文字との間隔
border="0" style="border-color:#a3a3bf;
↑枠線の色(点線部分)
border-width:1px; border-style:dotted;">
<TR>
<TD width="200">
<P>2004/01/21(Mon)...</P>
<P>実線と点線の二重線です。<BR>
こちらは線だけ。</P>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
−背景色があるタイプ−
<TABLE cellspacing="0" cellpadding="5" width="100%"
↑実線と点線の間隔
border="0" style="border-color:#a3a3bf;
↑枠線の色(実線部分)
border-width:1px; border-style:solid;" bgcolor="#f9f9fe">
↑外側の背景の色
<TR>
<TD>
<TABLE cellspacing="0" cellpadding="10" width="100%"
↑点線と文字との間隔
border="0" style="border-color:#a3a3bf;
↑枠線の色(点線部分)
border-width:1px; border-style:dotted;" bgcolor="#ffffff">
↑内側の背景の色
<TR>
<TD width="200" bgcolor="#ffffff">
<P>2004/01/21(Mon)...</P>
<P>実線と点線の二重線です。<BR>
こちらは背景色をつけてみました。</P>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
|
|
|
|
|
タグを使って枠線を立体にする
tableタグにbordercolor属性を指定して立体に見せています。
この属性はHTML4.01の規格外となっています。
詳しい説明はこちらへどうぞ → 「
枠線の色を指定する」
|
2004/01/21(Mon)...
シンプルな線タイプですが、
枠線を立体にしてみました。
|
|
|
|
|
2004/01/21(Mon)...
|
|
シンプルな線タイプですが、枠線を立体にしてみました。
こちらはタイトル部があるタイプ。
|
|
|
|
|
|
|
−タイトルなしタイプ−
<TABLE cellspacing="0" cellpadding="1" width="100%"
border="1" bordercolorlight="#666666"
↑枠線の明るい部分の色
bordercolordark="#eeeeee" bgcolor="#906976">
↑枠線の暗い部分の色 ↑枠線の色
<TR>
<TD>
<TABLE cellspacing="0" cellpadding="10" width="100%"
border="1" bordercolorlight="#666666"
↑枠線の明るい部分の色
bordercolordark="#eeeeee" bgcolor="#ffffff">
↑枠線の暗い部分の色 ↑テーブルの背景色
<TR>
<TD width="200">
<P>2004/01/21(Mon)...</P>
<P>シンプルな線タイプですが、<BR>
枠線を立体にしてみました。</P>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
−タイトルありタイプ−
<TABLE cellspacing="0" cellpadding="1" width="100%"
border="1" bordercolorlight="#666666"
↑枠線の明るい部分の色
bordercolordark="#eeeeee" bgcolor="#906976">
↑枠線の暗い部分の色 ↑枠線の色
<TR>
<TD>
<TABLE cellspacing="0" cellpadding="10" width="100%"
border="1" bordercolorlight="#666666"
↑枠線の明るい部分の色
bordercolordark="#eeeeee">
↑枠線の暗い部分の色
<TR>
<TD width="300" bgcolor="#906976"> ←上側のテーブルの背景色
<P><FONT color="#ffffff">2004/01/21(Mon)...</FONT></P>
</TD>
</TR>
<TR>
<TD width="300" bgcolor="#ffffff"> ←下側のテーブルの背景色
<P>シンプルな線タイプですが、枠線を立体にしてみました。<BR>
こちらはタイトル部があるタイプ。</P>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
|
|
|
|
|
