All this is easily googled on request " block layout ".
Of the advantages of block layout, you can note a smaller code size , fewer tags, and code flexibility : often blocks can be swapped without changing the page display, which allows you to put important information closer to the top of the page. Also, block layout can be used to complete all sorts of complex elements, for example, game cards ( link ) or, more commonly, various icons in the corner of the desired element. Plus, complete the situation that you have a catalog of 100 items (picture + text + form) and you need to remove some products from the middle. In the table you will be tortured to move all this, and with block layout you simply delete unnecessary blocks, and the browser will calculate everything else.
The drawbacks of the block layout are the requirements for css cross-browser compatibility , the large size of the css file , the lack of imputed vertical alignment, and not the most obvious way to stretch the elements during overflow.
From the above, we can conclude that the layout should be mixed . That is, the general structure of the page is better to impose blocks, but the links in the center of the top menu, tabular data and other elements, where it is important to align the child elements relative to each other, can be made tables.
I give a couple of links to the ready-made block layout: http://studioad.ru/index/0-10 and http://csstemplater.com/ .
And an example of the layout of messages in the guest book:
Option 1:
<table> <tr> <td align="left">title</td> <td align="right">date</td> </tr> <tr> <td colspan="2" align="left">text</td> </tr> </table>
Option 2:
<div class="mess"> <div class="head"> <div class="date">date</div> title </div> <div class="text"> text </div> </div>
CSS:
.mess{} .mess .head{} .mess .head .date{float:right} .mess .text{}
As you can see, option 2 is about a third longer. However, when there are a lot of messages, the second option comes forward due to the smaller size of the markup. And if you need to add a couple of additional fields? If you move the date from the edge or in general, display it on the left? In the second version, this can be done by editing a couple of lines in the CSS file. But in the first will have to poke around with the structure. Plus, if you give the code to an external layout designer, by the names of the classes in the second variant, he will guess the meaning of the divs. But in the first he will have to break his head.
And finally: javascript:alert(document.getElementsByTagName('*').length);void(0); - check yourself).
