Html Layouts

50 %
50 %
Information about Html Layouts

Published on July 31, 2008

Author: biswadip

Source: slideshare.net

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 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

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

Each of these responsive HTML templates were built with the same ... Show off your work and highlight what you do with this grid style thumbnail layout.
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 ...

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

HTML Layouts - Tutorials for MFC, SAP HR, Yii, Clojure ...

HTML Layouts - lernen HTML zu entwickeln Sie Ihre Website in einfachen und leichten Schritten ausgehend von seiner Übersicht, Grund Tags, Meta-Tags ...
Read more

Moderne, frische Layouts für Ihre Website

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

HTML Layouts - Tutorials for MFC, SAP HR, Yii, Clojure ...

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

Learn CSS Layout

Learn CSS Layout. Home Table of Contents. ... If you want to learn HTML and CSS from the beginning, you should check out this tutorial. Otherwise, ...
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

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