TAG 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


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