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

ステップアップ&テクニック - ホームページ作成ガイド

HTML&CSS Web制作リファレンス
- ホームページの構築・運用 -

< HOME / ホームページ作成ガイド / 見出し付きのボックス(TABLE)
見出し付きのボックス(TABLE)


テーブルタグを使用して、見出し付きのボックスを作成してみます。

※枠付きボックスの基本的な説明は、「枠付きボックス(テーブル)」をご覧ください。
※テーブルタグについての詳細は、「テーブルタグ」カテゴリーをご覧ください。

「テーブルタグの使用について」もご覧ください。


 作り方
「枠付きボックス(テーブル)」で作成したボックスに、見出し用のセルをひとつ追加します。

次のように指定すると、見出し用のセルは枠線と同色になり、見出しの帯が付いたボックスになります。

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


<FONT COLOR="#FFFFFF"><B>HP作成情報</B></FONT>

</TD>
</TR>
<TR>
<TD BGCOLOR="#E3F0FB">


ホームページの作成について。
<BR>
ここに内容を入れていきます。



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


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

HP作成情報
ホームページの作成について。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。


見出し文字の周囲に余裕を持たせたい場合は、TABLEタグCELLPADDING="" を指定します。
※内容を入れているセルにも指定内容が反映されます。

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


<FONT COLOR="#FFFFFF"><B>HP作成情報</B></FONT>

</TD>
</TR>
<TR>
<TD BGCOLOR="#E3F0FB">


ホームページの作成について。
<BR>
ここに内容を入れていきます。



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


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

HP作成情報
ホームページの作成について。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。


見出しの文字を中央に配置したい場合は、見出し用のTDタグALIGN="center" を指定するか、TDタグのかわりにTHタグを使用します。

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


<FONT COLOR="#FFFFFF"><B>HP作成情報</B></FONT>

</TD>
</TR>
<TR>
<TD BGCOLOR="#E3F0FB">


ホームページの作成について。
<BR>
ここに内容を入れていきます。



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


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

HP作成情報
ホームページの作成について。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。


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


<FONT COLOR="#FFFFFF">HP作成情報</FONT>

</TH>
</TR>
<TR>
<TD BGCOLOR="#E3F0FB">


ホームページの作成について。
<BR>
ここに内容を入れていきます。



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


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

HP作成情報
ホームページの作成について。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。


見出しの帯を枠線とは違う色にしたい場合は、見出し用のTDタグBGCOLOR="" を指定します。

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


<B>HP作成情報</B>

</TD>
</TR>
<TR>
<TD BGCOLOR="#E3F0FB">


ホームページの作成について。
<BR>
ここに内容を入れていきます。



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


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

HP作成情報
ホームページの作成について。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。



 見出しの背景に画像を使う
見出しの背景に画像を使いたいときは、見出し用のTDタグBACKGROUND="" を指定します。

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


<B>HP作成情報</B>

</TD>
</TR>
<TR>
<TD BGCOLOR="#E3F0FB">


ホームページの作成について。
<BR>
ここに内容を入れていきます。



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


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

HP作成情報
ホームページの作成について。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。

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



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


HTML5HTMLタグCSSカラーチャートWeb便利ツールテンプレートJavaScript
< HOME PageTop▲