• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 4. Working with text and tables > Converting a layout grid to a table

Converting a layout grid to a table

For convenience, you used a layout grid to layout your Web page. While layout grids are easier to use than HTML tables, especially for novices, layout grids create more code than do HTML tables. Now that you are satisfied with the layout, you can easily convert the layout grid to an HTML table.

In the appraise.html page, click near to the edge of the page to select the layout grid. If you accidentally made your layout text box the same size as your layout grid, select the layout text box and resize it so that at least part of the layout grid is showing. (You can check whether you have selected the layout grid in the Inspector. If the Inspector is the Layout Grid Inspector, you have successfully selected the layout grid.)

Choose Special > Layout Grid to Table.

In the Convert dialog box, select the Strip Control Row and Column option and click OK. Your layout grid is converted to an HTML table.

The Strip Control Row and Column option removes the empty, one-pixel control row and column at the bottom and right side of the grid. For more information, see “Converting a layout grid to a table” in the Adobe GoLive CS Online Help.

At this point you can delete any extra rows and columns if you wish.

Click outside the new HTML table, and choose File > Save to save your work.

Any time you need to update the layout of the page, you can convert the HTML table back to a layout grid by selecting the newly created layout table in the appraise.html document and clicking the Convert button for the Table to Layout Grid option in the Table tab of the Table Inspector. The table is immediately converted to a layout grid, and all the text within the page is contained in a layout text box.

You've completed the design of the Appraisal page for this lesson. Now you're ready to preview the page in GoLive.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint