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

HTML&CSS Web制作のインデックス
-各種リファレンスとサンプルコード集-

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

見出し付きのボックス（TABLE）

[新着] Webテンプレートを仮オープンしました

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

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

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

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

　作り方

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

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

<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ツール｜カラーチャート｜HP作成ガイド｜掲示板

< HOME

PageTop▲