Question

我试图在html中对齐两个单独的表。我希望它们的中心位于左侧，一个位于右侧，一些位于桌子之间。这是我目前设置的代码。我让它们对齐，但是一个是左边的，一个是正确的，它们之间有很多空间。 Html的新功能，我们将不胜感激！

    <h1>
    Retrofit</h1>
    <p>
    Kendell Retrofit is the latest division to the Kendell divisions. Our Retrofit team includes customer service, outside sales, production and keying specialists.&nbsp;</p>
    <div>
    <table style="float:left">
    </table>
    <table align="left" border="0" cellpadding="0" cellspacing="2" style="width: 150px;">
        <thead>
            <tr>
                <th scope="col" style="text-align: left;">
                    Markets:<br />
                    &nbsp;</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <ul>
                        <li>
                            Commercial</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <ul>
                        <li>
                            Financial</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <ul>
                        <li>
                            Global</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <ul>
                        <li>
                            Government</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <ul>
                        <li>
                            Healthcare</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <ul>
                        <li>
                            Higher Education</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <ul>
                        <li>
                            K-12 Education</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <ul>
                        <li>
                            Retail</li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
    </div>
    <div>
    <table style="float:right">
    </table>
    <table align="right" border="0" cellpadding="0" cellspacing="2" style="width: 150px;">
        <thead>
            <tr>
                <th scope="col" style="text-align: left;">
                    <p>
                        Brands:</p>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <ul>
                        <li>
                            Arrow</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <ul>
                        <li>
                            Best</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <ul>
                        <li>
                            Corbin Russwin</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <ul>
                        <li>
                            Dorma</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <ul>
                        <li>
                            Falcon</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <ul>
                        <li>
                            Kwikset</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <ul>
                        <li>
                            Sargent</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <ul>
                        <li>
                            Schlage</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <ul>
                        <li>
                            Stanley</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <ul>
                        <li>
                            Weiser</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <ul>
                        <li>
                            Yale</li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<hr />
<p>
    &nbsp;</p>

Answer 1

基本嵌套表将执行此操作。

<table width="600px" >
    <tr>
       <td style="width: 50%;" >
          <table width="100%" >
             <tr>
                <td>
                   content of left side
                </td>
             </tr>
          </table>
       </td>
    </tr>
    <tr>
       <td style="width: 50%;" >
          <table width="100%" >
             <tr>
                <td>
                   content of right side
                </td>
             </tr>
          </table>
       </td>
    </tr>
 </table>

检查here

注意：margin: 0 auto;使您的表位于中心

Answer 2

而不是使用float left / right使用inline-table，如下所示：

table
{
display:inline-table;
}

这样你可以并排放置桌子。

Answer 3

如果将“style =”width：150px“的值更改为一个更高（200px或250px），它是否有效？

Answer 4

您只需要浮动第一个表。然后你只需添加margin-right: 50px;（例如），第二个就在它旁边，距离50px。如果你想将它们都居中，将它们放在一个宽度为div的div中并添加margin: 0 auto;。 Here是一个jsbin示例。

P.S。：按右上角的编辑以查看代码。将这个浮点数用于第一个表，使用2个单独的表和margin: 0 auto;到父div的好处是它具有响应性。尝试调整浏览器窗口的大小，您将看到表格如何分离较小的分辨率（适用于设计在智能手机上运行的网站）

Answer 5

请参阅此DEMO

你可以试试第二张桌子：

<table style="float:left">

并替换第二个表：

align="right"

与

align="left"

Answer 6

它们未对齐，因为您在第一个表中有Markets:<br />  而在第二个表中有<p>Brands:</p>。你需要与他们保持一致。

您可以在第一个div上使用float:left;和margin-right来获取间距。

JSBin样本（看起来像小提琴已经失效）

在HTML中对齐两个表

6 个答案: