控件未正确对齐
我正在使用以下代码来设计我的主页。输出（如下所示）未正确显示。您可以看到横幅转到最左侧，并且导航链接之间有很大的间隙。这个要怎么设置呢？可以只使用 DIV 标签而不是 TABLE 来完成吗？
<!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>
I am using following code to design my home page. The output (as shown below) is not appearing properly. You can see the banner going to far left and the navigation links have a huge gap in between. How to set this? Can it be done using only the DIV tag instead of TABLE?
<!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>
alt text http://www.freeimagehosting.net/uploads/b122c4ef21.jpg
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
没有看到你的代码很长 - 不要使用表格！
我知道对于那些在网页设计中长期使用表格进行开发的人来说这很困难，但相信我 - 在您学会了如何使用 CSS 和 CSS 来设计它之后。 DIV-Tags，你会为此感谢上帝！
这是为您准备的教程：http://www.colorplexstudios.com/articles/div_web_design_tutorial/
如果您想得到代码问题的答案：
这是因为第一行有 1 个单元格，第二行有 3 个单元格。使用 colspan 属性。您可以在这里找到相关教程： http://www.htmlcodetutorial.com/tables/index_famsupp_30.html
Without seeing your code very long - don't use tables!
I know it's hard for those people who developed a long time with tables in webdesign, but belive me - after you learned how to design it with CSS & DIV-Tags, you will thank god for this!
Here is a tutorial for you: http://www.colorplexstudios.com/articles/div_web_design_tutorial/
And if you want to have an answer to your code-question:
It's because you have 1 cell in the first row and 3 cells in the second row. Use the colspan-attribute. You find a tutorial for this here: http://www.htmlcodetutorial.com/tables/index_famsupp_30.html
不要使用表格，使用 div 标签和位置属性的正确组合。它们比表格好得多，并且如果您需要进行任何更改，它们也更可编辑。
Don't use tables, use a right combination of div tags and position attributes. They're way better than tables, and more editable if you need to make any changes.
哎呀，删除桌子。请改用 UL，并在 CSS 中使用 display: inline 。然后根据您的喜好进行调整（边距、填充）。将其放在 div 内，并将其放置在页面中。
Eek, remove the tables. Use a UL instead, with display: inline on it in the CSS. Then adjust it to your liking (margin, padding). Put that inside of a div, and position it in your page.
正如其他人所建议的那样，表格并不是最适合您网站布局的元素。然而，简单的解决方法是：
这将使您的横幅横跨表格的整个宽度。顺便说一句，页面上的 id 应该是唯一的，因此如果您需要为
td标记提供 id，它们应该与a标记不同。我会查看其他人链接到的一些 CSS 教程。
As others have recommended, tables are not the most appropriate element for your site's layout. However, the simple fix is:
This will make your banner span the entire width of your table. On a side note, the ids on a page should be unique, so if you need to give an id to your
tdtags, they should be different than theatags.I would check out some of the CSS tutorials that others have linked to.