YouTip LogoYouTip

Home > HTML > Html Layouts

Html Layouts

📅 2026-06-12 | 📂 HTML

HTML Layouts

Web page layout is very important for improving the appearance of a website.

Please carefully design your web page layout.

Online Examples

Web Page Layout Using <div> Elements

How to use <div> elements to add layout.

Web Page Layout Using <table> Elements

How to use <table> elements to add layout.

Website Layout

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

Most websites can use <div> or <table> elements to create multi-column layouts. CSS is used to position elements, or to create backgrounds and colorful appearances for the page.

Although we can design beautiful layouts using HTML table tags, it is not recommended to use table tags as layout tools - 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:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>
 
<div id="container" style="width:500px">
 
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Web Page 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 Here</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
 
</div>
 
</body>
</html>

Try it yourself »

The above HTML code will produce the following result:

HTML Layout - Using Table

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

Most sites can use <div> or <table> elements to create multi-column layouts. CSS is used to position elements, or to create backgrounds and colorful appearances for the page.

Even though you can use HTML tables to create beautiful layouts, the purpose of designing 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 across two columns:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>
 
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Web Page 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 Here</td>
</tr>
 
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
</tr>
</table>
 
</body>
</html>

Try it yourself »

The above HTML code will produce the following result:

HTML Layout - Useful Tips

Tip: The biggest benefit of using CSS is that if you store CSS code in an external stylesheet, the site will be easier to maintain. By editing a single file, you can change the layout of all pages. For more information about CSS, please visit our CSS tutorial.

Tip: Since creating advanced layouts is time-consuming, 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 document section, block-level (block-level)
<span> Defines a span, used to group inline elements in a document.

HTML Block

HTML Form

Coding Plan

Supports mainstream large models such as Doubao, GLM, DeepSeek, Kimi, MiniMax, etc., official supply stable and reliable.

¥9.9 / month

Subscribe now

iflytek Star Coding Plan

Includes free model call quotas, DeepSeek, GLM, Kimi, MiniMax, one-stop experience and deployment platform.

¥3.9 / month

Subscribe now

2 notes

Write note

Slient

che***oka@qq.com

585

Div Layout Example:

Slient

Slient

che***oka@qq.com

9 years ago (2017-05-24)

zhang

272***9838@qq.com

Reference address

593

In CSS, define:

p {margin:0; padding:0}

That's it, use global styles to reset the margin of p.

However, the side effect is that all p on the web page are reset, so you can also specify a specific tag's p. For example, if this p is under a div with class content, to remove its margin, define it like this:

.content p {margin:0; padding:0;}

zhang

zhang

272***9838@qq.com

Reference address

7 years ago (2019-11-05)

Category Navigation

  • Python / Data Science
  • AI / Intelligent Development
  • Front-end Development
  • Back-end Development
  • Database
  • Mobile Development
  • DevOps / Engineering
  • Programming Language
  • Computer Basics
  • XML / Web Service
  • .NET
  • Website Construction

HTML Tutorial

  • HTML Introduction
  • HTML Editor
  • HTML Basics
  • HTML Elements
  • HTML Attributes
  • HTML Headings
  • HTML Paragraphs
  • HTML Text Formatting
  • HTML Links
  • HTML Head
  • HTML CSS
  • HTML Images
  • HTML Tables
  • HTML Lists
  • HTML Blocks
  • HTML Layouts
  • HTML Forms
  • HTML Frames
  • HTML Colors
  • HTML Color Names
  • HTML Color Values
  • HTML Scripts
  • HTML Character Entities
  • HTML URL
  • HTML Quick Reference List
  • HTML Tag Abbreviations and Full Forms
  • HTML Summary
  • HTML Quiz
  • XHTML Introduction

HTML5

  • HTML5 Tutorial
  • HTML5 Browser Support
  • HTML5 New Elements
  • HTML5 Canvas
  • HTML5 SVG
  • HTML5 MathML
  • HTML5 Drag and Drop
  • HTML5 Geolocation
  • HTML5 Video (Video)
  • HTML5 Audio (Audio)
  • HTML5 Input Types
  • HTML5 Form Elements
  • HTML5 Form Attributes
  • HTML5 Semantic Elements
  • HTML5 Web Storage
  • HTML5 Web SQL
  • HTML5 Web IndexedDB
  • HTML5 Application Cache
  • HTML5 Web Workers
  • HTML5 SSE
  • HTML5 WebSocket
  • HTML5 Quiz
  • HTML(5) Code Standards

HTML Media

  • HTML Media (Media)
  • HTML Plugins
  • HTML Audio (Audio)
  • HTML Video (Video) Playback
  • HTML Examples

HTML Reference Manual

  • HTML Tag List (Alphabetical Order)
  • HTML Tag List (Functional Order)
  • HTML Attributes
  • HTML Events
  • HTML Canvas
  • HTML Audio/Video
  • HTML Valid DOCTYPES
  • HTML Color Names
  • HTML Color Picker
  • HTML Character Sets
  • HTML ASCII
  • HTML ISO-8859-1
  • HTML Symbols
  • HTML URL Encoding
  • HTML Language Codes
  • HTTP Messages
  • HTTP Methods
  • Keyboard Shortcuts

Online Examples

  • HTML Examples
  • CSS Examples
  • JavaScript Examples
  • Ajax Examples
  • jQuery Examples
  • XML Examples
  • Java Examples

Character Set & Tools

  • HTML Character Set Settings
  • HTML ASCII Character Set
  • JS Obfuscation/Encryption
  • PNG/JPEG Image Compression
  • HTML Color Picker
  • JSON Format Tool
  • Random Number Generator

Latest Updates

  • Dart Enum and Symbol
  • Dart Unit Testing
  • Dart Concurrency and Iso...
  • Dart Stream Flow
  • Dart Asynchronous Programming
  • Dart typedef and ...
  • Dart Package and Library Management

Site Information

  • Feedback
  • Disclaimer
  • About Us
  • Article Archive

Follow WeChat

← Html FormsHtml Blocks →

📂 Categories