HTML layout

The pages we open in our daily lives are always in order, and it looks very comfortable, but do you know how they did it? They are using our HTML elements + some css style layout, then let's learn how to lay out the page today.

Website layout

Most websites will arrange content into multiple columns (like a magazine or newspaper).

Most websites can use the <div> or <table> element to create multiple columns. CSS is used to position elements or create a background and a rich look for the page.

Although we can use HTML table tags to design beautiful layouts, table tags are not recommended for use as layout tools - tables are not layout tools.

Tip: Page layout is very important to improve the look of your site. Please carefully design your page layout.

HTML layout - use <div> elements

The div element is a block-level element used to group HTML elements.


The following example uses five div elements to create a multi-column layout with some simple css styles:

Use the HTML layout of the table

Note : The <table> element is not designed as a layout tool.

The <table> element is used to display tabular data.

Use the <table> element to get the layout effect, because you can set the style of the table element via CSS:


Layout using the <table> element

HTML layout 

Tip: The biggest benefit of using CSS is that if you store CSS code in an external style sheet, the site is easier to maintain. By editing a single file, you can change the layout of all pages. 

Tip: Since creating advanced layouts is time consuming, using templates is a quick option. A lot of free website templates can be found through search engines (you can use these pre-built website layouts and optimize them).

For example using Bootstrap

Bootstrap  uses an off-the-shelf CSS framework.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive web.

Bootstrap helps you develop sites that look great in any size: monitor, laptop, tablet or phone:

Last Updated: 2018-07-06 12:32:44 By akshay


share_facebook share_twitter share_google_plus

Please Comment Here :