0

下の図のような非常に複雑なテーブルを作成する必要があります。 http://irinaciocan.ro/tehnici_web_2012/imagini/tabel_ciudatel29.png

このマークアップを試しましたが、うまくいきません。 http://jsfiddle.net/miskolc/W9nJU/3/

    <body>
        <table border="10" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="1" rowspan="1">1</td>
            <td colspan="2" rowspan="1">2</td>
            <td colspan="2" rowspan="1">3</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="4">4</td>
            <td colspan="3" rowspan="2">5</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="2">6</td>
            <td colspan="1" rowspan="4">7</td>
        </tr>
        <tr>
            <td rowspan="4" colspan="1">8</td>
            <td rowspan="1" colspan="1">9</td>
            <td rowspan="1" colspan="1">10</td>            
            <td rowspan="2" colspan="1">11</td>            
        </tr>
        <tr>
            <td rowspan="1" colspan="2">12</td>
        </tr>
        <tr>
            <td rowspan="3" colspan="1">13</td>
            <td rowspan="1" colspan="3">14</td>
        </tr>
        <tr>
            <td rowspan="1" colspan="2">15</td>
            <td rowspan="1" colspan="1">16</td>
        </tr>
        <tr>
            <td rowspan="1" colspan="2">17</td>
        </tr> 
        </table>
    </body>

そしてCSS

 td {
     width:50px;
     height:50px;
     padding:0px;
 }

異なる tr タグ内にあるにもかかわらず、セル 6 がセル 5 と同じ行にある理由がわかりません。また、セル 1、2、3 のスパン サイズが正しくない理由もわかりません。誰かがこの問題に取り組む方法を教えてもらえますか?

4

1 に答える 1

1

テーブルは、8 行ごとに 5 列のテーブルである必要があります (多くのセルをマージする前)。

すべての行には、合計で 5 つの列が必要です (または、colspan="2"その後にcolspan="3"例が続きます)。これは最初の 2 つのケースですが、3 番目から最後の 1 つまでは間違っています。

私はあなたのためにそれをしませんので、フィドルはありません;）問題が残っている場合は、テーブルが5C x 8Rであるフィドルを提供してください

編集：ここで解決しました：http://jsfiddle.net/W9nJU/5/

  • 主な問題は 2 列目と 3 列目にありました。表示すると 2 倍の高さになり、4 行を占めているように見えますが、それぞれ 1 行だけで作成する必要があります。
    したがって、左側の 3 つのセル「1、4、および 8」は、それぞれに垂直にまたがっています。1、2、および 5 セル (ただし、セル 4 は、2 行にまたがるセルの高さの 2 倍です)。
    変更: セル "4" は 2 行 (4 行ではありません) にまたがっています。"5" と "6" は垂直スパンなし、それぞれ。2 列と 3 列にまたがる。セル "7" は 3 行 (4 行ではありません) にまたがっています
  • セル "8" は 4 行ではなく 5 行にまたがっています
  • 「9」-「17」とラベル付けされたセル内に、1 だけ離れた別の値があったと思いますが、もう見つかりません。そうでないかもしれない。

固定サイズのグリッドまたは市松模様の紙に描いているわけではありません。HTML のテーブルは、サイズが問題にならないトポロジーに少し似ており、リング、マグカップ、ドーナツ、土星のリングは同じ特徴を持っています。ブロックでできたリング... 私の類推はあまり良くありません)
HTML テーブル アルゴリズムが HTML コードからセル、行、列を作成するとき (いくつかのセルが欠けている場合でもそうすることができます!)、グラフィカル ブラウザまたはプリンタで表示されるサイズのアイデア。そして、スクリーンリーダーはそれを気にしません。重要なのは、必要な細胞の最小数です。次に、CSS は結果を使用してスタイルを設定し、表示します。

于 2013-05-22T13:54:42.147 に答える