UNIT 3 > MODULE 2

Lesson 2: Layout With Tables

Overview

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.

Learner Outcomes

At the completion of this exercise:

Activities

  1. In this lesson you will perform the same exercise that you did in Lesson 1, but instead of using CSS to create the two column list, you will use tables.
  2. Make a copy of your index.htm file (the file you organized into columns in Lesson 1). Name the file index_tables.htm
  3. Open the new file. Rather than surrounding each section of content with <div></div> tags, you will be surrounding each section of content with <td></td> tags. To position content side by side, it simply needs to be inside table data cells that are part of the same table row.
  4. Replace each of the two <div> tags with <td>. If your <div> tags have class and id attributes, delete these.
  5. Similarly, replace each of the two </div> tags with </td>
  6. Now you have content contained within two table data cells, but they're not yet part of a larger table. Now you need to surround these two table cells with the tags necessary to comnplete the table (the <table></table> and <tr></tr> tags).
  7. When finished, your layout table will look something like this:
    <table>
    <tr>
    <td>Content of column 1 </td>
    <td>Content of column 2 </td>
    </tr>
    </table>
  8. Save your work, and check it out in your web browser. The content should be positioned in two columns, but might not look quite right just yet.
  9. Modify the table attributes. Add the following attibutes and values tothe <table> tag:
    • border="0"
    • width="80%"
    • cellpadding="3"
    • cellspacing="2"
  10. You can also add attributes to the <td> tag, such as the following attribute, which forces text to align vertically to the top of the table cell:
    • valign="top"
  11. Each time you add or change an attribute, save your file and refresh your browser to see the effect of the change you've made.
  12. Try using CSS to change the background color of your table. Play with other styles too, repeatedly checking to see the effect of your changes. How would you go about using CSS to style your two columns differently from one another?

Handouts/Online Documents

All done?

Save your changes, and show your final table-based layout to your instructor before starting the next unit.