HTML index
ホームページ作成ガイド

ステップアップ＆テクニック - ホームページ作成ガイド
HTML&CSS Web制作リファレンス
-ホームページ作成を学ぶ・調べる-

< HOME / ホームページ作成ガイド / 枠付きボックス（TABLE）
枠付きボックス（TABLE）
テーブルタグを使用して、枠付きのボックスを作成してみます。

※テーブルタグについての詳細は、「テーブルタグ」カテゴリーをご覧ください。

※「テーブルタグの使用について」もご覧ください。
　作り方
テーブル全体の背景色を指定すると同時に、セルの背景色も指定します。そうすることで、テーブル全体の背景色の部分が枠線として表示されます。

枠線の太さは CELLSPACING="" 、枠線の色はTABLEタグの BGCOLOR="" 、 ボックス内の背景色はTDタグの BGCOLOR="" で指定します。

また、ボックスの幅を指定する場合は、TABLEタグの WIDTH="" で指定します。

<TABLE BORDER="0" WIDTH="350" CELLSPACING="1" CELLPADDING="0" BGCOLOR="#1C79C6">
<TR>
<TD BGCOLOR="#E3F0FB">

Webサイト作成情報！
<BR>
ここに内容を入れていきます。
・
・

</TD>
</TR>
</TABLE>

・これをブラウザで見ると次のように表示されます

Webサイト作成情報！
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。

上記の例では、枠線の太さを 1 ピクセルに指定しています。


内容と枠線の間に余裕を持たせたい場合は、TABLEタグの CELLPADDING="" を指定します。

<TABLE BORDER="0" WIDTH="350" CELLSPACING="1" CELLPADDING="10" BGCOLOR="#1C79C6">
<TR>
<TD BGCOLOR="#E3F0FB">

Webサイト作成情報！
<BR>
ここに内容を入れていきます。
・
・

</TD>
</TR>
</TABLE>

・これをブラウザで見ると次のように表示されます

Webサイト作成情報！
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。


内容を中央に配置したい場合は、TDタグに ALIGN="center" を指定します。

<TABLE BORDER="0" WIDTH="100%" CELLSPACING="1" CELLPADDING="10" BGCOLOR="#1C79C6">
<TR>
<TD ALIGN="center" BGCOLOR="#E3F0FB">

Webサイト作成情報！
<BR>
ここに内容を入れていきます。ここに内容を入れていきます。
・
・

</TD>
</TR>
</TABLE>

・これをブラウザで見ると次のように表示されます

Webサイト作成情報！
ここに内容を入れていきます。ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。


　ボックスの背景に画像を使う
ボックスの背景に画像を使いたいときは、TDタグに BACKGROUND="" を指定します。

<TABLE BORDER="0" WIDTH="350" CELLSPACING="1" CELLPADDING="10" BGCOLOR="#1C79C6">
<TR>
<TD BACKGROUND="image/back.gif">

Webサイト作成情報！
<BR>
ここに内容を入れていきます。
・
・

</TD>
</TR>
</TABLE>

・これをブラウザで見ると次のように表示されます

Webサイト作成情報！
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。

← 背景に使用した画像（back.gif）


ホームページ作成ガイドTOP

HTMLタグ｜スタイルシート｜JavaScript｜Webツール｜カラーチャート｜テンプレート｜
< HOME PageTop▲

inserted by FC2 system