In the previous lesson, you learned some basics of controlling the layout of a web page using CSS. 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 (as you learned in the earlier lesson on Data Tables). However, web designers soon learned that web content could be inserted into table cells, allowing for the creation of complex layouts with multiple columns and rows. This was used so widely that many, if not most, web pages today still use tables for layout.
However, tables are rapidly becoming obsolete for layout, in favor of CSS. CSS layout has important advantages over table layout. It requires relatively little code, which translates to smaller file sizes and faster downloads. Less code also makes the page easier to update and maintain. Also, 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.
Also, CSS is more accessible for blind users. Imagine how distracting it would be to navigate on a page where the screen reader keeps announcing which table row and column you're in. This is irrelevant information, and can be extremely distracting. A CSS-based layout eliminates these distractions.
However, tables for layout haven't completely gone away. CSS layout can be challenging, and browsers historically have varied in how they interpret CSS, which sometimes means that 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.
Since both CSS and tables are still widely used, this courses teaches both. In the current lesson, we will focus our attention on table layout. This exercise is for practice only, and will not be part of your portfolio.
At the completion of this exercise:
Save your changes, and show your final table-based layout to your instructor before starting the next unit.
Copyright © 2005-2008 by University of Washington. Permission is granted to use these materials in whole or in part for educational, noncommercial purposes provided the source is acknowledged. This product was created with support from the National Institute on Disability and Rehabilitation Research of the U.S. Department of Education (grant #H133D010306), and is maintained with support from the National Science Foundation (grant #CNS-0540615). The contents do not necessarily represent the policies of the U.S. federal government, and you should not assume their endorsement.