Html Layout

50 %
50 %
Information about Html Layout
Education

Published on July 31, 2008

Author: biswadip

Source: slideshare.net

Description

Learn about HTML lay out and various tags in it.

HTML Layouts

Tables have been a popular method for achieving advanced layouts in HTML. Generally, this involves putting the whole web page inside a big table. This table has a different column or row for each main section.

Tables have been a popular method for achieving advanced layouts in HTML. Generally, this involves putting the whole web page inside a big table.

This table has a different column or row for each main section.

<table id=&quot;shell&quot; bgcolor=&quot;black&quot; border=&quot;1&quot; heigh=&quot;200&quot; width=&quot;300&quot;> <tr><td> <table id=&quot;inner&quot; bgcolor=&quot;white&quot; heigh=&quot;100&quot; width=&quot;100&quot;> <tr><td>Tables inside tables!</td></tr> </table> </td></tr></table>

<table id=&quot;shell&quot; bgcolor=&quot;black&quot; border=&quot;1&quot; heigh=&quot;200&quot; width=&quot;300&quot;>

<tr><td>

<table id=&quot;inner&quot; bgcolor=&quot;white&quot; heigh=&quot;100&quot; width=&quot;100&quot;>

<tr><td>Tables inside tables!</td></tr>

</table>

</td></tr></table>

<table width=&quot;400px&quot; border=&quot;0&quot;> <tr> <td colspan=&quot;2&quot; style=&quot;background-color:yellow;&quot;> Header </td> </tr> <tr> <td style=&quot;background-color:orange;width:100px;text-align:top;&quot;> Left menu<br /> Item 1<br /> Item 2<br /> Item 3... </td> <td style=&quot;background-color:#eeeeee;height:200px;width:300px;text-align:top;&quot;> Main body </td> </tr> <tr> <td colspan=&quot;2&quot; style=&quot;background-color:yellow;&quot;> Footer </td> </tr> </table>

<table width=&quot;400px&quot; border=&quot;0&quot;>

<tr> <td colspan=&quot;2&quot; style=&quot;background-color:yellow;&quot;>

Header

</td> </tr> <tr>

<td style=&quot;background-color:orange;width:100px;text-align:top;&quot;>

Left menu<br />

Item 1<br />

Item 2<br />

Item 3...

</td> <td style=&quot;background-color:#eeeeee;height:200px;width:300px;text-align:top;&quot;>

Main body

</td> </tr> <tr>

<td colspan=&quot;2&quot; style=&quot;background-color:yellow;&quot;>

Footer

</td> </tr>

</table>

<table id=&quot;shell&quot; title=&quot;Shell&quot; height=&quot;250&quot; width=&quot;400&quot; border=&quot;0&quot; bgcolor=&quot;black&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot;> <tr height=&quot;50&quot;><td bgcolor=&quot;white&quot;> <table title=&quot;banner&quot; id=&quot;banner&quot;> <tr><td>Banner goes here</td></tr> </table> </td></tr> <tr height=&quot;25&quot;><td bgcolor=&quot;white&quot;> <table title=&quot;Navigation&quot; id=&quot;navigation&quot;> <tr><td>Links!</td> <td>Links!</td> <td>Links!</td></tr> </table> </td></tr> <tr><td bgcolor=&quot;white&quot;> <table title=&quot;Content&quot; id=&quot;content&quot;> <tr><td>Content goes here</td></tr> </table> </td></tr></table>

<table id=&quot;shell&quot; title=&quot;Shell&quot; height=&quot;250&quot; width=&quot;400&quot;

border=&quot;0&quot; bgcolor=&quot;black&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot;>

<tr height=&quot;50&quot;><td bgcolor=&quot;white&quot;>

<table title=&quot;banner&quot; id=&quot;banner&quot;>

<tr><td>Banner goes here</td></tr>

</table>

</td></tr>

<tr height=&quot;25&quot;><td bgcolor=&quot;white&quot;>

<table title=&quot;Navigation&quot; id=&quot;navigation&quot;>

<tr><td>Links!</td>

<td>Links!</td>

<td>Links!</td></tr>

</table>

</td></tr>

<tr><td bgcolor=&quot;white&quot;>

<table title=&quot;Content&quot; id=&quot;content&quot;>

<tr><td>Content goes here</td></tr>

</table>

</td></tr></table>

Add a comment

Related presentations

Related pages

HTML Layouts - W3Schools Online Web Tutorials

Well organized and easy to understand Web bulding tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.
Read more

Layout-Generator - HTML lernen und die eigene Website ...

gewünschtes Layout 1 Spalte 2 Spalten - Steuerung links 2 Spalten - Steuerung rechts 3 Spalten-Layout Breite . Gesamte Breite aller Spalten zusammen ...
Read more

CSS/Templates – SELFHTML-Wiki

Design Vorlagen herunterladen und verwenden ZIP-Datei herunterladen. Wenn Sie dieses Layout für ein eigenes Web-Projekt verwenden möchten, klicken Sie ...
Read more

CSS/Anwendung und Praxis/mehrspaltige Layouts - SELFHTML-Wiki

Zweispaltiges Layout . Die klassische Anwendung eines zweispaltigen Layouts ist die Anordnung einer Navigation neben dem Inhaltsbereich. Für die ...
Read more

Foundation | HTML Templates - Foundation | The most ...

Responsive templates to kick off your projects. You can build tons of layouts with the Foundation grid. Without using a single line of CSS outside of what ...
Read more

Layouten mit CSS

Wenn du HTML und CSS von Grund auf lernen möchtest, empfehle ich dir diesen Beginner’s Guide, oder dieses Buch. Ansonsten hoffe ich, ...
Read more

HTML Layouts - Tutorials Point

HTML Layouts - Learn HTML to develop your website in simple and easy steps starting from its overview, basic tags, meta tags, attributes, formatting ...
Read more

3-Spalten-Layout mit CSS erstellen - HTML lernen und die ...

3-Spalten-Layout mit HTML5 und CSS am Beispiel von fennek.mobi. Sehr oft wird für Websites als Design ein 3-Spalten-Layout genutzt um die Inhalte gut ...
Read more

HTML - Page Layouts and Templates - Tizag Tutorials

HTML - Page Layouts and Templates. HTML layout is very basic. Not many options exist with the body tag alone. Tables, on the other hand, are the bread and ...
Read more

Moderne, frische Layouts für Ihre Website

Überblick über die mit dem Homepage-Builder Zeta Producer mitgelieferten, anpassbaren Layouts
Read more