3. 応用範囲は意外に広い

この枠線作成のテクニックは、いろいろ応用が利きます。

たとえば、こんなカンジです。

内側のセルを 2 行にして、1行目のセルには色を付けないようにします。こうすると、外側のセルの色が、そのまま表示されます(要するに透けて見えるわけです)。

1行目のセルにある文字はボールドにして、色を付けます。

<table width="500" border="0" cellspacing="0" cellpadding="1">
 <tr>
  <td bgcolor="#1e90ff">
   <table width="100%" border="0" cellspacing="0" cellpadding="5">
    <tr>
     <td><b><font color="#f0ffff">注意事項！</font></b></td>
    </tr>
    <tr>
     <td bgcolor="#f0ffff">この上のセルの色は付けないこと。外側のセルの色が表示されます。</td>
    </tr>
   </table>
  </td>
 </tr>
</table>

テーブルの入れ子を何重かにすることで立体感を表現することもできます。タイトルなどに使えそうですね。

<table width="500" border="0" cellspacing="0" cellpadding="1">
 <tr>
  <td bgcolor="#b22222">
   <table width="100%" border="0" cellspacing="0" cellpadding="2">
    <tr>
     <td bgcolor="#a52a2a">
      <table width="100%" border="0" cellspacing="0" cellpadding="3">
       <tr>
        <td bgcolor="#a0522d">
         <table width="100%" border="0" cellspacing="0" cellpadding="4">
          <tr>
          <td bgcolor="#cd853f">
            <table width="100%" border="0" cellspacing="0" cellpadding="5">
             <tr>
              <td align="center" bgcolor="#f4a460"><b><font color="#800000">ウェブ・デザイン・チップス/<font></b></td>
             </tr>
            </table>
           </td>
          </tr>
          </table>
         </td>
       </tr>
      </table>
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>