3

問題を解決しようとしています。これは、次のデザインのテーブルの HTML コードを作成する必要がある HTML 演習です。

欲しかったテーブルのデザイン

しかし、私はそれをまっすぐに設定できないようです。これが私のコードです:

    <table border>
        <tr>
            <td rowspan="2" colspan="2"> Batatas </td>
            <td rowspan="3" colspan="2"> Couves </td>
            <td> Alhos </td>
            <td> Cebolas </td>
        </tr>
        <tr> 
            <td rowspan="2" colspan="2"> Alface </td>
        </tr>
        <tr> 
            <td colspan="2"> Nabos </td>
        </tr>

    </table>

結果は次のとおりです。

ここに画像の説明を入力

最初の "td" タグの rowspan="2" は、最初のセルを (高さで) 大きくするべきではありませんか?

私は何を間違っていますか？

4

3 に答える 3

2

こちらのオンライン ツールをお試しください: http://html-tables.com/

セル結合のみを使用している場合、3 行が 2 行に折りたたまれる様子が視覚的にわかります。

その効果を得るには、テーブルをネストする必要があると思います。

于 2013-09-01T16:10:04.640 に答える
1

実際に直面している問題は、コードが原因ではなく、html テーブル レンダリングの一般的なルールが原因です。これは、テーブル セルのマージが原因で発生します。

タグのこの欠点を解決するには、より良いアプローチとしてタグ<table>を使用することをお勧めします。 これを試して....<div>

  <table border>
        <tr>
            <td rowspan="2" colspan="1"> Batatas </td>
            <td rowspan="3" colspan="1"> Couves </td>
            <td rowspan="1" colspan="1"> Alhos </td>
            <td rowspan="1" colspan="1"> Cebolas </td>
        </tr>

        <tr> 
            <td rowspan="1" colspan="2"> Alface </td>
        </tr>

        <tr rowspan="1" colspan="2"> 
            <td> Nabos </td>
        </tr>

    </table>

アップデート

私が気づいたように、これは<table>タグを使用して行うことはできませんdiv。アプローチを使用できます。これらのdivタグは、レイアウトを生成できます。

私はあなたの問題への取り組みを終えたところです。<div>タグを使用して問題を解決しました。

<div style=" background-color: powderblue;border:1px solid black; width:410px; height:310px">
<div style="float:left;">
    <div style="border:1px solid black; width:100px; float:none; height:200px">Batatas
    </div>
    <div style="border:1px solid black; width:100px; float:none; height:99px">Nabos
    </div>
</div>
<div>   
    <div style="border:1px solid black;width:100px; float:left; height:301px">Couves
    </div>
    <div style="border:1px solid black;width:100px; float:left; height:100px">Alhos
    </div>
    <div style="border:1px solid black;width:100px; float:left; height:100px">Cebolas
    </div>
    <div style="border:1px solid black;width:202px; float:left; height:199px">Alface
    </div>
</div>
</div>
于 2013-09-01T16:31:35.810 に答える