Download presentation
Presentation is loading. Please wait.
1
Why use Divs when Tables have been working?
Divs vs Tables Why use Divs when Tables have been working?
2
Why use Tables or Divs Tables and Divs act as containers to hold all of our content. Think of carrying a liquid without a bottle: The liquid goes everywhere. The content goes everywhere.
3
Why and Why NOT Tables Why Use:
Using tables to build structure is quite intuitive. We see tabular data every day, and the concept is well known therefore easier to learn. Why Not Use: The table tag is meant for listing tabular data. Code for tables is more complex therefore slower to load. Harder to maintain. They make it harder to separate content from design.
4
Why and Why NOT Tables Table Code Div Code
<table cellpadding="0" cellspacing="0" border="0"> <tr> <td colspan="3" height="120px">....</td> </tr> <td class="menu" valign="top">...</td> <td class="content" valign="top">...</td> <td class="aSide" valign="top">...</td> <td colspan="3">...</td> </tr> </table> <div id="header">...</div> <div id="menu">...</div> <div id="content">...</div> <div id="aSide">...</div> <div id="footer">...</div> Table Code Div Code
5
Are Tables Dead? Tables inside of tables is known as nested tables and they should not be used. BUT… Tables inside Divs are very useful for: Tabular Data Photo Galleries Shopping Web Stores Etc.
6
Divs – Good, Bad & Ugly Good: Divs work extremely well with CSS
Very little code, fast loading, easy for SEO Bad Divs can be frustrating when doing a more complicated site. Divs require an understanding of CSS. Ugly Divs can blow apart if not properly done when looked at on a different platform (cellphone, tablet, computer).
7
Download the “div-css-sample. html” & “styles
Download the “div-css-sample.html” & “styles.css” files to the same folder. Open the html file in Dreamweaver and make changes to the Styles. Divs – Sample <html > <head> <title>Div & CSS Lesson</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header">This is the header</div> <div id="leftnav">This is the leftnav</div> <div id="rightnav">This is the rightnav</div> <div id="content">This is the content</div> <div id="footer"> <p>This is the footer</p> </div> </body> </html>
8
Style Sheet @charset "utf-8"; /* CSS Document */ #container { width: 900px; margin:auto; } #header { height: 100px; background-color: #01c0a7; border-bottom: 2px solid #000000; #leftnav { float: left; width: 140px; height: 400px; background-color: #f8aa3c; border-right: 1px dashed #694717; #rightnav { float: right; width: 140px; height: 400px; background-color: #f8aa3c; border-left: 1px dashed #694717; } #content { position width: 620px; #footer { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 36px; background-color: #FF0000; text-align: center; border-top-width: thick; border-top-style: groove; border-color: #0000FF;
9
Questions ???
Similar presentations
