HTML如何在一行中对齐两个表？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML如何在一行中对齐两个表？相关的知识，希望对你有一定的参考价值。
如何在页面中间的一行中对齐两个表？我希望看到的结果：
11 12 11 12
21 22 21 22
结果我得到：
11 12
21 22
11 12
21 22
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
</table>
答案
请使用此选项，根据要求调整宽度，如果要放置在文档的中心，请使用div并将其对齐页面中心并将以下html放入其中。
<table border="0" cellpadding="0" cellspacing="0" style="width:50%;float:left">
<tbody>
<tr>
<td> 11</td>
<td> 12</td>
</tr>
<tr>
<td> 21</td>
<td> 22</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="width:50%;float:left">
<tbody>
<tr>
<td> 11</td>
<td> 12</td>
</tr>
<tr>
<td> 21</td>
<td> 22</td>
</tr>
</tbody>
</table>
另一答案
您可以创建另一个表并将这两个表嵌入其中：
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
</table>
</td>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
</table>
</td>
</tr>
</table>
或者你可以在css中使用float属性。
另一答案
这个http://jsfiddle.net/pNH3T/是一种可能的解决方案：
<div style="display:block; width:100%">
<div style="margin:0 auto; width:200px;">
<table border="0" cellspacing="0" cellpadding="0" style="float:left; margin-right:10px;">
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" style="float:left">
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
</table>
</div>
</div>
以上是关于HTML如何在一行中对齐两个表？的主要内容，如果未能解决你的问题，请参考以下文章
html 有关如何在任何页面上插入Nuvo Express按钮的小片段。此按钮居中对齐，并在新窗口中打开目标URL。