| You can easily select a row, a column, or all the cells in the table. Earlier in this lesson, you selected contiguous cellsthat is, cells that adjoin or touch one another. You can also select noncontiguous cellsthose that do not touchin a table and modify the properties of those cells. You can't copy or paste noncontiguous cells. The following steps demonstrate various selection methods. You can change several options for each cell, either on an individual basis or for multiple selected cells. These options include background color and alignment. | | 1. | In the index.html document, select noncontiguous cells in the top row of the remaining table by holding down Cmd (Macintosh) or Ctrl (Windows) and clicking the first cell, which contains the text Day. Continue to hold down the Cmd or Ctrl key; click the cell containing the text Level.
When you hold down the Cmd or Ctrl key as you move the pointer over a cell, an outlined square can appear next to the pointer arrow to indicate you are selecting cells.
Both noncontiguous cells should now be selected, as shown by the black borders around the individual cells.
 | 2. | Type the hexadecimal code #CCCCFF into the Background Color text field on the Property inspector.
 The color of the cells change to the color you selected. You might need to click outside of the table for the change to be applied.
You can change the background color of single cells, multiple cells, or the entire table, depending on what you select. In this step, you changed multiple cells at the same time.
Notice that the Header option on the Property inspector is checked. Earlier in this lesson you set the header row to topall cells in this row are formatted as headers. You should leave this option checked for all cells in the top row.
Note To change the background color of the entire table, select the table and use the Background Color box on the Property inspector to choose a color for the table, or type the desired hexadecimal code into the corresponding text field. | | | 3. | Select the noncontiguous Time and Instructor 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, directly above the background color option.
Note A background image applied to an entire table might not display as expected if the table has multiple cells or if there are nested tables inside of it. Always test your pages by previewing them in browsers to be sure that the page appears as you expect. | 4. | Click inside the Monday 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 might need to roll the pointer up and down the left border of the table to get the selection arrow to appear. As you place the cursor in position, all the cells in that row will become outlined in red. The selection arrow is a quick way to select a single row or column in a table. If you can't get the selection arrow or the red outlines to appear, try clicking the left border of the row. 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 that contain the day names to match the example.
 The rows now alternate between white and blue.
Note You can also quickly format tables with alternating colored rows automatically. Choose Commands > Format Table to open the Format Table dialog box, which allows you to select from a variety of preset formatting options as well as customize the appearance of your table through color, style, alignments, and alternate row options. However, the Format Table command will not work on tables that have captions, such as the one you've been working with in this lesson. | | | 6. | Place the insertion point within the table, then select the Instructor column by clicking the green column width line that spans that column on the gray table width bar.
You have selected the entire column.
Tip You can also select the Instructor column by clicking the top cell of the column, holding down the Shift key, and clicking the bottom cell in that column.  The default setting for horizontal alignment does the same thing as the left settingit aligns the contents of the selected cells to the left. The default setting for vertical alignment does the same thing as the middle settingit aligns the contents of the selected cells to the middle. Because the top row is a header row, the contents of those cells are automatically centered.
| 7. | In the Property inspector, change the horizontal alignment of the entire Instructor column to Right.
|
 The contents of all cells in the Instructor column are now aligned to the 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. Horizontal: Sets the horizontal alignment of the cell's contents to the browser default (browser defaults are usually left for regular cells and center for header cells) or to left, right, or center. Vertical: Sets the vertical alignment of the cell's contents to the browser's default (usually middle) or to top, middle, bottom, or baseline. Width And Height: 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 the selected cell(s) as a table header. The contents of table header cells are bold and centered by default. Background Image (the top Bg option): Sets the background image for the cells. Background Color (the bottom Bg option): Sets the background color for the cells. Cell backgrounds appear inside the cells onlythat is, the background 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. If you want to prevent these gaps, you should apply color to the entire table or set cell spacing and cell padding to 0. Border: Sets the border color for the cells.
You might 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.  |
