HTML<br />
CSS<br />
JavaScript
</td>
<td>
Content goes here</td>
</tr>
<tr>
<td>
Copyright © 2011 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 © 2011 W3Schools.com
Note: 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 Div 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 <html>
<body>
<div>
<div>
<h1>Main Title of Web Page</h1></div>
<div>
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div>
Content goes here</div>
<div>
Copyright © 2011 W3Schools.com</div>
</div>
</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 © 2011 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 TagDescription <table> Defines a table <div> Defines a section in a document
« Previous Next Chapter »
HTML Layout - Useful Tips CREATED BY =JAY-AR SIMON SEBASTIAN
Start from the beginning
