1

私は HTML と CSS の初心者です。私は次の最善の方法は何だろうと思っています：

1) 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

これは、「4つの要素を2 x 2の形式で表示するには、テーブルまたは他の方法を使用する必要がありますか？」という質問に還元できるようです。要素がテーブルであるか他のものであるかは、基本的な質問とは無関係のようです。

4つの要素が論理的に2×2テーブルを構成する場合は、マークアップでそのようなテーブルにします。2 x 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>

This would result in a 2 by 2 rendering if there is enough width, but in a narrow window, A, B, C, D would appear in a 4 by 1 formation. If you use a table, then a narrow window would force horizontal scrolling. The choice really depends on which alternative is better for the content and structure.

于 2012-06-06T14:36:54.253 に答える
0

正直なところ、1 つのテーブル、2 つの行、1 行あたり 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ビューポートに固定された方法で配置された4 つの要素を使用できます。

<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 があなたの質問へのコメントで言ったように: 2 つの行と行ごとに 2 つのセルを持つ 1 つのテーブルを作成します。これらの各セルで、td タグ内に 1 つのテーブルを配置します。

<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 に答える