Question

我想这样做： enter image description here 使用表格。为什么表？当我改变一个面板的大小时，我希望使这个“面板”可调整大小（如在Blender，NetBeans等中），其他人将填充空间。不幸的是，这段代码不起作用：

<table class="shell">
        <td>
            <tr>
                <div class="leftpanel">
                    asfasff</div>
            </tr>
        </td>
        <td>
            <tr class="centerpanel">
                fasfasf
            </tr>
            <tr class="bottompanel">
                asff
            </tr>
        </td>
</table>

我怀疑，我不能把“tr”放在“td”里面。那我怎么能这样做呢？

Answer 1

我怀疑，我不能把“tr”放在“td”里面。

正。

那我怎么能这样做呢？

您可以嵌套另一个<table>：

<table class="shell">
    <tr class="leftpanel">
        <td>
            asfasff
        </td>
        <td>
            <table>
                <tr class="centerpanel">
                    <td>fasfasf</td>
                </tr>
                <tr class="bottompanel">
                    <td>asff</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

此外，有些时候设计师宣称使用表格来制作HTML布局。我不是网页设计方面的专家，但从我所听到的内容来看，<div>之类的东西现代都很现代。随着HTML5的到来，有一些特殊的标签。

您可以查看此文章：http://www.expression-web-tutorial.com/Structural-Semantic-Elements.html

Answer 2

我会使用DIV元素和一些jQuery。
在这里，我创建了一个调整大小的例子：

<强> LIVE DEMO

<强>的jQuery ：

var $L = $('#left'),
    $B = $('#bottom'),
    $C = $('#center'),
    $Lr = $('.resizer', $L),
    $Br = $('.resizer', $B);

$Lr.add($Br).on('mousedown mouseup', function( e ){
  var mD = e.type == 'mousedown';
  this.drag = mD;
  $('.box').css({overflow:mD?'hidden':'auto', userSelect:mD?'none':'auto'});
});

$(document).on('mousemove', function( e ){
  if($Lr[0].drag){
    var x=(e.pageX+2)/window.innerWidth*100, w=100-x;
    $L.css({width:x+'%'});
    $B.add($C).css({left:x+'%', width:w+'%'});
  }
  if($Br[0].drag){
    var y=(e.pageY-2)/window.innerHeight*100, h=100-y;
    $C.css({height:y+'%'});
    $B.css({top:y+'%', height:h+'%'});
  }
});

<强> HTML ：

  <div id="left" class="box">
    <div class="resizer"></div>   
    <h2>LEFT</h2>
    <p>Lorem Ipsum  etc.</p>    
  </div>

  <div id="center" class="box">
    <h2>CENTER</h2>
    <p>Lorem Ipsum etc.</p>
  </div>

  <div id="bottom" class="box">
      <div class="resizer"></div>    
      <h2>BOTTOM</h2>
    <p>Lorem Ipsum etc.</p>  
  </div>

<强> CSS ：

.box{
  position:absolute;    
  overflow:auto;   
}
#left{
  z-index:2;
  background:#eee;
  height:100%;
  width:40%;
}
#center{
  background:#ddd;
  left:40%;
  height:50%;
  width:60%;
}
#bottom{
  background:#ccc;
  left:40%;
  top:50%;
  width:60%;
  height:50%;
}
.resizer{
  background:#cf5;
  cursor:pointer;
  position:absolute;
}
#left .resizer{
  right:0;
  width:5px;
  height:100%;
}
#bottom .resizer{
  top:0px;
  width:100%;
  height:5px;
}

Answer 3

当然，您可以使用单个表实现此布局。以下是这可行的最小示例：http://jsfiddle.net/XA2cy/

<强> HTML：

<table>
    <tr>
        <td class="left-panel" rowspan="2">leftpanel</td>
        <td class="center-panel">centerpanel</td>
    </tr>
    <tr>
        <td class="bottom-panel">bottompanel</td>
    </tr>
</table>

<强> CSS：

table, td {
    border: 1px solid black;
}

旁注：我真的不建议任何人使用html表格进行布局。我不知道你想要建造什么，它可能对你有用。也许你可以澄清你的东西的目的，所以我们可以根据需要调整我们的答案。

Answer 4

您不应该使用表格进行布局。

表格用于表格数据。

改为使用div和css进行布局。

使用表格制作网站。为什么它不起作用？

4 个答案: