HTML Layout Techniques
5 வகைகளில் layout-ஐ உருவாக்க முடியும். Each way has its pros and cons:
- HTML tables (not recommended)
- CSS float property
- CSS flexbox
- CSS framework
- CSS grid
Which One to Choose?
<table> element was not designed to be a layout tool! The purpose of the
<table> element is to display tabular data. So, do not use tables for your page layout! They will bring a mess into your code. And imagine how hard it will be to redesign your site after a couple of months.
If you want to create your layout fast, you can use a framework, like W3.CSS or Bootstrap.
It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility. Learn more about float in our CSS Float and Clear chapter.
Flexbox is a new layout mode in CSS3.
Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices. Disadvantages: Does not work in IE10 and earlier.
CSS Grid View
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
Disadvantages: Does not work in IE nor in Edge 15 and earlier.