1

私が取得しようとしているもの：

+---------+---------------------------+--------------+
|         |                           |              |
+---------+                           |              |
|         |                           |              |
|         +-----------------+---------+              |
|         |                 |         |              |
|         +-----------------+         |              |
|         |                 |         |              |
|         +-----------------+         |              |
|         |                 |         |              |
+---------+-----------------+---------+              |
|         |                 |         |              |
+---------+-----------------+---------+--------------+

HTML：

<table>
    <tr>
        <td></td>
        <td rowspan="2" colspan="2"></td>
        <td rowspan="6"></td>
    </tr>
    <tr>
        <td rowspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td rowspan="3"></td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

しかし、これは機能していません。2*2セルの最初の行の2番目の列をマージできません。いつもcolspan="2"だけになります。はrowspan="2"機能していません。http://html-tables.com/のようなHTMLテーブルジェネレータサイトを使用してこれを作成しようとしましたが、そこでも機能しません。

これは私が得ているものです：

+---------+---------------------------+--------------+
|         |                           |              |
+---------+-----------------+---------+              |
|         |                 |         |              |
|         +-----------------+         |              |
|         |                 |         |              |
|         +-----------------+         |              |
|         |                 |         |              |
+---------+-----------------+---------+              |
|         |                 |         |              |
+---------+-----------------+---------+--------------+

HTMLではどこでも機能しないため、これは不可能だと思いますか？私が望む結果を達成する方法はありますか？図面に示されているように。

4

2 に答える 2

1

まず、グラフィックプレゼンテーションには6行ありますが、テーブルには5つのtr要素しかありません。これを修正するには、4番目のtr要素を複製します。

  <tr>
      <td></td>
  </tr>

この修正後も、テーブルは正しく表示されませんが、実際のコンテンツがないためです。2列目が正の高さである必要があるものは何もありません。2番目の要素に複数行のコンテンツを追加するtdと、2番目の行の高さが増すことがわかります。

于 2012-12-25T19:20:46.630 に答える
0

テーブルの列数と行数が一致していないことを確認してください。div要素内で、以下のようにhtmlテーブルを作成できます。

<div>
    <table border="1" width="50%" cellspacing="10" cellpadding="10">
        <tr>
            <td style="width:60px"></td>
            <td></td>
            <td rowspan="3"></td>
        </tr>
        <tr style="height:50px">
            <td colspan="2">
                <table border="1" width="100%" cellspacing="10" cellpadding="10">
                    <tr>
                        <td></td>
                        <td>
                            <table width="100%"  cellpadding="10" cellspacing="10" border="1">
                                <tr>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                </tr>
                            </table>
                        </td>
                        <td></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <table border="1" width="100%" cellspacing="10" cellpadding="10">
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>
于 2012-12-25T18:42:13.530 に答える