What Tables Can Do for You - HTML 4

Traditionally, tables display data in formats that are easy to read and understand. (X)HTML changed all that. Many Web sites use tables. Sites such as Amazon.com, eBay, Yahoo!, and Google all use tables to display their content, even if you can’t see them in an obvious way. In fact, such invisible tables dominate the Web. The ideas that drive them are:

  • Use tables to arrange items on your Web page.
  • Turn borders off so users can’t see these tables.

By nature, Web pages start out linearly. Tables allow you to step out of a linear mode and put text and images in more interesting places on a page.

You can use tables in a couple of ways:

  • Traditional (ho-hum) method: You can define table or individual cell widths by using absolute numbers. This type of table doesn’t resize when users resize their browser windows.
  • Some designers prefer to use tables for the traditional purpose — to present data — a straightforward, balanced approach that’s easily tackled.
  • Presentation-focused (wow) method: You can define table and cell width by using percentages. This table resizes when users resize their browser windows.

Most designers perform creative, complex tricks with their tables. Although this chapter covers all aspects of HTML tables, it focuses on layout tips and techniques. When you use tables for layout, they can result in a couple of outcomes:

  • Tables can produce complex layout structures, as shown in Figure.
  • After you open these Web pages in your Web browser, look at each page’s HTML source code (try View➪Source from your menu bar). Observe how complex the markup is, and mark ye well when the markup looks haphazardly arranged (alas, if only they’d asked us . . .).
  • Some Web page design models keep the interface simple with the less-is more approach — and therefore easy to use. Figure shows the simple approach.

Figure : This Web page uses three different tables for layout.

This Web page uses three different tables for layout.

Figure : This Web page uses one simple table with three cells for its layout

This Web page uses one simple table with three cells for its layout


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 4 Topics