Question

我有点像HTML和CSS的菜鸟。我想知道最好的方法是什么：

1）在方格形式的页面上排列4个表格 - 即每个表格是一个象限，或

2）将4个表放在另一个表中。

感谢任何建议。

问候。

Answer 1

如果您想将页面拆分为2X2表，最好的方法是使用Div（也更容易在div上应用css）

<div style="width:auto;">
  <div style="float:left; width:50%">
     x-1,y-1
  </div>
  <div style="float:left; width:50%">
     x-2,y-1
  </div>
  <div style="clear:both"></div>
</div>
<div style="width:auto;">
  <div style="float:left; width:50%">
     x-1,y-2
  </div>
  <div style="float:left; width:50%">
     x-2,y-2
  </div>
  <div style="clear:both"></div>
</div>

http://css-discuss.incutio.com/wiki/Why_I_think_divs_are_better_than_tables

Answer 2

老实说，听起来你想要1个表，2行，每行2个单元格。

<table>
    <tbody>
        <tr>
            <td>Top Left</td><td>Top Right</td>
        </tr>
        <tr>
            <td>Bot Left</td><td>Bot Right</td>
        </tr>
    </tbody>
</table>

小提琴：http://jsfiddle.net/jonathansampson/gy5YC/

如果是你的布局，那就有更好的方法......

请注意，虽然这可能会为您提供您想要的布局结构，但使用非表格数据表（想想电子表格）是非法使用该元素。

如果您正在尝试布局页面，则可以使用更好的选项。您可以使用四个div元素，以固定的方式定位到视口：

<div class="panels">
    <div>Top Left</div>
    <div>Top Right</div>
    <div>Bottom Left</div>
    <div>Bottom Right</div>
</div>

小提琴：http://jsfiddle.net/jonathansampson/gy5YC/2/

Answer 3

<table>
  <tr>
    <td> Top left Information Here </td>
    <td> Top right Information here </td>
  </tr>
  <tr>
    <td> Bottom left Information Here </td>
    <td> Bottom right Information here </td>
  </tr>
</table>

<强>的jsfiddle

http://jsfiddle.net/DNYwc/

Answer 4

回答“将4个表放在另一个表中”。你的问题的一部分：正如Jonthan Sampson在他对你的问题的评论中所说：创建一个每行有两行和两个单元格的表。在每个单元格中，将一个表放在td标记中：

<table>
    <tr>
        <td>
            <table>
                <tr>
                    <td>
                        Table 1/4
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table>
                <tr>
                    <td>
                        Table 2/4
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td>
                        Table 3/4
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table>
                <tr>
                    <td>
                        Table 4/4
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Answer 5

这似乎可以简化为“以二乘两种形式显示四个元素的问题，我应该使用表格还是其他方法？”元素是表格还是别的东西似乎与基本问题无关

如果四个元素在逻辑上构成一个2×2表，那么在标记中使它成为一个表。如果在某些情况下，二乘二形成只是首选渲染，那么你可以使用其他方法，例如浮点数，类似

<div style="float: left">A</div>
<div>B</div>
<br clear=all>
<div style="float: left">C</div>
<div>D</div>
<br clear=all>

如果有足够的宽度，这将导致2乘2渲染，但在狭窄的窗口中，A，B，C，D将以4乘1的形式出现。如果使用表格，则窄窗口会强制水平滚动。选择实际上取决于哪种替代方案对内容和结构更有利。

表格中的HTML表格

5 个答案:

如果是你的布局，那就有更好的方法......