■ 外枠のみのＢＯＸ（四角枠）の作成

すごくシンプルな外枠のみの四角の作成方法です。

最も簡単な方法は４辺とも同じ太さの外枠です。
この方法ならスタイル属性だけで済みます。

しかし、各辺の太さを変えたい場合はスタイルシートで記述した方がわかりやすいでしょう。

言葉で説明するとわかりにくいので簡単なサンプルを作ってみました。

※スタイルシートやスタイル属性の詳しい説明は、「HTMLの解説」－「15.スタイルシート」や「HTMLの解説」－「14.スタイル属性」を参照してください。

【　解　　　　説　】

最も簡単な方法はスタイル属性の「border」などを使用する方法です。
<table style="width: 200px; height: 100px; border:1px solid #ff00ff;">
<tr>
<td align="center">最も簡単な方法</td>
</tr>
</table>

ただ、この場合は細かな設定ができませんし、４辺とも同じ太さになります。
少し複雑ではありますが、次の方法を使用すればかなり自由度の高い表が作成できます。
スタイルシートを使うとより簡単に作成することができます。

まず、先ほどと同じようにテーブル（表）を次のように作成します。
<table>
<tr>
<td style="text-align: center;">外枠のみのＢＯＸ（四角）</td>
</tr>
</table>

上記のテーブル（表）にスタイル属性を使って「class="tbl1"」と定義します。
<table class="tbl1">

次に、それぞれの属性に合わせたスタイルシートを次のように記述すると完成です。
<style type="text/css"> <!-- .tbl1{ width: 200px; height: 100px; border-top: 8px solid #ff00ff; border-bottom: 8px solid #ff00ff; border-left: 1px solid #ff00ff; border-right: 1px solid #ff00ff; } --> </style>

上記のサンプルは次のようなタグで作成されています。

【記述サンプル】

【スタイルシート部】
<style type="text/css"> <!-- .tbl1{ width: 200px; height: 100px; border-top: 8px solid #ff00ff; border-bottom: 8px solid #ff00ff; border-left: 1px solid #ff00ff; border-right: 1px solid #ff00ff; } --> </style>

【記述サンプル】

【テーブルの記述】
<table class="tbl1">
<tr>
<td style="text-align: center;">外枠のみのＢＯＸ（四角）</td>
</tr>
</table>