1

I have to do this for (part of) an assignment. I personally would never use tables like this, I would always use divs if given the choice, but I have to use tables for the assignment.

Here is a very simplified version of what I need to recreate: enter image description here

But here is the best I can do:

enter image description here

The tds always want to scale with one another. Also, this needs to be done with a single table. I've tried messing around with rowspan and such in addition to height but I can't even get close to the desired result. Is there some sort of attribute I'm not aware of that could simplify this type of layout?

My current approach is to have two rows and two columns.

4

6 に答える 6

3

私の最善の推測は、2 つの列で 3 つの行を使用し、rowspan を使用することです。

<table>
    <tr>
        <td rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <!-- the cell above extends into here -->
        <td rowspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <!-- the cell above extends into here -->
    </tr>
</table>

高さを具体的に機能させることは、特に古いブラウザーでは問題になる可能性がありますが、それを行う最善の方法は、多くの場合、セルの内容によって異なります。

于 2013-03-08T06:40:57.203 に答える
2

rowspan 属性を利用できます。

以下にサンプルを示します。

添付の写真のように見えるように、高さを少し追加しました。

<table border="1">
    <tr>
        <td rowspan="2" height="200">1</td>
        <td height="50">A</td>
    </tr>
    <tr>
        <td rowspan="2" height="200">B</td>
    </tr>
    <tr>
        <td height="50">2</td>
    </tr>
</table>

http://jsfiddle.net/vmm2y/

于 2013-03-08T06:41:54.240 に答える
1

ここに解決策があります

    <table border="1" width="500">
<tr>
    <td rowspan="2" style="height:200px">&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td rowspan="2" style="height:200px">&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
</tr>

インライン stype に ......class を使用できます

于 2013-03-08T07:07:37.243 に答える
1

コード ソリューションよりも優れているので、アルゴリズムを書き留めます。

  • 任意の列で水平方向の境界線を見つけるたびに、それは新しい行です。
  • 新しい列よりも、任意の行に垂直方向の境界線を見つけることができるたびに。
  • 完了したら、境界線を持たないすべてのセルを一緒に行スパン/列スパンする必要があります。

完了 (セルを結合する方法については説明しませんでしたが、数独グリッドよりも簡単なはずです ;)

編集:ここでは、2 つの水平方向の境界線 (およびテーブルの下部) があるため、3 行です。1 つの垂直境界線 (完全な高さなのでcolspan、最終的なコードにはありません) とテーブルの右境界線: 2 列。

于 2013-03-08T07:14:02.877 に答える
0

これを試すことができます：

<table border="1">
<tr>
    <td>$100</td>
    <td>$100</td>
    <td rowspan="2">$50</td>
</tr>
<tr>
    <td>$100</td>
    <td rowspan="2">$80</td>
</tr>
<tr>
    <td>$100</td>
    <td>$80</td>
</tr>

于 2013-03-08T06:48:20.270 に答える
0

働くフィドル

を使用してこれを実現したいとおっしゃっていたのでdiv、作成しました。

HTML

<div id="first">
   <div id="leftTop"></div>
   <div id="leftBot"></div></div>
<div id="second">
   <div id="rightTop"></div>
   <div id="rightBot"></div>
</div>

CSS

#left,#right{
      float:left;
      width:150px;
      height:300px;
      border:2px solid black;
}
#leftTop{
      height:250px;
      border-bottom:2px solid black;
}
#rightTop{
      height:50px;
      border-bottom:2px solid black;
}

働くフィドル

于 2013-03-08T07:25:38.193 に答える