表格内的 HTML 表格

Question

我对 HTML 和 CSS 有点陌生。我想知道最好的方法是：

1) 在一页上以正方形的形式排列 4 个表格——即，每个表格都是一个象限，或者

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

感谢任何建议。

问候。

Answer 1

如果您想将页面拆分为 2X2 表格，最好的方法是使用 Divs（也更容易在 divs 上应用 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

回答“将 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 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

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

如果这四个元素在逻辑上构成一个 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 x 2 渲染，但在狭窄的窗口中，A、B、C、D 将以 4 x 1 的形式出现。如果您使用表格，那么狭窄的窗口将强制水平滚动。选择实际上取决于哪种选择更适合内容和结构。

Answer 5

老实说，听起来您想要 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/