TOP / テーブルタグ（table）関連

2006年06月21日

罫線が1ピクセルのtable

1ピクセルのtable（テーブル）

罫線が1ピクセルの表を作る方法を紹介します。



sq.gif tableで1ピクセル罫線　その1

罫線が1ピクセルの表を作るには、tableを入れ子構造にする方法があります。
ただ、別の簡単な方法がありますし、tableを入れ子状にすると表示が重くなります。昔は一般的でしたが、もうあまり使われない古い時代の方法です。

以下ソースです。コピー＆ペーストでご利用下さい。
<table width="100" heigth="100" bgcolor="#333333" cellspacing="0" cellpadding="0">
<tr>
<td>
<table cellspacing="1">
<tr bgcolor="#ffffff">
<td width="50" height="50">A</td>
<td width="50" height="50">B</td>
</tr>
<tr bgcolor="#ffffff">
<td width="50" height="50">C</td>
<td width="50" height="50">D</td>
</tr>
</table>
</td>
</tr>
</table>

↓↓↓
上のソースをブラウザで表示するとこうなります。
AB
CD


sq.gif tableで1ピクセル罫線　その2

tableを入れ子構造にしなくても、tableの背景色を決めてcellspacing="1"にすれば罫線が1ピクセルの表を作ることができます。

以下ソースです。コピー＆ペーストでご利用下さい。
<table width="100" heigth="100" bgcolor="#333333" cellspacing="0" cellpadding="0">
<tr>
<td>
<table cellspacing="1">
<tr bgcolor="#ffffff">
<td width="50" height="50">1</td>
<td width="50" height="50">2</td>
</tr>
<tr bgcolor="#ffffff">
<td width="50" height="50">3</td>
<td width="50" height="50">4</td>
</tr>
</table>
</td>
</tr>
</table>

↓↓↓
上のソースをブラウザで表示するとこうなります。
12
34




sq.gif tableで1ピクセル罫線　その3

スタイルシートを駆使して罫線が1ピクセルの表を作ることができます。
一番応用が利きますし、この方法が主流かと思います。
スタイルシートに、隣接するセルのボーダーを重ねて表示するborder-collapse:collapseを記述し、tdのボーダーを指定します。

以下ソースです。コピー＆ペーストでご利用下さい。
スタイルシート内（外部・内部）記述
table.smp1 {border-collapse: collapse;}
td.smp {border: solid 1px #333333}

HTML内に記述
<table width="100" heigth="100" class="smp1" border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="#ffffff">
<td class="smp" width="50" height="50">あ</td>
<td class="smp" width="50" height="50">い</td>
</tr>
<tr bgcolor="#ffffff">
<td class="smp" width="50" height="50">う</td>
<td class="smp" width="50" height="50">え</td>
</tr>
</table>

↓↓↓
上のソースをブラウザで表示するとこうなります。
あい
うえ

posted by hiro at 23:36| Comment(0) | TrackBack(0) | テーブルタグ（table）関連