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

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

< HOME / ホームページ作成ガイド / メニュー（TABLE）
メニュー（TABLE）
テーブルタグを使用して、リンクメニューを作成してみます。

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

※「テーブルタグの使用について」もご覧ください。
　作り方
次の例では、細い枠線を指定したテーブルの中にリンク文字を入れて、縦型と横型のメニューを作成しています。

細い枠線を指定する場合は、テーブル全体の背景色を指定すると同時に、セルの背景色も指定します。そうすることで、テーブル全体の背景色の部分が枠線として表示されます。

枠線の太さは CELLSPACING="" 、枠線の色はTABLEタグの BGCOLOR="" 、 セルの背景色はTRタグまたはTDタグの BGCOLOR="" で指定します。

■縦型のメニュー

<TABLE BORDER="0" WIDTH="150" CELLSPACING="1" CELLPADDING="2" BGCOLOR="#1C79C6">
<TR>
<TD BGCOLOR="#FFFFFF"><A HREF="../../index.html">トップページ</A></TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF"><A HREF="../../html_tag/index.html">WebページA</A></TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF"><A HREF="../../stylesheet/index.html">WebページB</A></TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF"><A HREF="../../javascript/index.html">WebページC</A></TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF"><A HREF="../../color/index.html">WebページD</A></TD>
</TR>
</TABLE>

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

トップページ
WebページA
WebページB
WebページC
WebページD


■横型のメニュー

<TABLE BORDER="0" WIDTH="650" CELLSPACING="1" CELLPADDING="2" BGCOLOR="#1C79C6">
<TR ALIGN="center" BGCOLOR="#FFFFFF">
<TD WIDTH="130"><A HREF="../../index.html">トップページ</A></TD>
<TD WIDTH="130"><A HREF="../../html_tag/index.html">WebページA</A></TD>
<TD WIDTH="130"><A HREF="../../stylesheet/index.html">WebページB</A></TD>
<TD WIDTH="130"><A HREF="../../javascript/index.html">WebページC</A></TD>
<TD WIDTH="130"><A HREF="../../color/index.html">WebページD</A></TD>
</TR>
</TABLE>

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

トップページ WebページA WebページB WebページC WebページD


テーブルの枠線を消すと次のように表示されます。

上記のテーブルから枠線を消すには、TABLEタグの BGCOLOR="" を削除します。次の例では、枠線を消すと同時に CELLSPACING="" に 3 を指定してセルの間隔を少し広げています。

■縦型のメニュー

<TABLE BORDER="0" WIDTH="150" CELLSPACING="3" CELLPADDING="2">
<TR>
<TD BGCOLOR="#FFFFFF"><A HREF="../../index.html">トップページ</A></TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF"><A HREF="../../html_tag/index.html">WebページA</A></TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF"><A HREF="../../stylesheet/index.html">WebページB</A></TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF"><A HREF="../../javascript/index.html">WebページC</A></TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF"><A HREF="../../color/index.html">WebページD</A></TD>
</TR>
</TABLE>

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

トップページ
WebページA
WebページB
WebページC
WebページD


■横型のメニュー

<TABLE BORDER="0" WIDTH="650" CELLSPACING="3" CELLPADDING="2">
<TR ALIGN="center" BGCOLOR="#FFFFFF">
<TD WIDTH="130"><A HREF="../../index.html">トップページ</A></TD>
<TD WIDTH="130"><A HREF="../../html_tag/index.html">WebページA</A></TD>
<TD WIDTH="130"><A HREF="../../stylesheet/index.html">WebページB</A></TD>
<TD WIDTH="130"><A HREF="../../javascript/index.html">WebページC</A></TD>
<TD WIDTH="130"><A HREF="../../color/index.html">WebページD</A></TD>
</TR>
</TABLE>

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

トップページ WebページA WebページB WebページC WebページD


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

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

inserted by FC2 system