HTML Layout using Tables

HTML Layout Elements and Techniques

Websites often display content in multiple columns (like a magazine or a newspaper).

Example

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

HTML Layout Elements

HTML has several semantic elements that define the different parts of a web page:

— Defines a header for a document or a section
— Defines a set of navigation links
— Defines a section in a document
— Defines an independent, self-contained content
— Defines content aside from the content (like a sidebar)
— Defines a footer for a document or a section
— Defines additional details that the user can open and close on demand
— Defines a heading for the element

• — Defines a header for a document or a section
• — Defines a set of navigation links
• — Defines a section in a document
• — Defines an independent, self-contained content
• — Defines content aside from the content (like a sidebar)
• — Defines a footer for a document or a section
• — Defines additional details that the user can open and close on demand
• — Defines a heading for the element

You can read more about semantic elements in our HTML Semantics chapter.

HTML Layout Techniques

There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:

CSS Frameworks

If you want to create your layout fast, you can use a CSS framework, like W3.CSS or Bootstrap.

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

CSS Float Layout

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.

Example

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

CSS Flexbox Layout

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

Learn more about flexbox in our CSS Flexbox chapter.

Example

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

CSS Grid Layout

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.

Learn more about CSS grids in our CSS Grid Intro chapter.

Источник

HTML — Layouts

A webpage layout is very important to give better look to your website. It takes considerable time to design a website’s layout with great look and feel.

Now-a-days, all modern websites are using CSS and JavaScript based framework to come up with responsive and dynamic websites but you can create a good layout using simple HTML tables or division tags in combination with other formatting tags. This chapter will give you few examples on how to create a simple but working layout for your webpage using pure HTML and its attributes.

HTML Layout — Using Tables

Example

For example, the following HTML layout example is achieved using a table with 3 rows and 2 columns but the header and footer column spans both columns using the colspan attribute −

      
 
 
This is Web Page Main title
 
 
 
 
Main Menu 
HTML 
PHP 
PERL.
 
Technical and Managerial Tutorials
 
 
 
 Copyright © 2007 Tutorialspoint.com 
 
 
   

This will produce the following result −

Multiple Columns Layout — Using Tables

You can design your webpage to put your web content in multiple pages. You can keep your content in middle column and you can use left column to use menu and right column can be used to put advertisement or some other stuff. This layout will be very similar to what we have at our website tutorialspoint.com.

Example

Here is an example to create three column layout −

        Main Menu 
HTML 
PHP 
PERL. Technical and Managerial Tutorials Right Menu 
HTML 
PHP 
PERL.   

This will produce the following result −

HTML Layouts — Using DIV, SPAN

The element is a block level element used for grouping HTML elements. While the tag is a block-level element, the HTML element is used for grouping elements at an inline level.

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.

Note − This example makes use of Cascading Style Sheet (CSS), so before understanding this example you need to have a better understanding on how CSS works.

Example

      
 
This is Web Page Main title
 
 
Main Menu
 HTML 
PHP 
PERL.
 
Technical and Managerial Tutorials
 
 
Right Menu
 HTML 
PHP 
PERL.
 
 Copyright © 2007 Tutorialspoint.com 
 
   

This will produce the following result −

You can create better layout using DIV, SPAN along with CSS. For more information on CSS, please refer to CSS Tutorial.

Источник

HTML Layout

In this tutorial you will learn about the different methods of creating a web page layout.

Creating Website Layouts

Creating a website layout is the activity of positioning the various elements that make a web page in a well-structured manner and give appealing look to the website.

You have seen most websites on the internet usually display their content in multiple rows and columns, formatted like a magazine or newspaper to provide the users a better reading and writing environment. This can be easily achieved by using the HTML tags, such as , , , , , etc. and adding some CSS styles to them.

HTML Table Based Layout

Table provides the simplest way for creating layouts in HTML. Generally, this involves the process of putting the contents such as text, images, and so on into rows and columns.

The following layout is created using an HTML table with 3 rows and 2 columns — the first and last row spans both columns using the table’s colspan attribute:

Example

— The HTML code above will produce the following output:

Warning: The method used for creating layout in the above example is not wrong, but it’s not recommended. Avoid tables and inline styles for creating layouts. Layouts created using tables often rendered very slowly. Tables should only be used to display tabular data.

HTML Div Based Layout

The following example uses the div elements to create a multiple column layout. It will produce the same result as in the previous example that uses table element:

Example

— The HTML code above will produce the same output as the previous example:

We’ve created this layout using the CSS float techniques, since most web browsers support it. Alternatively, you can also use the CSS3 flexbox to create modern and more flexible layouts. See the tutorial on CSS3 flexible box layouts to learn about flexbox in detail.

Tip: Better web page layouts can be created by using the DIV elements and CSS. You can change the layout of all the pages of your website by editing just one CSS file. To learn about CSS in detail, please check out our CSS tutorial section.

Using the HTML5 Structural Elements

You can consider these elements as a replacement for commonly used classes such as .header , .footer , .nav , .section , etc. The following example uses the new HTML5 structural elements to create the same layout that we have created in the previous examples.

Example

— The HTML code above will also produce the same output as the previous example:

The following table provides a brief overview of new HTML5 structural elements.

Tag	Description
	Represents the header of a document or a section.
	Represents the footer of a document or a section.
	Represents a section of navigation links.
	Represents a section of a document, such as header, footer etc.
	Represents an article, blog post, or other self-contained unit of information.
	Represents some content loosely related to the page content.

Please check out the reference on HTML5 tags to know about the newly introduced tags.

Источник