• 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. You selected contiguous cells (cells that touch one another) earlier in this lesson. You can also select noncontiguous cells 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 biking_table.htm document, select the noncontiguous cells in the top row of the remaining table by holding down Ctrl (Windows) or Command (Macintosh) and clicking the first cell, which contains the text “Ride Name.” Continue to hold down the Ctrl or Command key and click the cell containing the text “Location.”

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

2.
Change the background color of the selected cells to #FFCC66 using the property inspector.

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.

3.
Select the Type and Rating cells and change their background color to #CC9966.

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

4.
Select the Flint Creek Ramble 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.

This selection arrow is a quick way to select a single row or column in a table. All cells in the table are selected and show black borders.

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 Location 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 the left setting does: 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 Rating 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 property inspector contains a number of row and column options. 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 set the width and height of selected cells in pixels. To use percentages, follow the value with a percent (%) sign.

No Wrap prevents word wrapping, so that 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.

The Bg text field (top) sets the background image for the cells. The Bg color box and text field (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 may appear between the colored areas even if the border is set to 0. And finally, Brdr sets the border color for the cells. The border color will only display if the border value is greater than zero.

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