INTERACTIVEPROOFING.COM

printers proof - www.interactiveproofing.com

Menu


If you open the index.htm file for this chapter, notice a couple minor changes. First, the title, margin widths, and margin heights have been


set for you. Second, the header_bg.gif image has been resized from 1 pixel by 2000 pixels to 1 pixel by 177 pixels. You may be thinking that by shortening the image, the background will now tile as the user scrolls down the page. Although this would seem to be the case initially, you'll see how tables play a huge roll in resolving this dilemma. To begin, insert a new table into the Document window by choosing the Table option from the Insert menu. When the Table dialog opens, format the dialog so that it contains 1 row, 1 column, has a width of 100 percent, contains no border, no cell padding, and no cell spacing. Click OK to insert the new table into the Document window. With the table now in the Document Window, you'll notice a few details. First and most obvious is that the table spans the entire width of the Document window. Remember, this table is set to 100 percent. What that means is that no matter how I stretch the Files panel group on the right, the table always automatically adjusts to accommodate the width of the Document windowand it will do the same thing in the browser window as well. Second, notice that the Table Widths Visual Aid displays the width of the table as a percent but just to the right of that value displays the current width in pixels within parentheses. This value is simply for your information and is useful to reference in case you ever need to convert the tables' percent to a pixel value instead. Finally, notice that even though we didn't specify a border, the table appears to contain a dotted border surrounding the perimeter of the table. This is actually a visual aid and not a border. This visual aid, which can be hidden by disabling the Table Borders option from the Visual Aids menu in the Document bar, won't show in the browser. With the table selected, you can now begin modifying various attributes from the Properties Inspector. Let's begin. The Table ID An attribute seldom used, the Table ID attribute simply allows you to uniquely identify the table so that it can be referenced from client-side and server-side programming languages. This attribute is entirely optional and has no effect on the table if it's left empty. We'll use the Table ID as a simple way of identifying the tables. If I say select the content table, you'll know what table to select. If I indicate to select the header table, again, you'll know what table to select. With our existing table selected, enter the value Header in the Table ID text box and press Enter. Adding and Removing Rows and Columns As you might expect, there are numerous ways for adding and removing rows and columns after you've inserted a table. Obviously, you could delete the table and reinsert it if you really wanted to, but there are simpler methods. For instance, to add a row, you could place your cursor in the cell and press the Tab key on your keyboard. Doing this adds a new row. Alternatively, you could use the Insert Row option, available from both the Table submenu in the context and Modify menus (or by pressing Ctrl+M). When the new row has been inserted, you can easily remove it by accessing the Delete Row option (press Ctrl+Shift+M) from the Table submenu in either the context or Modify menu. Another, more flexible, alternative for inserting rows is to use the Insert Rows or Columns dialog available from the Table submenu in both the context and Modify menus. Choosing this option opens the Insert Rows or Columns dialog (see Figure 6.9). Figure 6.9. Use the Insert Rows or Columns dialog as an alternative method to inserting rows or columns in your table.   With the dialog open, you'll immediately notice that you can not only insert a new row below the existing row, but also insert a new row above the existing row. Even better, you have the option of inserting new columns before or after the column where your cursor is currently focused. Try entering the number 5 in