Section 7.2. Table Basics


7.2. Table Basics

A table is a grid of rows and columns that intersect to form cells , as shown in Figure 7-5. A cell acts like a mini document window, in which you can place images, text, and even additional tables. And because a cell can have a fixed width and height, you can place these items with precision. For example, you can build a table with three cells in a row and fill each cell with a single column of text, thus simulating the column layout of a print publication such as a newspaper.

Figure 7-5. Rows, columns, and cells make up a table. Cell spacing specifies how many pixels of space appear between cells. Cell padding, on the other hand, provides a space between the four sides of the cell and the cell's content, as described on Section 1.2.1.

Tables are also the key to building more complex designs. For instance, you can merge cells together to create larger cells that span columns or rows, nest tables for added versatility, and create flexible designs that expand to fit the browser window.

(This should all sound familiar to anyone who's used, for example, the table tool in Microsoft Word.)

Since tables weren't originally intended for layout purposes, many people find working with them counterintuitive. For starters, creating tables usually involves thinking in terms of rows and columnsbut having to determine the number of rows and columns you'll need just to place an image at a particular position on a page isn't a natural way to design.

That's why Dreamweaver offers two separate tools for achieving the same ends: Standard view and Layout mode . Both these tools are available from the Insert bar's Layout tab (see Figure 7-6). Layout mode and Standard view both produce the same resultsan underlying grid of tables and cells that let you control the layout of a page (see Figure 7-1)and nearly the same HTML code. (Layout mode adds a little extra codein the form of HTML commentsthat helps Dreamweaver display and manipulate tables.)

Figure 7-6. You can switch between Standard view and Layout mode using the buttons in the Layout panel of the Insert bar. The Layout Table and Layout Cell tools work while in Layout mode only and are dimmed when Standard view is selected. Likewise, the standard Table tool, Insert Div object, and Draw Layer tool (described in Chapter 8) are available only while Standard view is selected. The standard Table tool and Insert Div object are available from the Common panel as well.


Note: Dreamweaver has a third mode, Expanded Table , which helps you see your table layout more clearly. It's discussed on Section 7.5.3.

But although they produce the same table structures, the two views offer different approaches to building them.


Note: When you first enter Layout mode, the "Getting Started in Layout mode" window may appear, offering a quick overview of the layout tools. Turn on "Don't show me this message again" to prevent this window from opening every time you switch views; otherwise , it'll get old quick.

Standard view requires you to envision most of your design in advance, answering questions like: Where will items go on the page? How many table rows and columns will this require? What size should the table be? In essence, you need to know what the table will look like before beginning.

Layout mode, on the other hand, lets you work at either the smallest levela table cellor the largesta table. If you use the Cell drawing tool to draw a cell in the document window, Dreamweaver creates the underlying table structure. If you move the cell, resize it, or delete it, Dreamweaver rewrites the code to create a table to fit your design.

This flexibility makes the Layout mode a very good place to start when creating a page's design. The changes that Dreamweaver can make to a table's HTML code in Layout mode take fractions of a second, while comparable modifications in Standard view could take you much longer. Though it's certainly possible to revise a table's structure in Standard view, it's more difficult.


Note: Even if you enjoy the ease of Layout mode, don't let it keep you from learning how HTML tables really work. If you plan to use Dreamweaver for more than just an occasional personal Web site, you'll do yourself a favor by learning everything you can about this important topic. Not only does the rest of this chapter steer you in the right direction, but you can find lots of additional tutorials and other helpful information at www.dwfaq.com/Tutorials/Tables/.

Once the basic design of a page is complete, there's little difference between a page viewed in Layout mode and a page viewed in Standard view. In fact, you may well switch to Standard view for good once the basic page design is complete. Standard view not only hides many of the visual aids included in Layout mode (because they sometimes obscure text, images, and other elements on a page), but also lets you access tools that are unavailable in Layout mode, such as the basic Table object and Draw Layer tool. Furthermore, you can set up some properties of a table, like the background image, only in Standard view.


Tip: If you're already familiar with using tablesperhaps from your hand-coding daysyou may find Layout mode confusing. You can skip Layout mode and build tables the old-fashioned way (though still at a much faster pace than hand coding). Turn to Section 7.4 for details.

The first part of this chapter introduces the Layout mode and its associated drawing tools; for a tour of Standard view and its techniques, see Section 7.4. Just keep in mind that, whichever approach you take, you're still only creating basic HTML tables.



Dreamweaver 8[c] The Missing Manual
Dreamweaver 8[c] The Missing Manual
ISBN: 596100566
EAN: N/A
Year: 2006
Pages: 233

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net