HTML Layouts
<ul><li>Tables have been a popular method for achieving advanced layouts in HTML. Generally, this involves putting the who...
<ul><li><table id=&quot;shell&quot; bgcolor=&quot;black&quot; border=&quot;1&quot; heigh=&quot;200&quot; width=&quot;300&q...
<ul><li><table width=&quot;400px&quot; border=&quot;0&quot;> </li></ul><ul><li><tr> </li></ul><ul><li><td colspan=&quot;2&...
<ul><li><table id=&quot;shell&quot; title=&quot;Shell&quot; height=&quot;250&quot; width=&quot;400&quot; </li></ul><ul><li...
Upcoming SlideShare
Loading in...5
×

Html Layouts

397

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
397
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Html Layouts"

  1. 1. HTML Layouts
  2. 2. <ul><li>Tables have been a popular method for achieving advanced layouts in HTML. Generally, this involves putting the whole web page inside a big table. </li></ul><ul><li>This table has a different column or row for each main section. </li></ul>
  3. 3. <ul><li><table id=&quot;shell&quot; bgcolor=&quot;black&quot; border=&quot;1&quot; heigh=&quot;200&quot; width=&quot;300&quot;> </li></ul><ul><li><tr><td> </li></ul><ul><li><table id=&quot;inner&quot; bgcolor=&quot;white&quot; heigh=&quot;100&quot; width=&quot;100&quot;> </li></ul><ul><li><tr><td>Tables inside tables!</td></tr> </li></ul><ul><li></table> </li></ul><ul><li></td></tr></table> </li></ul>
  4. 4. <ul><li><table width=&quot;400px&quot; border=&quot;0&quot;> </li></ul><ul><li><tr> </li></ul><ul><li><td colspan=&quot;2&quot; style=&quot;background-color:yellow;&quot;> </li></ul><ul><li>Header </li></ul><ul><li></td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td style=&quot;background-color:orange;width:100px;text-align:top;&quot;> </li></ul><ul><li>Left menu<br /> </li></ul><ul><li>Item 1<br /> </li></ul><ul><li>Item 2<br /> </li></ul><ul><li>Item 3... </li></ul><ul><li></td> </li></ul><ul><li><td style=&quot;background-color:#eeeeee;height:200px;width:300px;text-align:top;&quot;> </li></ul><ul><li>Main body </li></ul><ul><li></td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td colspan=&quot;2&quot; style=&quot;background-color:yellow;&quot;> </li></ul><ul><li>Footer </li></ul><ul><li></td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>
  5. 5. <ul><li><table id=&quot;shell&quot; title=&quot;Shell&quot; height=&quot;250&quot; width=&quot;400&quot; </li></ul><ul><li>border=&quot;0&quot; bgcolor=&quot;black&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot;> </li></ul><ul><li><tr height=&quot;50&quot;><td bgcolor=&quot;white&quot;> </li></ul><ul><li><table title=&quot;banner&quot; id=&quot;banner&quot;> </li></ul><ul><li><tr><td>Banner goes here</td></tr> </li></ul><ul><li></table> </li></ul><ul><li></td></tr> </li></ul><ul><li><tr height=&quot;25&quot;><td bgcolor=&quot;white&quot;> </li></ul><ul><li><table title=&quot;Navigation&quot; id=&quot;navigation&quot;> </li></ul><ul><li><tr><td>Links!</td> </li></ul><ul><li><td>Links!</td> </li></ul><ul><li><td>Links!</td></tr> </li></ul><ul><li></table> </li></ul><ul><li></td></tr> </li></ul><ul><li><tr><td bgcolor=&quot;white&quot;> </li></ul><ul><li><table title=&quot;Content&quot; id=&quot;content&quot;> </li></ul><ul><li><tr><td>Content goes here</td></tr> </li></ul><ul><li></table> </li></ul><ul><li></td></tr></table> </li></ul>

×