Web Site Design by David Rutstein from A to Z

Tables are a very helpful way of presenting data on a website. Tables have an interesting history on the Web, though one that bears a little discussion before you dig in and begin creating them.

As many readers might be aware, the Web was created by a physicist. Tim Berners-Lee had a vision that the technology could be used as a highly efficient means of distributing and sharing research documents. So tables are an extension of that original idea: They were added to the growing language of HTML as a means to share data with other researchers and scientists.

At the time, CSS hadn’t emerged, so there was no technology available to specifically address the way pages were laid out. Because tables create a grid, it quickly became convention to use tables as a means of displaying content rather than data de facto layout tool because nothing better existed.

To this day, tables remain the primary means of laying out web documents visually. But this approach is fraught with problems. Table-based layouts take longer to load and are often extremely detailed, making them difficult to manage effectively. Tables for layout do not follow the structural premise so important for search engine rankings, so using them can inhibit the capability to improve ranking. Finally, and perhaps most importantly, table layouts create numerous barriers to accessibility.

The use of tables for layout is the biggest hack in HTML history because it forces elements and attributes created for one specific thing: the display of tabular data, to be used for something entirely different. There is no doubt that table layouts changed the face of the Web, but now that we have CSS, there’s no reason to use tables for most layouts anymore. Instead, tables are once again being looked upon in their true light: as a means of displaying data.

An approach known as transitional design incorporates the use of lightly crafted tables along with CSS to achieve layouts that are compatible in older browsers. This technique is an excellent approach if you have concerns about supporting browsers other than contemporary ones. However, the ideal is to avoid tables altogether, except for the purpose for which they were intended.

From structure to well-formatted text, to great imagery and interactive features, you’ve sure come a long way in three short chapters.

Of course, if you’re getting frustrated because all of this seems very much like building a house while you’re imagining how it’s going to be decorated, that’s understandable. It’s important to keep in mind that building great web pages in today’s world means taking the extra time to organize your materials, have clear goals, and take pride in the crafting of your documents.

As with a home, the better the foundation, the more well-built and finely crafted the structure, the easier it will be to make aesthetic modifications. This is really what we’re after by taking the time to build our pages correctly. Just something as simple as placing all your images in an image directory, scripts in a script directory, and additional media in corresponding directories means having an internal site structure that will grow with you instead of causing collapse as your site grows and changes to meet your needs.

Imagine if you hadn’t taken the time early on to build the structure well. Take the advice of professional web developers who have learned the hard way: Not building the infrastructure well can lead to all kinds of expensive, time-consuming, and downright frustrating problems along the way.

Now that you’re a bit more organized in terms of your document, text, and image and media management, it’s time to get fancier. In the next chapter, you’ll be learning how to build effective tables. Once the holy grail of how websites were laid out visually, tables are being revisited for their structural integrity.

What we’re learning is that CSS is a lot more efficient and flexible for the presentational aspects of our site, but tables can be extremely useful for displaying a range of information in effective ways. Depending upon your needs, you might find tables an excellent way of managing data, further assisting your site visitors to easily get to and understand the information you’re sharing with them.

Images, media, and scripting help a site become “dynamic and rich.” This is called dynamic because many of these features offer the opportunity for the site visitor to interact in an active way with the site. It’s rich because the site becomes richer visually and in terms of content. Images in this chapter refers specifically to images you’ll be adding to your page as part of the design itself or as a means of enhancing the content, such as with photos. Images must be processed in a specific way for the Web, using a good image editor; you can quickly learn the details.

NOTE

Web graphics can be created by a wide range of programs, but typically you’re going to want to have a decent image editor, such as Photoshop (if your wallet is a little smaller, you can try Jasc’s Paint Shop Pro). There are numerous other web graphic programs; you can find them by searching for “web graphics software” at your favorite search engine.

 

Two primary types of web graphic formats exist: GIF and JPEG. The GIF file format is best for images with few, flat colors and line drawings; JPEGs are best for images with many colors and color gradients, such as photos. A third type of web graphic format is PNG, but the lack of support for PNG in some browsers makes it a less stable choice.

Multimedia on the Web can refer to a number of things, including animated GIFs, Flash animations, audio, video, and Java applets. Scripts in this chapter refers to JavaScript and DHTML effects that you can add to your documents, creating a richer user experience.

NOTE

Although images, media, and scripting can bring more options to your site, they also can add unnecessary clutter and download time. I like to think of most content of this nature to be decorative. Just as you wouldn’t want to overdecorate a house, think about how less can be more when it comes to your page.

If content is king, then text is what helped him get to his royal throne! Without well-formatted, organized text and intelligent linking, any individual trying to create kingly content will be at quite a disadvantage.

If you step back in history a bit, you’ll find that the Web was, at first, all about text and links. That it’s become a vibrant, colorful, visual environment for the majority of its users was an accident, really. The original intention of the Web’s inventor, Tim Berners-Lee, was to create a multi-platform means for his fellow scientists to share information, publish their data, and be able to link a reference within an essay directly to that related reference. The man was a physicist, not a designer, and he was working in an environment that didn’t even have a graphical user interface. I’m talking the old-fashioned Internet, seen as green or amber text on a black background.

Given its humble origins, the Web has come a long way. It’s a highly visual environment now, and before CSS became widely available for use, people creating websites relied on elements meant for text to create visual results, such as adding extra line breaks to get additional whitespace on the page.

Now that you can use CSS to effectively manage such visual concerns, the focus has shifted back to using text elements as they should be used: to format text. So despite the emergence of a highly visual, highly interactive Web, text and linking remain the primary meat and potatoes of any website worth its salt. Anyone working with text is encouraged to use text and links in a meaningful way.

In this chapter, you’ll learn how to work with text and links efficiently and appropriately. From the logic of headers and lists to a variety of linking options, you’ll find out what it means to create great text in noble fashion, making your content as royal as can be.