2

次のコードを使用してホームページをデザインしています。出力 (以下に示す) が正しく表示されません。バナーが左端に移動し、ナビゲーション リンクの間に大きなギャップがあることがわかります。これを設定するには？TABLE の代わりに DIV タグのみを使用して実行できますか?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title>
    First Website
  </title>
</head>

<body>
      <table  id="main" align="center" width="600 px">
        <tr  id="trBanner">
            <td  id="tdBanner">
                <img src="../../../My Pictures/banner copy.bmp.jpg"
            </td>
        </tr>
        <tr  id="trNavLinks">
            <td  id="lnkHome">
                  <a href="" id="lnkHome" name="lnkHome">Home</a>
            </td>
            <td  id="lnkLife">
                  <a href="" id="lnkLife" name="lnkLife">Life</a>
            </td>
            <td  id="lnkTeachings">
                  <a href="" id="lnkTeachings" name="lnkTeachings">Teachings</a>
            </td>
            <td  id="lnkExperiences">
                  <a href="" id="lnkExperiences" name="lnkExperiences">Experiences</a>
            </td>
            <td  id="lnkPhotoGallery">
                  <a href="" id="lnkPhotoGallery" name="lnkPhotoGallery">Photo Gallery</a>
            </td>
            <td  id="lnkReach">
                  <a href="" id="lnkReach" name="lnkReach">How to Reach</a>
            </td>
            <td  id="lnkContact">
                  <a href="" id="lnkContact" name="lnkContact">Contact Us</a>
            </td>
        </tr>
      </table>
</body>

</html>

代替テキスト http://www.freeimagehosting.net/uploads/b122c4ef21.jpg

4

4 に答える 4

6

コードを非常に長く表示することなく、テーブルを使用しないでください。

ウェブデザインでテーブルを使って長い間開発してきた人々にとっては難しいことだと思いますが、信じてください - CSS と DIV タグを使ってテーブルをデザインする方法を学んだ後、これに感謝するでしょう!

ここにあなたのためのチュートリアルがあります: http://www.colorplexstudios.com/articles/div_web_design_tutorial/

そして、コードの質問に対する答えが必要な場合は、最初の行に 1 つのセルがあり、2 番目の行に 3 つのセルがあるためです。colspan 属性を使用します。これに関するチュートリアルは、http ://www.htmlcodetutorial.com/tables/index_famsupp_30.html にあります。

于 2010-03-21T15:58:21.110 に答える
1

テーブルを使用せず、div タグと位置属性を適切に組み合わせて使用​​してください。表よりもはるかに優れており、変更が必要な場合はより編集しやすくなっています。

于 2010-03-21T16:09:07.807 に答える
1

ええ、テーブルを削除します。代わりに UL を使用し、CSS で display: inline を使用します。次に、好みに合わせて調整します（マージン、パディング）。それをdivの中に入れて、ページに配置します。

于 2010-03-21T16:11:41.807 に答える
1

他の人が推奨しているように、テーブルはサイトのレイアウトに最適な要素ではありません。ただし、簡単な修正は次のとおりです。

<td  id="tdBanner" colspan="7">

これにより、バナーがテーブルの幅全体に広がります。余談ですが、ページの ID は一意である必要があるため、tdタグに ID を付ける必要がある場合は、タグとは異なるものにする必要がありaます。

他の人がリンクしている CSS チュートリアルのいくつかをチェックします。

于 2010-03-21T16:16:28.663 に答える