私の目的は、フォトフレームのようなHTMLページを作ることです。つまり、4枚の写真で囲まれた真っ白なページを作りたいのです。
これが私のコードです。
<table>
<tr>
<td class="bTop" colspan="3">
</td>
</tr>
<tr>
<td class="bLeft">
</td>
<td class="middle">
</td>
<td class="bRight">
</td>
</tr>
<tr>
<td class="bBottom" colspan="3">
</td>
</tr>
</table>
そして、CSSクラスは以下のようになっています。
.bTop
{
width: 960px;
height: 111px;
background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
width: 212px;
height: 280px;
background-image: url('../Images/BackLeft.jpg');
}
.middle
{
width: 536px;
height: 280px;
}
.bRight
{
width: 212px;
height: 280px;
background-image: url('../Images/BackRight.jpg');
}
.bBottom
{
width: 960px;
height: 111px;
background-image: url('../Images/BackBottom.jpg');
}
問題は、テーブルのセルとセルの間に薄く白い線が入ってしまうことです。つまり、画像の境界線が連続していないのです。どうすればこのような白いスペースを避けることができますか?
<table cellspacing="0" cellpadding="0">
そして、cssでは
table {border: none;}
EDIT: iGELが指摘しているように、この解決策は公式に非推奨となっています(まだ使えますが)ので、もしゼロから始めるのであれば、jnpcl's border-collapseの解決策を使うべきです。
今のところ、私はこの変更を非常に気に入っていません(テーブルをあまり扱わないので)。いくつかの作業が少し複雑になっています。例えば、2つの異なるボーダーを同じ場所に(視覚的に)表示させたい場合、1つはある行の最上部、もう1つは別の行の最下部に表示されます。これらのボーダーは崩れてしまいます(=片方しか表示されません)。この場合、ボーダーの優先順位はどのように計算されるのか、また、どのようなボーダースタイルが強いのか(ダブルとソリッドなど)を検討する必要があります。
私はこのようにしました。
<table cellspacing="0" cellpadding="0">
<tr>
<td class="first">first row</td>
</tr>
<tr>
<td class="second">second row</td>
</tr>
</table>
----------
.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}
さて、ボーダーの折りたたみでは、常にボーダーが1つ削除されてしまうので、これではうまくいきません。何か別の方法でやらなければなりません(もちろん他にも解決策はあります)。一つの可能性はCSS3のbox-shadowを使うことです。
<table class="tab">
<tr>
<td class="first">first row</td>
</tr>
<tr>
<td class="second">second row</td>
</tr>
</table>
<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}
</style>
また、ボーダーを1つだけにして、"groove|ridge|inset|outset"のようなボーダースタイルを使うこともできます。しかし、私にとっては、両方の色をコントロールすることができないので、これは最適ではありません。
もしかしたら、ボーダーを折りたたむためのシンプルで素晴らしいソリューションがあるかもしれませんが、私はまだそれを見たことがありませんし、正直なところ、あまり時間をかけていません。もしかしたら誰かが教えてくれるかもしれません。)