Using a Table The alternative to using inline images is to insert a table, much like Dreamweaver did with your nav bar in Chapter 13. The image goes into one cell of the table, and the surrounding content goes into the other. Standards groups like the World Wide Web Consortium (W3C) can't condone this practice, of course, because it goes against the strict reading of the HTML specifications. Tables aren't for page layout. They're for rows and columns of data. Nevertheless, if you need a two-column effect, tables are the most convenient way to go in Dreamweaver. To add a table, choose an insertion point in the document window, and go to the Insert panel. Click the Table object shown in Figure 15-8, and Dreamweaver opens the Table dialog box, as Figure 15-9 shows. Figure 15-8. The Table object icon on the Insert panel Figure 15-9. Table properties available from the Table dialog box You can skip most of the fields in the Table dialog box, as these are more for data tablestables like the W3C prefers, with information in a grid. You do want to look over the fields under Table Size, though. If you want the image and the content to appear side by side, go for a table with one row and two columns. Leave the width field empty, because the width of the image and the content will determine the size of the table automatically. If you want a visible border around the cells of the table, type a value in the Border Thickness fieldthe larger the value, the heavier the border (in pixels). Otherwise, type 0. As with inline images, you should add a little padding in the Cell Padding field to improve the image's appearance in relation to its surrounding content. You don't need a lot. A couple of pixels are usually plenty. The value in the Cell Spacing field controls the amount of space between the cells in the table. Here, zero is usually the best value. When you're done, click OK, and Dreamweaver inserts the table, as in Figure 15-10. Now, click inside one of the cells of the table and insert the image into it. Next, select all the surrounding content, drag it with the mouse, and drop it into the other cell. As you can see in Figure 15-11, the shorter column (in this case, the one with the image) is centered vertically against the longer column. To position the image at the top of its column, select the image, go to the Tag Selector, and click the <td> tag to select the image's table cell. Then go to the Vert menu on the Property Inspector, and choose Top, as Figure 15-12 shows. Figure 15-10. Dreamweaver inserts the table Figure 15-11. The image is centered vertically at first Figure 15-12. The image's vertical alignment is set to Top