1

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

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

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

任何建议表示赞赏。

问候。

4

5 回答 5

2

如果您想将页面拆分为 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

于 2012-06-06T14:31:10.873 回答
0

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

于 2012-06-06T14:19:45.410 回答
0 
<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/

于 2012-06-06T14:22:27.063 回答
0

回答“将 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>
于 2012-06-06T14:22:58.873 回答
0

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

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

于 2012-06-06T14:36:54.253 回答