What Tables Can Do for You - Wiley Publishing For Dummies HTML for Dummies, pdf

Traditionally, tables displayed data in a format that's easy to read and understand. HTML changed all that. You may not realize it, but tables are used in a lot of Web sites. Sites such as Amazon, eBay, Yahoo!, and Google all use tables to display their content; but you can't see these tables. Invisible tables dominate the Web. The idea is this: Use tables to arrange items on your Web page, and then be sure to turn the borders off so the user cannot see the table.

Remember By nature, Web pages start out linear; tables allow you to step out of that linear box and put text and images in the most interesting places in your layout.

You can use tables in a couple of ways:

Traditional (ho-hum) method: You can define table or individual cell widths, producing a table that won't resize when users resize their browser's 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 using percentages, thereby allowing the table to resize when users resize their browser windows. Most designers are doing more creative, complex tricks with their tables.

Although this chapter covers all aspects of HTML tables, it focuses on layout tips and techniques.

Using tables for layout can result in rather complex structures, as seen in Figure 8-1. (Some other examples of complex tables are viewable at www.amazon.com and www.yahoo.com.)

Figure 8-1: This Web page uses three different tables for layout. Each table is numbered.

Tip After you open these Web pages in your Web browser, take a look at each one'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 . . .).

Equally effective are the Web pages that use the less-is-more approach. Some design models keep the interface simple - therefore easy to use. Figure 8-2 illustrates the simple approach.

HTML 4 for Dummies, 4th Edition

Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this step- by-step book will put you on the right track.

Table of Contents

HTML 4 For Dummies, 4th Edition Introduction

Part I - Meeting HTML in Its Natural Environment

Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web

Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML

Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images

Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level

Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms

Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS

Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic

Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site

Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens

Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts

Part VII - Appendixes Appendix A - HTML 4 Tags

Appendix B - HTML Character Codes Appendix C - Glossary

Index

Cheat Sheet- HTML 4 For Dummies, 4th Edition List of Figures

List of Tables List of Listings List of Sidebars

Figure 8-2: This Web page uses one simple table with three cells for its layout.