それで、あなたはそれを「昔ながらの方法」でやりたいのです。なぜなら、サポートの欠如のためにボーダーイメージがあなたを困惑させているからですか？さて、これが昔ながらの方法です、多かれ少なかれ：
<body>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr valign="top">
<td class="upper-left" align="left"><img src="/image/blank.gif" alt="" height="20" width="20"></td>
<td class="upper-center" width="100%"><img src="/image/blank.gif" alt=""height="20" width="20"></td>
<td class="upper-right" align="right"><img src="/image/blank.gif" alt="" height="20" width="20"></td>
</tr>
<tr valign="top">
<td class="middle-left"><img src="/image/blank.gif" alt="" height="20" width="20"></td>
<td width="100%">
<!-- content below -->
<!-- content above -->
</td>
<td class="middle-right"><img src="/image/blank.gif" alt="" height="20" width="20"></td>
</tr>
<tr valign="top">
<td class="lower-left" align="left"><img src="/image/blank.gif" alt="" height="20" width="20"></td>
<td class="lower-center" width="100%"><img src="/image/blank.gif" alt=""height="20" width="20"></td>
<td class="lower-right" align="right"><img src="/image/blank.gif" alt="" height="20" width="20"></td>
</tr>
</tbody>
</table>
</body>
そしてCSS：
<style type="text/css">
body { padding: 0; margin: 0; }
table tbody tr td { background-repeat: repeat; background-position: 0 0; }
.upper-left {background-image: url(/images/b-01-tl.jpg);}
.upper-center {background-image: url(/images/b-01-mt.jpg);}
.upper-right {background-image: url(/images/b-01-tr.jpg);}
.middle-left {background-image: url(/images/b-01-ml.jpg);}
.middle-right {background-image: url(/images/b-01-ml.jpg);}
.lower-left {background-image: url(/images/b-01-bl.jpg);}
.lower-center {background-image: url(/images/b-01-mb.jpg);}
.lower-right {background-image: url(/images/b-01-bl.jpg);}
</style>
したがって、テーブル自体では、境界線の画像を互いに完全に位置合わせする必要があります。そのため、必要なのcellspacing="0" cellpadding="0" border="0"は、パディングが0で、境界線の折りたたみが最近折りたたまれるように設定されていることを確認することで解決できる可能性があります。この種のテーブルは、必要に応じて伸縮性があります。全幅にすることも、（この例では）60ピクセルまで狭くすることもできます。width属性は、値の一部として「px」を使用しないことに注意してください。つまり、100％は100％ですが、60pxはちょうど60です。
真ん中の列では、最後の列が誤って広くなりすぎないようwidth="100%"にそれぞれ<td>に設定し、適切な幅を維持するように強制しています。そのため、セルに空白のgifを使用して、背景が見えるようにします。適切なサイズを取得します。場合によっては これを使用することもありますが、サイズが予測できない場合があります。これらの境界線の高さを2ピクセルにしたい場合は、危険にさらされます。しばらくの間、人々は実際のNetscape<spacer>タグを使用していましたが、それはあまりうまく機能しませんでした。
align ="left"とalign="right"は、実際には習慣から外れています。左右の<img>タグに空白のgifを使用する代わりに、実際の画像を使用した場合は、それを行うことができます。
この例では、実際にCSSを使用して背景を適用していますが、これを理解できない過去10年間に作成されたブラウザーは考えられず、保守が少し簡単です。私はこのbackground属性を使うのが好きではありませんでした。将来、一部のブラウザーではこの属性のサポートが廃止されると思います（まだサポートされていない場合）。このソリューションは、そのように後方および前方に見えます。当時、私はこの種のマークアップをたくさん行いました。
通常、このような境界線を作成する場合は、境界線にある程度一致する背景色も含めます。これは、bgcolor属性を使用して行います。この属性<tr>を1回指定するか、テーブル全体に配置してから、必要な場所のセル。これには、マークアップが少ない方が常に優れています。そうしないと、ドキュメント内の検索と置換がかなりうまくいきます。残念ながら、古いディズニーランドのサイトの例は利用できませんが、http：//web.archive.org/web/199 80709083315/http： //namco.com/には、テーブルやスペーサーgifを使用してインスピレーションを与えることがたくさんあります。君。