TIP 51: Designing with Tables


In the beginning, text on an HTML page ran clear across the window with nary a column in sight, and tables were only used as a way to cohesively present tabular data in a Web browser. Designers quickly realized that they could create more complex layouts by housing them in a table. With the recent improvements in CSS, table-less designs now are all the rage, but there are still times when tables are the best solution. GoLive handles tables very gracefully, with some unique features such as the Table & Boxes palette, so let's take a look.

GoLive has three important tools for building tables effectively: the Table object, the Table Inspector, and the Table & Boxes Palette (Figure 51a).

Figure 51a. Use these tools for building tables: the Table object, the Table Inspector, and the Table & Boxes Palette.


The Table object is found in the Basic set of the Objects palette. Drag and drop one onto a page or double-click to insert one and then use the Inspector to set its attributes, such as the number of rows and columns. Across the top of the Table Inspector are buttons called Table, Row, Cell, and Text, where you will find options for setting specific table attributes. What's cool is that if you select a row in your table, GoLive automatically brings the Row tools into focus. If you select a cell, the Cell tab comes forward. And so on.

When defining a table, row, or cell's dimensions, you can use the pull-down menu to choose Pixel, Percent, or Auto. Pixel sets a specific size in pixels, but Percent and Auto work differently. If you set your overall table size as 80 percent, then the table expands or contracts to take up 80 percent of the page it's on. If you use Auto, then the table expands or contracts according to the content inside it. When setting size options for individual cells, you can achieve various effects by combining pixels or percent in one column and auto in the adjacent column. For example, if you create a table with two columns (two cells), set the first cell at 125 pixels and the second cell to auto, the first column will always remain 125 pixels while the second expands or contracts. If you instead set the first cell at 25 percent and the second at 75 percent, the two columns always remain proportionate when the table resizes.

Command-/Control-dragging to Create Tables

If you press the Command (Mac) or the Control (Windows) key as you drag the Table object in the Objects palette, a small dynamic preview appears, allowing you to drag out a table with the exact number of rows and columns you want. Release the modifier key when you've got the size you want and finish the drag and drop operation into the Layout Editor. The next time you use the Table object, it contains the number of rows and columns you used last.


The Inspector is also where to set table border, cell padding, and cell spacing, as well as where to assign color to the table, row, or even an individual cell. Here's a quick explanation of these settings in the Inspector (Figure 51b):

  • Cell Border: Defines the size of the border around the outside of the whole table.

  • Cell Pad: Puts padding between the contents of a cell and its border and applies to all cells in the table.

  • Cell Space: Puts spacing in between cells and applies to all cells in the table.

    Merging Mania

    A neat trick for merging cells is to select one, hold down the Shift key, and press the right arrow key to merge right or the down arrow key to merge down. Be careful, though. While the content in the first cell is not affected, the content in the merged cells will be deleted. Move content into the first cell before merging a cell with other cells.


  • Align Left or Right: Allows other content to wrap around the table. Align Center aligns the table to the middle. Default puts the table on the left, but with no wrap.

  • Caption: Puts a space either above or below the table suitable for a caption.

  • BgImage: Allows you to define a background image for the table. Background images set this way will tile, so use CSS to define a background if you need more control.

  • Tab-Text Import: Brings delimited text into a GoLive table, whereas Export extracts data from a GoLive table to a delimited text format.

  • Table to Layout Grid: Turns a table into a GoLive Layout Grid.

Figure 51b. The Table Inspector.


Note

You can copy a range of cells from a Microsoft Excel spreadsheet and paste it directly into a GoLive table. GoLive automatically creates the correct number of rows and columns needed for the data (see Tip 53).


To add rows or columns, choose one of the following methods:

  • Select a cell and then in the Table portion of the Inspector palette type in the number of rows and columns you desire.

  • Select a cell and then in the Cell portion of the Inspector palette use the Add Row/Column or Delete Row/Column buttons.

  • Select a cell, choose Special > Table, and insert a column or row.

  • Select a cell, use the contextual menu to choose Insert or Remove, and then insert a column or row.

  • Put your cursor inside the last cell of a table and press Tab to create a new bottom row.

  • Press the Command key (on a Mac) and then drag the bottom or right side of the table. Sorry, there's no equivalent on Windows.

You combine cellsfor example, turn a row of four cells into one wide cellby merging them. To merge cells, select a range of cells, Control-click/right-click them, and choose Merge Cells or select Special > Table > Merge Cells from the menu.

A table cell can hold any content that you can put on a page, such as text, images, or even another table (see Tip 58), and data can be both imported into and exported from GoLive tables (see Tip 53).



    Adobe GoLive CS2 Tips and Tricks The 250 Best
    Adobe GoLive CS2 Tips and Tricks The 250 Best
    ISBN: B008CMGJS0
    EAN: N/A
    Year: 2005
    Pages: 301

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