| 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 columns ”but 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 results ”an 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). NOTE Dreamweaver MX 2004 has added a third Expanded Table mode, which helps you see your table layout more clearly. It's discussed in 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 level ”a table cell ”or the largest ”a 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 tables ”perhaps from your hand-coding days ”you 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. |