CODEWITHSUNDEEP
htmlcsshtml-table
Piotrek
Piotrek

Reputation: 11221

Making site using table. Why it doesn't work?

I want to make this: enter image description here Using table. Why table? I want to make this "panels" resizable (like in Blender, NetBeans etc.) when i change size of one panel, others will fill space. Unfortunately, this code doesn't work:

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

I suspect, I can't put "tr" inside "td". So how can I do that?

Upvotes: 0

Views: 77

Answers (4)

kleinfreund
kleinfreund

Reputation: 6799

Of course you can achieve this layout with a single table. Here is a minimal example of how this could work: 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;
}

On a side note: I really don't advice anyone using html tables for layouts. I don't know what you want to build and it might work for you. Maybe you can clarify the purpose of your thing, so we can adjust our answers, if needed.

Upvotes: 2

Roko C. Buljan
Roko C. Buljan

Reputation: 206111

I would go with DIV elements and a bit of jQuery.
Here I created an example with the resize stuff:

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

Upvotes: 3

Ed Heal
Ed Heal

Reputation: 60007

You should not use tables for layout.

Tables are for tabular data.

Do the layout with div and css instead.

Upvotes: 2

Darin Dimitrov
Darin Dimitrov

Reputation: 1038820

I suspect, I can't put "tr" inside "td".

Precisely.

So how can I do that?

You could nest another <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>

Also it's been sometime since designers proclaimed using tables to make HTML layouts as heresy. I am not a specialist in web design but from what I am hearing things like <div> are modern nowadays. And with the arrival of HTML5 there are special tags for that.

You may check this article out: http://www.expression-web-tutorial.com/Structural-Semantic-Elements.html

Upvotes: 5

Related Questions