CSSメモ-細い罫線のtable

忘れがちなCSSのメモ。

細い罫線でテーブル内のセルを囲む。

例.

あああ	いいい	ううう
aaa	iii	uuu

HTMLとCSSのソースは以下の通り。

<table cellspacing="0">
<tr><th>あああ</th><th>いいい</th><th>ううう</th></tr>
<tr><td>aaa</td><td>iii</td><td>uuu</td></tr>
</table>

<style type="text/css">
<!--
table{
    border-top:1px solid #666;
    border-right:1px solid #666;
}

th{
    border-left:1px solid #666;
    border-bottom:1px solid #666;
}

td{
    border-left:1px solid #666;
    border-bottom:1px solid #666;
}
-->
</style>

上のソースの意味は以下の様な感じです。

• htmlソースの<table>でcellspacing="0"と指定。
  - これはCSSでは定められないのか？margin,paddingを指定しても無理だった。
• <table>全体で、上部と右部のborderを指定。
• 各セル（<th>,<td>）それぞれに、左部と下部のborderを指定。
  もちろん、<th>を使わなければそこは省略すること。

Created On:2005/2/27 18:34