Basics of Web Design

Chapter 9 - Table Basics

While back in the day tables were often used to format the layout of a web page, CSS is the page layout tool of choice for modern web designers. In this chapter, you'll become familiar with coding HTML tables to organize information on a web page.

HTML5 & the Summary Attribute

HTML5 is still in draft status and, while the specification was fairly stable by the time the book was written, there have been a lot of controversies related to accessibility. The most recent version of the draft considers the summary attribute to be obsolete. However, efforts are underway for reinstatement. See the Chapter Updates related to the summary attribute below.

Tables & Accessibility

• Creating Accessible Tables
• Accessible Data Tables
• Accessible Table Builder

Accessibility: Screen Readers

• Jaws
• Window-Eyes

Focus on Web Design

Good artists view and analyze many paintings. Good writers read and evaluate many books. Similarly, good Web designers view and scrutinize many web pages. Surf the Web and find two web pages, one that is appealing to you and one that is unappealing to you. Review the pages and answer the following questions for each one.

1. What is the URL of the website?
2. Does this page use tables? If so, for what purpose—page layout, organization of information, or another reason?
3. Does this page use CSS? If so, for what purpose—page layout, text and color configuration, or another reason?
4. Is this page appealing or unappealing? List three reasons for your answer.
5. If this page is unappealing, what would you do to improve it?
   

Chapter Updates

• Page 218
  The caption for Figure 9.1 should be:
      "Table with three rows, three columns, and a border."
  The sentence below Figure 9.1 should indicate "three columns" instead of "four columns".
• Page 227, #4, the word "diplay" should be "display"
• Summary Attribute Obsolete. The following notes relate to the summary attribute (which is considered an obsolete attribute in the most current draft of the HTML5 specificiation):
  • Page 219, Table 9.1:
       Add a notation to the entry for the summary attribute (obsolete in HTML5)
  • Page 224, 225, & 231:
       Remove the summary attribute and value from the code samples
  • Page 235: Do not code a summary attribute on the table
    

Questions or Comments

The author would like to hear from you!
Feel free to complete the contact form with your questions or comments.