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

Lesson 4. Elements of Page Design > Selecting and Modifying Table Elements

Selecting and Modifying Table Elements

You can easily select a row, a column, or all the cells in the table. Earlier in this lesson you selected contiguous cells—that is, cells that adjoin or touch one another. You can also select noncontiguous cells—those that do not touch—in a table and modify the properties of those cells. You cannot copy or paste noncontiguous cells. The following steps demonstrate various selection methods.

1.
In the lodging.html document, select the noncontiguous cells in the top row of the remaining table by holding down Command (Macintosh) or Ctrl (Windows) and clicking the first cell, which contains the text “Name.” Continue to hold down the Command or Ctrl key and click the cell containing the text “Price” and also the cell containing the text “Availability.”

All three noncontiguous cells are selected, as shown by the black borders around the individual cells.

2.
Use the Property inspector to change the background color of the selected cells to #CCCCFF.

You can change the background color of single cells, multiple cells, or the entire table, depending on what you have selected. In this step, you change multiple cells at the same time.

You may need to click outside of the table in order for the change to be applied.

3.
Select the noncontiguous “Location,” “Phone,” and “Lens” cells; change their background colors to #9999CC.

You can also apply a background image to single cells, multiple cells at once, or entire tables. The background-image option is also available in the Property inspector, right above the background-color option.

4.
Click inside the “Point Arena” row and position the pointer at the left end of the row, just on the table border. Click when the selection arrow appears; then change the background color to #6699CC.

You may need to roll the pointer up and down the left border of the table in order to get the selection arrow to appear. This selection arrow is a quick way to select a single row or column in a table. When you click the border, all cells in the table become selected and are displayed with black outlines.

5.
Continue to change the color of other rows in the table to match the example.

The rows now alternate between white and blue.

6.
Select the “Phone” column by positioning the pointer at the top of the column. Click when the selection arrow appears.

You have selected the entire column.

7.
In the Property inspector, change the horizontal alignment to Center. Leave the vertical alignment as Default.

In standard view, the default setting for horizontal alignment does the same thing as the left setting—it aligns the contents of the selected cells to the left. The default setting for vertical alignment does the same thing as the middle setting—it aligns the contents of the selected cells to the middle.

8.
Select the Lens column by clicking the top cell; then hold down the Shift key and click the bottom cell.

The entire column is selected.

9.
In the Property inspector, change the horizontal alignment to Right.

The lower half of the Property inspector contains the following cell attributes:

  • Merge: Combines two or more selected cells into one cell.

  • Split: Divides a single cell into multiple cells.

  • Horz: Sets the horizontal alignment of the cell's contents to the browser default (usually left for regular cells and center for header cells) or to left, right, or center.

  • Vert: Sets the vertical alignment of the cell's contents to the browser's default (usually middle) or to top, middle, bottom, or baseline.

  • W and H: Sets the width and height of selected cells in pixels. To use percentages, follow the value with a percent sign (%).

  • No Wrap: Prevents word wrapping; cells expand in width to accommodate all data. Normally, cells expand horizontally to accommodate the longest word and then expand vertically.

  • Header: Formats each cell as a table header. The contents of table header cells are bold and centered by default.

  • Bg (top): Sets the background image for the cells.

  • Bg (bottom): Sets the background color for the cells. Background color appears inside the cells only—that is, it does not flow over cell spacing or table borders. If your cell spacing and cell padding are not set to 0, gaps appear between the colored areas even if the border is set to 0.

  • Brdr: Sets the border color for the cells.

You may need to click the expander arrow on the right side of the Property inspector if you do not see these options. You will work with some of these options in the following exercises.

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