Layouts Using Tables Web Design – Section 4-5 Part or all of this lesson was adapted from the University of Washingtons Web Design & Development I Course materials

Objectives The Student will: –Understand how tables were used for layout prior to CSS –Be able to layout content using a table

Layout of Web Pages Prior to CSS, web developers typically used HTML tables to control the layout of a page. –This was not what tables were designed for: They were designed specifically for displaying data –Web designers learned that web content could be inserted into table cells, allowing for the creation of complex layouts with multiple columns and rows. –Many, if not most, web pages today still use tables for layout.

Why use CSS for layouts? Tables are rapidly becoming obsolete for layout CSS layout has important advantages over table layout. –It requires relatively little code, which translates to smaller file sizes and faster downloads. –The page is easier to update and maintain. –Pages that use CSS for layout can adjust better to the size of the user's display Tables don't wrap, so viewing a table-based layout on a small screen can require lots of horizontal scrolling: Not good.

Why use tables for layouts? Tables for layout haven't completely gone away CSS layout can be challenging Browsers historically have varied in how they interpret CSS –For more complex layouts, developers have to work very hard to get their designs to look good across all browsers and operating systems. –This situation is improving as new browsers are released with better support for CSS positioning.

Using for Layout Instead of surrounding each section of content with tags, surround each section of content with tags. To position content side by side, it simply needs to be inside table data cells that are part of the same table row. The result looks like: Content of column 1 Content of column 2

Using for Layout To create more complicated designs you simply layout out the design in a table and then code the table row by row.

Summary Tables can be used to create layouts Use rows and data cells to position text where you need it. Put all information you want together in a single data cell. –You can have lists, etc in a data cell!

Rest of Today Follow the attached instructions to create a layout using a table instead of CSS. Try to make the final changes in #11 –See if you can use CSS to format the 2 parts of your table differently –I will give 10 points extra credit for this When done show me you 2 layouts – With CSS and using a table.