Publishers of technology books, eBooks, and videos for creative people

Home > Articles

  • Print
  • + Share This
This chapter is from the book

Spanning rows and columns

At this point your table is in the standard grid pattern of a table. In this section you will find out how to span rows and columns to create larger areas that expand over several rows or columns.

Before you span rows and columns on your page, you will open a practice file.

  1. Leave the file table1.html open and choose File > Open. Open the file named table_practice in the Lesson03 folder.

    A page with a simple table appears.

    You will now discover how to use the Table & Boxes palette to easily select cells.

  2. Insert your cursor into any cell, then choose Window > Table & Boxes. The Table & Boxes palette appears. Make sure you are on the Select tab.

    The Select Tab of the Tables & Boxes palette provides you with a frame, or outline, of the table. You can use this outline to select cells, rows, and columns. You can also use the Select parent table button (tablebutton.jpg) in the lower left to zoom into and out of tables within tables. This button is grayed out since there are no tables placed inside of this table.

  3. In the Table & Boxes palette, click on the top left cell to select that cell.

    Practice by clicking on other cells. You can Shift+click to select multiple cells using this palette.

    If you selected other cells, select only the upper left cell.

  4. Locate the Table Inspector. Choose the Cell tab and type 2 in the Row Span text field.

    The cell now spans two rows.

  5. With the same cell still selected, type 2 in the Column Span text field, press Return or Enter. The cell is now expanded to the size of four cells.
  6. Type 1 in both the Row Span and Column Span text fields to bring the cell back to its original size. Press Enter.

    Next you will use keyboard shortcuts to span rows and columns.

  7. Using the Table & Boxes palette, select the upper left cell again.
  8. Hold down the Shift key and press the right arrow key (→). The cell is spanned to two columns.
  9. Now select the right cell in the second row.
  10. Press Shift+Down arrow (↓) to span the row to two rows. Repeat this again to span three rows.
  11. Now practice undoing the row and column spans by pressing Shift+Left arrow (←), and then Shift+Up arrow (↑). You can also undo spans by changing the Row Span and Column Span text fields in the Cell tab of the Table Inspector.
  12. Choose File > Close and do not save. You will now apply what you practiced on this page to your table_layout.html page.

Designing a layout using spans

Now apply column and row spans as part of your layout.

  1. Return to the table1.html page and using the Object Selection tool (selectiontool.jpg) select the upper left cell. Press Shift+Right Arrow (→) one time. The column now spans the entire table.
  2. Now select the right cell in the second row and press Shift+Right Down Arrow (↓). Repeat this one more time. The cell is now spanned three rows.
  3. Choose File > Save. Leave this file open.

Changing the table attributes

In this section you will add color to some table cells.

  1. If your Table & Boxes palette is not open, choose Window > Table & Boxes.
  2. In the Select tab of the Table & Boxes palette, click to select the first cell in the second row. Then, Shift+click to select the two cells directly underneath.
  3. In the Cell tab of the Table Inspector, click the lower right corner of the Color field and choose the Web Named Colors library from the drop-down menu. Click the corner again, and select the color #A9A9A9 DarkGrey from the swatches displayed above the list of swatch libraries. GoLive displays the swatches from the swatch library you chose.
  4. In the Table tab of the Table Inspector, eliminate the border on this table by typing 0 in the Border text field, and pressing Return or Enter.
  5. Create some padding by typing 10 the Cell Pad text field. This adds a 10-pixel margin around the interior of all cells.
  6. Eliminate the spacing between the cells by typing 0 in the Cell Space text field. Press Return or Enter.
  • + Share This
  • 🔖 Save To Your Account