Can we use table as to layout an html?

Can we use table as to layout an html?

Although we can achieve pretty nice layouts with HTML tables, but tables weren't really designed as a layout tool. Tables are more suited to presenting tabular data.

1. Inheritance
2.

So what is this layout "div" method algorithm?

First, container, div-child will adjust their stand/place/position according to div-container's width and height. So let us see:

 <div id="parent">
<div id="child1" >
</div>
<div id="child2" >
</div>
<div id="child3" >
</div>
</div>

And inside it we add texts/sentences:

<div id="parent">
<h1> Hello World!</h1>
<div id="child1">
<h2>This is my biodata</h2>
I born at May 24th
</div>
<div id="child2">
<h2>This is my favourite place</h2>
Bandung
Jakarta
Manado
</div>
<div id="child3">
<h2>This is my favourite sports</h2>
Swimming
Javelin throw
</div>
</div>

Next, we add width property/paramater to parent-div and each child-div:

<div id="parent" style="width:100%">
<h1> Hello World!</h1>
<div id="child1" style="width:33.33%">
<h2>This is my biodata</h2>
I born at May 24th
</div>
<div id="child2" style="width:33.33%">
<h2>This is my favourite place</h2>
Medan
Bandung
Jakarta
Manado
</div>
<div id="child3" style="width:33.33%">
<h2>This is my favourite sports</h2>
Swimming
Javelin throw
</div>
</div>

Next we add background color to each div, this time we use css:

<div id="parent" style="width:100%; background-color:red">
<h1> Hello World!</h1>
<div id="child1" style="width:33.33%; background-color:brown">
<h2>This is my biodata</h2>
I born at May 24th
</div>
<div id="child2" style="width:33.33%; background-color:blue">
<h2>This is my favourite place</h2>
Medan
Bandung
Jakarta
Manado
</div>
<div id="child3" style="width:33.33%; background-color:green">
<h2>This is my favourite sports</h2>
Swimming
Javelin throw
</div>
</div>

Next we add to maintain code

<div id="parent" style="width:100%; background-color:red">
<h1> Hello World!</h1>
<div id="child1" style="width:33.33%; background-color:brown; float:left;">
<h2>This is my biodata</h2>
I born at May 24th
</div>
<div id="child2" style="width:33.33%; background-color:blue; float:left;">
<h2>This is my favourite place</h2>
Medan
Bandung
Jakarta
Manado
</div>
<div id="child3" style="width:33.33%; background-color:green; float:left;">
<h2>This is my favourite sports</h2>
Swimming
Javelin throw
</div>
</div>

Congratulations! You have made it! Up to this steps you have able to build  3 layout design.

Demonstartion

Now to demonstrate that childs is obey their parent, do this like below:

<div id="parent" style="width:50%; background-color:red">
<h1> Hello World!</h1>
<div id="child1" style="width:33.33%; background-color:brown; float:left;">
<h2>This is my biodata</h2>
I born at May 24th
</div>
<div id="child2" style="width:33.33%; background-color:blue; float:left;">
<h2>This is my favourite place</h2>
Medan
Bandung
Jakarta
Manado
</div>
<div id="child3" style="width:33.33%; background-color:green; float:left;">
<h2>This is my favourite sports</h2>
Swimming
Javelin throw
</div>
</div>