Easy Tutorial
Att Form Method Av Event Abort Tag Dd Att Th Abbr Tag Track Att Input Formnovalidate Att Img Alt Tag Span Att Global Class Canvas Globalcompositeoperation Att Object Form Att Style Scoped Tag Rt Att A Download Att Div Align Att Source Type Av Event Suspend Att Script Defer Att Table Rules Tag Title Att Input Autocomplete Tag Embed Ev Onunload Av Event Canplaythrough Att Link Hreflang Ev Onload Att Input Checked Att Output Name Att Td Align Tag Script Att Body Vlink Av Prop Duration Att Keygen Keytype Att Img Align Att Area Download Att Select Disabled Tag Rp Att Tbody Valign Att Del Cite Av Met Pause Att Textarea Disabled Tag Dialog Tag Input Att Colgroup Align Att Canvas Width Av Prop Currenttime Att Table Align Att Th Char Att Tr Valign Att Button Name Att Select Form Canvas Ispointinpath Att Keygen Name Av Event Error Att Form Name Av Event Play Canvas Putimagedata Att Hr Align Att Col Span Att Embed Src Att Label For Att Form Accept Att Button Formmethod Av Prop Src Tag Tr Tag Picture Att Script Async Att Fieldset Name Ev Onafterprint Att Global Style Att Iframe Height Att Video Poster Att Input Step Ev Onkeydown Att A Shape Av Prop Texttracks Att Option Label Av Prop Error Att Param Value Att Tr Bgcolor Att Form Action Ref Country Codes Att Col Width Att Td Colspan Att Q Cite Att Video Controls Att Input Value Att Th Align Av Prop Videotracks Att Img Height Tag Col Av Prop Played Att Output Form Att Del Datetime Tag U Att Input Multiple Tag Html Att Meta Scheme Canvas Beginpath Html Language Codes Canvas Imagedata Width Tag Dl Ref Eventattributes Ev Ontoggle Att Link Media Att Iframe Name Av Event Loadeddata Tag Sub Att Video Height Att Frame Frameborder Att Dialog Open Att Input Placeholder Att Script Src Att Object Name Att A Rev Att Canvas Height Tag Basefont Att Video Muted Att Table Frame Att Body Text Canvas Transform Tag Q Tag Audio Att Tr Align Tag Main Tag Aside Att Fieldset Form Att Tbody Char Av Prop Paused Att Meta Http Equiv Att Audio Controls Ev Ondblclick Canvas Arcto Att Meta Charset Tag Tfoot Canvas Lineto Att Meter High Tag Font Att Button Formaction Canvas Shadowoffsetx Att Param Name Att Col Valign Canvas Rect Tag Details Att Th Height Att Img Vspace Att Img Longdesc Canvas Globalalpha Att Source Media Att Button Form Ev Onresize Att Select Name Tag Strong Tag Mark Html Forms Att Area Type Att Td Nowrap Att Frame Noresize Att A Type Att Audio Src Tag Strike Av Met Canplaytype Att Keygen Form Ev Onfocus Att Fieldset Disabled Tag Frame Canvas Moveto Att Frame Longdesc Html Colorname Tag Fieldset Canvas Stroketext Tag Wbr Att Th Valign Att Area Hreflang Tag Command Tag Style Tag Abbr Att Ol Type Tag Menu Tag Base Att Style Media Att Body Bgcolor Html Elementsdoctypes Tag I Tag Br Att Pre Width Att Font Face Att Col Char Ev Onselect Canvas Createradialgradient Att A Hreflang Att Th Width Canvas Fillrect Att Col Align Tag Video Att Command Radiogroup Att Thead Char Tag Applet Av Met Play Att Keygen Autofocus Tag Small Canvas Fillstyle Tag P Tag Link Att Object Usemap Att Embed Height Att Input Required Tag Dt Att Button Type Att Global Title Tag Img Att Source Srcset Att Legend Align Tag Thead Att Img Border Att Meta Name Tag Source Ev Onmouseover Att Iframe Marginheight Tag Del Att Global Lang Att Ol Compact Tag Meta Att Hr Size Av Event Stalled Att Ul Type Ref Av Dom Tag Figure Met Element Addeventlistener Canvas Addcolorstop Av Prop Seekable Tag Comment Att A Coords Att Label Form Canvas Shadowoffsety Html Ascii Canvas Shadowblur Att Thead Align Tag Output Att Link Href Tag Iframe Html Head Av Prop Mediagroup Av Prop Controls Canvas Linecap Att Input List Tag Label Att Progress Max Att Global Translate Tag Cite Att Link Rev Att Img Width Att Td Width Tag Footer Att Form Autocomplete Canvas Linejoin Att Area Media Att Meter Optimum Tag A Att Colgroup Charoff Att Global Id Canvas Strokestyle Av Event Seeking Tag Meter Att Area Alt Att Global Dir Att Basefont Size Att Global Contextmenu Att Iframe Seamless Html Symbols Att Frame Src Tag Bdi Att Input Alt Att Meter Value Att Td Abbr Att Object Type Tag Em Att Tr Charoff Att Menu Label Att A Target Att Input Size Canvas Createlineargradient Att Input Height Att Button Formtarget Att Li Value Att Area Nohref Ev Onmousemove Att Body Link Av Prop Buffered Att Global Accesskey Canvas Clearrect Tag Blockquote Att Object Hspace Av Event Loadedmetadata Tag Ruby Att Track Srclang Tag Template Att Dir Compact Att Textarea Readonly Att Button Value Tag Noscript Tag Ins Att A Charset Tag Head Att Textarea Autofocus Att Global Spellcheck Tag Keygen Att Thead Charoff Att Button Formnovalidate Att Caption Align Att Form Target Att Track Label Canvas Scale Att Body Alink Att Optgroup Disabled Att Hr Width Att Iframe Frameborder Js Tutorial Att Input Maxlength Ref Byfunc Att A Name Av Met Addtexttrack Att Font Color Att Th Colspan Html Headings Html Colorpicker Att Thead Valign Html Reference Att Table Width Att Colgroup Width Tag Progress Canvas Linewidth Att Tfoot Char Att Td Char Att Track Index Att Textarea Cols Att Font Size Att Colgroup Char Av Event Waiting Canvas Arc Html Paragraphs Att Audio Preload Att Video Src Att Select Multiple Att Colgroup Valign Att Link Charset Att Track Src Tag Textarea Att Command Disabled Tag Tbody Att P Align Av Prop Preload Av Prop Controller Att Frameset Rows Att Th Bgcolor Att Form Novalidate Att Output For Tag Object Att Input Formtarget Ev Onclick Av Prop Seeking Canvas Imagedata Data Html Formatting Ref Entities Av Prop Muted Att Embed Type Tag Hr Tag Pre Att Global Hidden Av Event Canplay Att Object Height Att Form Accept Charset Html Urlencode Ev Onsubmit Canvas Stroke Tag Button Att Embed Width Tag Section Att Table Summary Av Prop Defaultplaybackrate Ev Onmouseout Att Object Vspace Att Area Target Att Textarea Rows Att Body Background Tag Ul Att Iframe Srcdoc Att Frameset Cols Ref Pxtoemconversion Att Input Width Att Link Target Att Global Dropzone Att A Rel Canvas Getimagedata Att Th Axis Canvas Measuretext Att Textarea Form Tag Td Ev Onmouseup Av Event Playing Html Httpmethods Canvas Createpattern Att Frame Name Att Bdo Dir Att Td Charoff Tag Select Tag Address Att Option Selected Att Button Autofocus Att Select Autofocus Att Iframe Width Html Lists Av Event Ended Att Keygen Disabled Canvas Font Att Td Rowspan Att Command Label Att Video Autoplay Att Ins Datetime Canvas Shadowcolor Att Col Charoff Att Textarea Wrap Att Area Coords Att Link Type Tag Legend Tag Center Tag Body Tag Th Html Elements Att Table Border Ev Onmousedown Tag Datalist Att Input Accept Ev Onshow Att Table Cellspacing Ref Standardattributes Att Input Min Canvas Drawimage Av Event Pause Att Input Max Att Global Contenteditable Tag Frameset Av Prop Ended Att Tbody Align Att Source Src Att Basefont Face Att Option Disabled Att Input Type Att Frame Marginwidth Tag Noframes Att Td Headers Ev Onblur Att Textarea Placeholder Att Details Open Att Img Ismap Tag Code Att Object Align Att Td Valign Av Prop Volume Att Textarea Name Att Textarea Maxlength Att Command Icon Att Command Type Av Met Load Att Base Target Att Button Formenctype Att Audio Autoplay Ref Charactersets Tag Canvas Att Input Disabled Tag Form Att Basefont Color Css Tutorial Att Meter Low Att Button Disabled Tag Colgroup Att Meter Min Att Meter Max Att Hr Noshade Att Table Bgcolor Att Ol Reversed Att Html Xmlns Att Select Size Tag Big Tag Sup Att Img Src Att Table Cellpadding Av Event Seeked Att Video Loop Att Area Shape Html Layout Tag Param Att Video Preload Tag Bdo Att Input Autofocus Canvas Settransform Tag Kbd Att Track Kind Att Menu Type Tag B Av Prop Playbackrate Canvas Clip Tag Time Att Input Form Att Th Charoff Att A Media Att Script Type Att Area Href Att Global Tabindex Att Input Pattern Att Tbody Charoff Att Style Type Av Event Loadstart Att Audio Loop Att Td Scope Canvas Rotate Att A Href Att Th Nowrap Att Frame Scrolling Att Iframe Src Html Iframe Html Keyboardshortcuts Att Object Data Tag Table Ref Canvas Att Form Enctype Tag Ol Att Ul Compact Tag Doctype Att Global Draggable Ev Onchange Tag Hgroup Av Event Ratechange Tag Tt Att Ins Cite Att Td Height Att Progress Value Att Iframe Sandbox Att Li Type Att Map Name Att Input Formenctype Att Tr Char Canvas Miterlimit Att Ol Start Att Video Width Att Td Bgcolor Att Optgroup Label Att Colgroup Span Canvas Textbaseline Tag Samp Att Input Readonly Att Input Src Av Event Progress Att Hn Align Canvas Beziercurveto Tag Li Att Option Value Tag Option Av Prop Defaultmuted Att Img Hspace Colors Mixer Att Meter Form Att Tfoot Align Av Prop Loop Att Html Manifest Tag Nav Att Img Loading Att Global Data Att Input Formaction Att Object Width Av Prop Autoplay Tag Article Av Event Volumechange Av Prop Currentsrc Tag Div Att Iframe Longdesc Att Audio Muted Ev Onkeyup Av Event Durationchange Att Base Href Tag Hn Att Tfoot Valign Tag Figcaption Ev Onkeypress Att Link Rel Html Httpmessages Canvas Quadraticcurveto Av Prop Audiotracks Att Link Sizes Att Meta Content Att Input Name Att Area Rel Att Th Scope Att Blockquote Cite Canvas Translate Tag Acronym Html Emoji Av Prop Networkstate Canvas Imagedata Height Av Prop Startdate Tag Caption Att Frame Marginheight Canvas Closepath Tag Dfn Tag S Ev Onbeforeprint Tag Optgroup Att Iframe Align Att Select Required Canvas Strokerect Av Event Timeupdate Att Th Headers Tag Header Tag Dir Att Time Datetime Tag Area Att Textarea Required Tag Map Canvas Fill Att Command Checked Att Iframe Marginwidth Tag Summary Tag Var Att Script Charset Av Prop Readystate Canvas Textalign Att Th Rowspan Att Img Usemap Att Input Align Att Td Axis Canvas Createimagedata Att Iframe Scrolling Canvas Filltext Att Object Border Att Input Formmethod Att Tfoot Charoff
❮ Att Area Shape Tag Param ❯

HTML Layout

Webpage layout is crucial for enhancing the appearance of your website.

Please design your webpage layout carefully.

Online Examples

Web Layout Using <div> Elements

Web Layout Using <table> Elements

Website Layout

Most websites arrange content into multiple columns (like magazines or newspapers).

Most websites can create multi-column layouts using <div> or <table> elements. CSS is used for positioning elements or creating backgrounds and colorful appearances for the page.

| | Although we can use the HTML table tag to design attractive layouts, the table tag is not recommended for use as a layout tool - tables are not layout tools. | | --- | --- |

HTML Layout - Using <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:

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</title> 
</head>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Web Title</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © tutorialpro.org</div>

</div>

</body>
</html>

The HTML code above will produce the following result:

HTML Layout - Using Tables

Using the HTML <table> tag is an easy way to create a layout.

Most sites can create multi-column layouts using <div> or <table> elements. CSS is used for positioning elements or creating backgrounds and colorful appearances for the page.

| | Even though you can use HTML tables to create attractive layouts, the purpose of tables is to present tabular data - tables are not layout tools! | | --- | --- |

The following example uses a three-row, two-column table - the first and last rows use the colspan attribute to span two columns:

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</title> 
</head>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Web Title</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
Content goes here</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © tutorialpro.org</td>
</tr>
</table>

</body>
</html>

The HTML code above will produce the following result:

HTML Layout - Useful Tips

Tip: One of the biggest advantages of using CSS is that if you store CSS code in an external stylesheet, your site becomes easier to maintain. By editing a single file, you can change the layout of all pages. To learn more about CSS, please visit our CSS Tutorial.

Tip: Creating advanced layouts can be very time-consuming, so using templates is a quick option. You can find many free website templates through search engines (you can use these pre-built website layouts and optimize them).

HTML Layout Tags

Tag Description
<div> Defines a section in a document, block-level
<span> Defines a span, used to group inline elements in a document
❮ Att Area Shape Tag Param ❯