HTML Layouts
Website Layouts
Most websites have put their content in multiple columns (formatted like a magazine or newspaper).
Multiple columns are created by using
or elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.
HTML Layouts - Using
 | Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool! |
|---|
HTML Layouts - Using Elements
The div element is a block level element used for grouping HTML elements.
The following example uses five div elements to create a multiple column layout, creating the same result as in the previous example:
Example
The HTML code above will produce the following result:
Main Title of Web Page
Menu
HTML
CSS
JavaScript
Content goes here
Copyright © W3Schools.com
HTML Layouts - Using Tables
A simple way of creating layouts is by using the HTML <table> tag.
Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.
Using <table> to create a nice layout is NOT the correct use of the element. The purpose of the <table> element is to display tabular data!
The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the colspan attribute:
Example
<!DOCTYPE html>
<html>
<body>
<table width="500">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</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 © W3Schools.com</td>
</tr>
</table>
</body>
</html>
Try it yourself »
The HTML code above will produce the following result:
Main Title of Web Page
Menu
HTML
CSS
JavaScript
Content goes here
Copyright © W3Schools.com
HTML Layout - Useful Tips
Tip: The biggest advantage of using CSS is that, if you place the CSS code in an external style sheet, your site becomes MUCH EASIER to maintain. You can change the layout of all your pages by editing one file. To learn more about CSS, study our CSS tutorial.
Tip: Because advanced layouts take time to create, a quicker option is to use a template. Search Google for free website templates (these are pre-built website layouts you can use and customize).
HTML Layout Tags
Tag
Description
<div>
Defines a section in a document (block-level)
<span>
Defines a section in a document (inline)
The div element is a block level element used for grouping HTML elements.
The following example uses five div elements to create a multiple column layout, creating the same result as in the previous example:
Example
The HTML code above will produce the following result:
Main Title of Web Page
Menu
HTML
CSS
JavaScript
HTML
CSS
JavaScript
Content goes here
Copyright © W3Schools.com
HTML Layouts - Using Tables
A simple way of creating layouts is by using the HTML <table> tag.
Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.
| Using <table> to create a nice layout is NOT the correct use of the element. The purpose of the <table> element is to display tabular data! |
|---|
The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the colspan attribute:
Example
<!DOCTYPE html>
<html>
<body>
<table width="500">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</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 © W3Schools.com</td>
</tr>
</table>
</body>
</html>
<html>
<body>
<table width="500">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</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 © W3Schools.com</td>
</tr>
</table>
</body>
</html>
Try it yourself »
The HTML code above will produce the following result:
Main Title of Web Page | |
| Menu HTML CSS JavaScript | Content goes here |
| Copyright © W3Schools.com | |
HTML Layout - Useful Tips
Tip: The biggest advantage of using CSS is that, if you place the CSS code in an external style sheet, your site becomes MUCH EASIER to maintain. You can change the layout of all your pages by editing one file. To learn more about CSS, study our CSS tutorial.
Tip: Because advanced layouts take time to create, a quicker option is to use a template. Search Google for free website templates (these are pre-built website layouts you can use and customize).
HTML Layout Tags
| Tag | Description |
|---|---|
| <div> | Defines a section in a document (block-level) |
| <span> | Defines a section in a document (inline) |
Posting Komentar untuk "HTML Layouts"