Divs vs Tables Why use Divs when Tables
Divs vs Tables Why use Divs when Tables have been working?
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.
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.
Why and Why NOT Tables Table Code Div Code <table cellpadding="0" cellspacing="0" border="0"> <tr> <td colspan="3" height="120 px">. . </td> </tr> <td class="menu" valign="top">. . . </td> <td class="content" valign="top">. . . </td> <td class="a. Side" valign="top">. . . </td> </tr> <td colspan="3">. . . </td> </tr> </table> <div id="header">. . . </div> <div id="menu">. . . </div> <div id="content">. . . </div> <div id="a. Side">. . . </div> <div id="footer">. . . </div>
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.
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).
Divs – Sample Download the “div-csssample. html” & “styles. css” files to the same folder. Open the html file in Dreamweaver and make changes to the Styles. <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>
Style Sheet @charset "utf-8"; /* CSS Document */ #rightnav { #container { width: 900 px; margin: auto; } #header { #000000; #leftnav { #694717; #content { width: 900 px; height: 100 px; background-color: #01 c 0 a 7; border-bottom: 2 px solid } float: left; width: 140 px; height: 400 px; background-color: #f 8 aa 3 c; border-right: 1 px dashed } #footer { float: right; width: 140 px; height: 400 px; background-color: #f 8 aa 3 c; border-left: 1 px dashed #694717; } position width: 620 px; height: 400 px; } font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 36 px; background-color: #FF 0000; text-align: center; border-top-width: thick; border-top-style: groove; border-color: #0000 FF; }
Questions ? ? ?
- Slides: 9