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);
}