Skip to Content

Basics of Web Design
HTML5 & CSS3 First Edition


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.

Tables & Accessibility

Accessibility: Screen Readers

A Look Ahead to CSS "Tables"

if you'd like to explore using CSS to style table-like layouts on web pages, check out the CSS display property. As you may recall from previous chapters, the CSS display property configures whether and how an element is displayed. You've already worked with display: none, display: block, and display: inline.Rachel Andrew's article, "Everything You Know About CSS Is Wrong", encourages developers to embrace the display: table coding methods. Be aware that this technique is still quite limited. For example, there is no built-in mechanism to emulate the rowspan or colspan attribute in HTML tables. However, this is in the works with the CSS3 draft recommendation at http://www.w3.org/Style/CSS/current-work, which includes new CSS specifications for working with multicolumn layouts and grid positioning.

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 225
    Change "headers and ids" to "headers and id" in the second sentence in the first paragraph.
  • 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
  • Page 231
    Change "chapter8/tfoot.html" to "chapter9/tfoot.hml" in the second to the last sentence in the last paragraph.

Questions or Comments

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

 

Book Cover

Review Games

Play a review game to check your understanding.

Flash Cards
Crossword Puzzle
Pick a Letter
Fill in the Blank
Matching

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.

 


Share |