网站的 HTML 布局无法正确显示

Question

我正在使用 MediaWiki 为在线游戏制作 wiki。但是，我似乎无法修复这个简单的错误。查看屏幕截图。请忽略媒体 wiki 代码，例如“”。他们的意思是粗体标签。这段代码似乎一切正常，但我认为问题与 align= 有关。先谢谢你。

<table border="1" style="margin-right: 5px; margin-bottom: 5px; border-collapse: collapse; width: 25%;" align="left">
<tr>
<td height="30px" style="text-align: center; font-weight: bold; background-color: #639CFB;">Wiki Links</td>
</tr>
<tr>
<td style="height: 190px; vertical-align: top; background-color: #C5D8FF;"><div id="zonecontent" style="margin: 5px;">
<ul>
<li>[http://link.com/to/contact/page Website Support]</li>
</ul>
</div></td>
</tr>
</table>
<table border="1" style="margin-right: 5px; margin-bottom: 5px; border-collapse: collapse; width: 25%;" align="left">
<tr>
<td height="30px" style="text-align: center; font-weight: bold; background-color: #639CFB;">Zone iPhone Support</td>
</tr>
<tr>
<td style="height: 190px; vertical-align: top; background-color: #C5D8FF;"><div id="zonecontent" style="margin: 5px;">All content goes here.</div></td>
</tr>
</table>
<table border="1" style="margin-right: 5px; margin-bottom: 5px; border-collapse: collapse; width: 25%;" align="left">
<tr>
<td height="30px" style="text-align: center; font-weight: bold; background-color: #639CFB;">Zone iPhone Staff Information</td>
</tr>
<tr>
<td style="height: 190px; vertical-align: top; background-color: #C5D8FF;"><div id="zonecontent" style="margin: 5px;">All content goes here.</div></td>
</tr>
</table>
<table border="1" style="margin-right: 5px; margin-bottom: 5px; border-collapse: collapse; width: 25%;">
<tr>
<td height="30px" style="text-align: center; font-weight: bold; background-color: #639CFB;">Zone iPhone Shops</td>
</tr>
<tr>
<td style="height: 190px; vertical-align: top; background-color: #C5D8FF;"><div id="zonecontent" style="margin: 5px;">All content goes here.</div></td>
</tr>
</table>
<table border="1" style="margin-right: 5px; margin-bottom: 5px; border-collapse: collapse; width: 25%;" align="left">
<tr>
<td height="30px" style="text-align: center; font-weight: bold; background-color: #639CFB;">Zone iPhone Staff Events</td>
</tr>
<tr>
<td style="height: 190px; vertical-align: top; background-color: #C5D8FF;"><div id="zonecontent" style="margin: 5px;">All content goes here.</div></td>
</tr>
</table>
<table border="1" style="margin-right: 5px; margin-bottom: 5px; border-collapse: collapse; width: 25%;" align="left">
<tr>
<td height="30px" style="text-align: center; font-weight: bold; background-color: #639CFB;">Zone iPhone Games</td>
</tr>
<tr>
<td style="height: 190px; vertical-align: top; background-color: #C5D8FF;"><div id="zonecontent" style="margin: 5px;">All content goes here.</div></td>
</tr>
</table>
<table border="1" style="margin-right: 5px; margin-bottom: 5px; border-collapse: collapse; width: 25%;" align="left">
<tr>
<td height="30px" style="text-align: center; font-weight: bold; background-color: #639CFB;">NPC Information</td>
</tr>
<tr>
<td style="height: 190px; vertical-align: top; background-color: #C5D8FF;"><div id="zonecontent" style="margin: 5px;">All content goes here.</div></td>
</tr>
</table>
<table border="1" style="margin-right: 5px; margin-bottom: 5px; border-collapse: collapse; width: 25%;" align="left">
<tr>
<td height="30px" style="text-align: center; font-weight: bold; background-color: #639CFB;">External Links</td>
</tr>
<tr>
<td style="height: 190px; vertical-align: top; background-color: #C5D8FF;"><div id="zonecontent" style="margin: 5px;">All content goes here.</div></td>
</tr>
</table>
<table border="1" style="margin-right: 5px; margin-bottom: 5px; border-collapse: collapse; width: 50%;">
<tr>
<td height="30px" style="text-align: center; font-weight: bold; background-color: #639CFB;">About Zone iPhone</td>
</tr>
<tr>
<td style="height: 190px; vertical-align: top; background-color: #C5D8FF;"><div id="zonecontent" style="margin: 5px;">'''Zone iPhone''' is an iOS server made to bring the GraalOnline Server Zone to life on mobile devices. It has vast battlegrounds and fighting with guns. Players can spar each other, help each other on missions, or visit other planets so they can win it. Players can also participate in many events and mini-games, including a similar game to Bomberman.<br /><br />'''Genre:''' Massively Multiplayer Online Role Playing Game<br />'''Date of Release:''' December 17, 2012<br />'''Owner:''' Eurocenter Games<br />'''Manager:''' Matt</div></td>
</tr>
</table>

截图:

Answer 1

不要使用 <table>布局。您显示的数据不是表格数据，因此不要使用 <table> .

使用 block 元素，例如<div>并将它们设置为按逻辑页面顺序 float 或流动。它不仅会解决您遇到的问题，而且您的标记会更加清晰，网络蜘蛛会更好地理解它。

当然，如果您使用的是 MediaWiki，为什么不使用 MediaWiki 语法生成 HTML？