WEBの企画・制作からWEBを活用した効果的なプロモーションをご提案します。
ホーム > 素材集 > スタイルシートTIPS > シンプル表組み編Part1

用語集

シンプル表組み編Part1

サンプル
見出し 見出し 見出し
内容 内容 内容
内容 内容 内容

borderを使用せずに表組みのラインを引く手法です。

一般的にはborderのスタイルで1本線ならsolid、二重線ならdouble、破線(点線)ならdottedで指定をして表の枠線を作りますが、この手法は、背景に色を引いて、各セルの間(ボーダー部分)にスペースを空けて背景の色を見せることで枠線のように見せています。

ということは、backgroundで画像を指定すると、枠線を画像で表示させることも可能です。

たとえば
背景
背景にこんな画像を指定してみるとこうなります。
なんか表に光沢が出たみたいですね。
枠線がちょっと太めになりますが、こういうのもアリといえばアリですね。

見出し 見出し 見出し
内容 内容 内容
内容 内容 内容

 

XHTMLソースサンプル
<table width="100%" border="0" summary="sample">
<tr>
<th>見出し</th>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
CSSソースサンプル
table {
border-collapse:separate; background:#0033FF;
}
th {
background:#FFFFCC;
}
td {
background:#FFFFFF;
}
CSSソースサンプル(背景に画像を指定)
table {
border-collapse:separate; background:url(images0002/back.gif);
}
Copyright(C) TAKIKAWA PLANNING OFFICE. All rights reserved.