Html 使用表格制作网站。为什么没有'；不行？

我想说： 使用表格。为什么是桌子？我想使这个“面板”的大小可以调整（如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>

阿斯法斯夫
FASF
asff

我想，我不能把“tr”放在“td”里面。那我该怎么做呢

我想，我不能把“tr”放在“td”里面

没错

那我该怎么做呢

您可以嵌套另一个

：

<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>

阿斯法斯夫
FASF
asff

自从设计师宣称使用表格来制作HTML布局是异端邪说以来，也已经有一段时间了。我不是网页设计方面的专家，但据我所知，像

这样的东西现在都很现代。随着HTML5的到来，有了专门的标签

---

您可以查看这篇文章：

当然，您可以通过一个表来实现此布局。下面是一个简单的例子，说明了这是如何工作的：

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>

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

---

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

你不应该使用表格进行布局

表格用于表格数据

---

改用

div

和

css

进行布局。

我会使用

div

元素和一点jQuery。
在这里，我创建了一个调整大小的示例：

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+'%'});
  }
});

  <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>

.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;
}

HTML：

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+'%'});
  }
});

  <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>

.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;
}

---

什么，

rowspan

最近不受欢迎？事实上，我很惊讶你回答了这个问题：染料，rowspan是另一种选择。就当今的现代情况而言，我认为最好不要在HTML布局中使用表格。但我可能弄错了：-）你为什么把标签放在里面？@jigneshkheni，说得好。谢谢你注意到这一点。我已经更新了我的答案。但是如何使这个div可以调整大小呢？这将比使用tableuse width作为百分比要复杂得多——那么复杂的地方在哪里呢。当用于tablesBoooh时，使用表对于屏幕阅读器也没有用处。站点有表，自惭形秽！是的，但根据我的说法，使用引号太标准了，你可以看到答案并创建一个投票