Dreamweaver.MX.1002004.The.Missing.Manual [Electronic resources] نسخه متنی

7.1 Table Basics

A table is a grid of rows and columns that intersect to form cells, as shown in
Figure 7-2. 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.

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 were not 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 is not a
natural way to design.

That's why Dreamweaver offers two separate tools for achieving the same ends: Standard
view and Layout mode. Both of these tools are available from the Insert bar's
Layout tab (see Figure 7-3). 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
code, HTML comments, that help Dreamweaver display and manipulate tables).

Section 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, is the space from the edge of a cell to the content inside the cell.
It provides a margin between the four sides of the cell and the cell's
content, as described in Section 7.2.2.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.

You can switch between Standard 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 and Layer tool (described in Chapter
8) are available only while Standard view is
selected. These two tools are available from
the Common panel as well.

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 can be more difficult (see Section 7.6 for more on modifying tables).

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 will 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/
.

Dreamweaver's Layout mode may take
some time to get used to. Tables are
identified by small tabs on their top left
corners labeled Layout Table (A). You
can include more than one table per
page, and even put a table inside another
table. Until you add cells to a table (white
areas, B), you can't add text, graphics, or
anything else. Areas of a table without
cells have a gray background (C). The
width of each column and the overall
width of the table appear along the top
or bottom of the table (D). When you
select a cell (E), eight resizing handles
appear, which you can drag to change
the dimensions of that cell.

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 (see Figure 7-4). 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 Layer tool. Furthermore, you can set up some properties of a table, like
the background image, only in Standard view.

NOTE

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.3 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.3. Just keep in mind that, whichever approach you take, you're still only creating basic HTML tables.