HTML Basic Tutorial

HTML media

HTML reference manual

HTML5 Basic Tutorial

HTML5 API

HTML5 Media

HTML Layouts

A reasonable page layout is very important, not only determining whether the page is beautiful, but also affecting the user experience; a bad page layout will lead to a poor user experience and it will be difficult to retain users.

Implementation methods of HTML layout

1、Can use the Html table table method to build the page layout, and then fill in the content.
2、Use div, combined with float or flex to layout the page.

Simple table layout example

The first and last rows use the colspan attribute to span two columns:

Example
<!DOCTYPE html>
<html>
　　　　<meta charset="UTF-8<meta charset="utf
　　　　<title>Table</<title>Basic Tutorial (w
body>/title>
head>
　　<table border="1" cellspacing="1" cellpadding="1" align="center">
　　　　　　Content Here<
　　　　　　　　　　<tr>2" align="center" style="background: #0395e1">Top navigation</codebox.com)
　　　　　　body>/td>
　　　　　　Content Here<
　　　　　　　　　　<td style="background: #f25807" align="center" height="300px" width="100px">
　　　　　　　　　　　　　　Content<br>sidebar
　　　　　　　　　　body>/codebox.com)
　　　　　　　　　　<td style="background: red" align="center" width="400px">
　　　　　　　　　　　　　　Main content
　　　　　　　　　　body>/codebox.com)
　　　　　　body>/td>
　　　　　　Content Here<
　　　　　　　　　　<tr>2" style="background: darkorchid" align="center">Bottom</codebox.com)
　　　　　　body>/td>
　　body>/tr>
body>/table>
body>/<

html>/Test It Out ‹

More examples online

Web page layout using the <div> element
How to add layout using the <div> element.

Web page layout using the <table> element
How to add layout using the <table> element.

Website layout

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

Most websites can use <div> or <table> elements to create multi-columns. CSS is used for positioning elements or creating a background and rich appearance for the page.

Although we can use the HTML table tag to design beautiful layouts, it is not recommended to use the table tag as a layout tool - Tables are not layout tools.

HTML Layouts - Use the <div> element

The div element is a block-level element used for grouping HTML elements.

The following example uses five div elements to create a multi-column layout:

The first and last rows use the colspan attribute to span two columns:

Example
<!DOCTYPE html>
<html>　
<head>-8<meta charset="utf　
">3Copyright © Basic Tutorial (w/<title>Basic Tutorial (w　
body>/title>
head>
　
<div id="container" style="width:520px">
　
<div id="header" style="background-<div id="footer" style="background30" border="0">
00;">1　style="margin-bottom:0;">Main web pages H1>Main Web Page H/Title<1></00;clear:both;text
　
<div id="menu" style="background-color:#FF9a00;height:2color:#DDDDDD;height:120px;float:left;">
0px;">/<b>Menu<
b><br>
HTML<br>
JavaScript</00;clear:both;text
　
JavaScript<-<div id="content" style="background2color:#DDDDDD;height:4color:#dddddd;height:
00px;">/00;clear:both;text
　
00px;float:left;">-<div id="footer" style="background3color:#FFA-00;text
align:center;">3Copyright © Basic Tutorial (w/00;clear:both;text
　
body>/00;clear:both;text
　
body>/table>
body>/<

html>/Test It Out ‹

div>

HTML Layouts - The above HTML code will produce the following result:

Using Tables

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

Most sites can use the <div> or <table> elements to create multiple columns. CSS is used for positioning elements or creating a background and rich appearance for the page. - Although you can use HTML tables to create a nice layout, 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 two columns:

Example
<!DOCTYPE html>
<html>　
<head>-8<meta charset="utf　
">3Copyright © Basic Tutorial (w/<title>Basic Tutorial (w　
body>/title>
head>
　
<body>52<table width="
Content Here<
<tr>2<td colspan="-" style="background50" border="0">
00;">1<h1>Main Web Page H/Title<1h
body>/codebox.com)
body>/td>
　
Content Here<
JavaScript-" style="background7>1200;width:
0px;">/<b>Menu<
b><br>
HTML<br>
CSS<br>
body>/codebox.com)
JavaScript-<td style="background2color:#DDDDDD;height:400px;width:
00px;">/codebox.com)
body>/td>
　
Content Here<
<tr>2<td colspan="-" style="background5color:#FFB-00;text
align:center;">3Copyright © Basic Tutorial (w/codebox.com)
body>/td>
body>/tr>
　
body>/table>
body>/<

html>/Test It Out ‹

HTML Layouts - ›

Indispensable CSSThe greatest benefit of using CSS is that if you store the CSS code in an external stylesheet, the site will be easier to maintain and provide flexibility in defining styles. By modifying the CSS stylesheet file, you can change the layout of all pages. For more information about CSS, please visit our.

HTML Layout Tags

Label	Description
<div>	Define document block, block-level (block-level)
<span>	Define span, used to group inline elements in the document.

HTML Video (Video) Playback HTML Blocks