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

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作成情報

PageTop▲

　見出しの背景に画像を使う

見出しの背景に画像を使いたいときは、見出し用の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）

PageTop▲

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

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

< HOME

PageTop▲

HTML indexについて - ご利用について - プライバシー - - 広告掲載 - OEMサービス - お問い合わせ

ホスティング by FC2サーバー

- ホームページ作成を支援する HTMLインデックス Webサイト -

初心者向け講座、情報交換、支援ツール等、Web制作を幅広く学習できるサイトです