Microsoft Expression Web-IllustratedMicrosoft Expression Web-Illustrated

Unit I:Unit I:Working with TablesWorking with Tables

ObjectivesObjectives

Insert a table and add content

Apply an AutoFormat to a table

Set table properties

Merge cells

Microsoft Expression Web - Illustrated

ObjectivesObjectives

Add and resize rows and columns

Modify cell properties

Modify a table style

Make a table accessible

Microsoft Expression Web - Illustrated

Inserting a Table andInserting a Table andAdding ContentAdding Content

Launch Expression Web, open the a site, then open the table you want to add

Click to the right of the text, click Table on the menu bar, then click Insert Table

Type 4 in the Rows text box, select the text 2 in the Columns text box, press [Delete], type 3, compare your screen to the figure on the following slide, then click OK

Microsoft Expression Web - Illustrated

Inserting a Table andInserting a Table andAdding ContentAdding Content

Microsoft Expression Web - Illustrated

Inserting a Table andInserting a Table andAdding ContentAdding Content

Click in the top-left table cell, type Day

Microsoft Expression Web - Illustrated

Inserting a Table andInserting a Table andAdding ContentAdding Content

Press [Tab], type Date, press [Tab], type Who, then press [Tab]

Type the text in the table, pressing [Tab] after each entry to move to the next cell, but do not press [Tab] after the last entry, then save your changes

Microsoft Expression Web - Illustrated

Inserting a Table andInserting a Table andAdding ContentAdding Content

Microsoft Expression Web - Illustrated

Example of a table with all content entered

Applying an AutoFormat to a TableApplying an AutoFormat to a Table

Right-click anywhere in the table, point to Modify, then click Table AutoFormat

Microsoft Expression Web - Illustrated

Applying an AutoFormat to a TableApplying an AutoFormat to a Table

Click Colorful 2 in the Formats list

Click the Borders check box to remove the check mark, then click the Font check box to remove the check mark

Click the First Column check box to remove the check mark, compare your screen to the figure on the following slide, then click OK

Microsoft Expression Web - Illustrated

Applying an AutoFormat to a TableApplying an AutoFormat to a Table

Microsoft Expression Web - Illustrated

Applying an AutoFormat to a TableApplying an AutoFormat to a Table

Right-click anywhere in the table, point to Modify, then click Table AutoFormat

Click None in the Formats list, then click OK

Save your changes

Microsoft Expression Web - Illustrated

Table Properties Dialog Table Properties Dialog Box OptionsBox Options

Microsoft Expression Web - Illustrated

Setting Table PropertiesSetting Table Properties

Right-click anywhere inside the table, then click Table Properties

Click the Alignment list arrow, then click Center

Under the Specify Width check box click the In pixels option button, select the text 100 in the specify width text box, press [Delete], then type 500

Microsoft Expression Web - Illustrated

Setting Table PropertiesSetting Table Properties

Click the Use background picture check box to add a check mark, click the Browse button below it, navigate to the folder where you store your data files, click to open a data file and then click OK

Microsoft Expression Web - Illustrated

Setting Table PropertiesSetting Table Properties

Microsoft Expression Web - Illustrated

Setting Table PropertiesSetting Table Properties

Save your changes, saving the embedded file when prompted, then review the page in a browser

Close the browser window, then return to Expression Web

Microsoft Expression Web - Illustrated

Merging CellsMerging Cells

Click in the first cell in the top row of the table, press and hold the mouse button, then drag to the right until the first two cells in the top row are selected

Release the mouse button, right-click anywhere in the selected cells, point to Modify on the shortcut menu, click Merge Cells

Microsoft Expression Web - Illustrated

Merging CellsMerging Cells

Microsoft Expression Web - Illustrated

Example of merged cells

Merging CellsMerging Cells

Click in the first cell in the second row, drag to the right to select the first two cells in the row, right-click, point to Modify on the shortcut menu, then click Merge Cells

Microsoft Expression Web - Illustrated

Merge CellsMerge Cells

Click the first cell in the table, select the text DayDate, press [Delete], then type When

Click between the y and S in EverySaturday, then press [Spacebar]

Click between the , and J in Tuesday,June, then press [Spacebar]

Click between the , and J in Friday,June, press [Spacebar], compare your work to the figure on the following slide, then save your changes

Microsoft Expression Web - Illustrated

Splitting CellsSplitting Cells

The process is similar to merging cells, but you use the Split Cells dialog box

Microsoft Expression Web - Illustrated

Adding and ResizingAdding and ResizingRows and ColumnsRows and Columns

Right-click in the second cell in the top row of the table, point to Insert, then click Column to the Right on the shortcut menu

Add the text to the cells in the new column, pressing the down arrow to move to each new cell

Microsoft Expression Web - Illustrated

Adding and ResizingAdding and ResizingRows and ColumnsRows and Columns

Microsoft Expression Web - Illustrated

Example of an added column

Adding and ResizingAdding and ResizingRows and ColumnsRows and Columns

Click after the last word in the last table cell, then press [Tab]

Add the new text to the cells in the new row, pressing [Tab] to move to each new cell

Microsoft Expression Web - Illustrated

Adding and ResizingAdding and ResizingRows and ColumnsRows and Columns

Microsoft Expression Web - Illustrated

Adding and ResizingAdding and ResizingRows and ColumnsRows and Columns

Point to the dotted line between the first and second cell in the first row until the pointer changes to , click and drag to the right until the ScreenTip reads 130px, compare your screen to the figure on the following slide, then release the mouse button

Microsoft Expression Web - Illustrated

Adding and ResizingAdding and ResizingRows and ColumnsRows and Columns

Microsoft Expression Web - Illustrated

Point to the dotted line between the second and third cell in the first row until the pointer changes to , click and drag to the right until the ScreenTip reads 160px, then release the mouse button

Save your changes, preview your page in the browser window, then return to Expression Web

Modifying Cell PropertiesModifying Cell Properties

Right-click the first cell in the top row of the table, point to Select, then click Row

Microsoft Expression Web - Illustrated

Modifying Cell PropertiesModifying Cell Properties

Right-click in the selected row, then click Cell Properties on the shortcut menu

Microsoft Expression Web - Illustrated

Modifying Cell PropertiesModifying Cell Properties

Click the Horizontal alignment list arrow, then click Center

Click the Color list arrow in the Background section, click the light tan swatch that matches the page background in the Document Colors section (ScreenTip reads “rgb (229,233,203)”), compare your screen to the figure on the following slide, then click OK

Save your changes, preview the page in a browser, close the browser window, then return to Expression Web

Microsoft Expression Web - Illustrated

Modifying Cell PropertiesModifying Cell Properties

Microsoft Expression Web - Illustrated

In addition to modifying the whole table, In addition to modifying the whole table, you can also modify individual cells, or you can also modify individual cells, or groups of cellsgroups of cells

Using the Cell properties dialog box you Using the Cell properties dialog box you can:can:

Set horizontal and vertical alignment Set horizontal and vertical alignment

Specify a cell as a header cell Specify a cell as a header cell

Dictate that the content of a cell not Dictate that the content of a cell not wrap inside a cellwrap inside a cell

Modifying a Table StyleModifying a Table Style

Right-click anywhere in a table, click Select, click Table, then look at the visual aid tab to see what style is applied to your table

Microsoft Expression Web - Illustrated

Modifying a Table StyleModifying a Table Style

In the Manage Style or Apply styles task pane, right-click the style that is applied to your table, then click Modify Style on the shortcut menu

Click Border in the category list

Click the Same for all check boxes under border-style, border-width, and border color to remove the check marks

Microsoft Expression Web - Illustrated

Modifying a Table StyleModifying a Table Style

Click the bottom list arrow under border-style to see different types of styles

Choose the style you’d like

Save your changes, then preview your page in a browser

Close the browser window, then return to Expression Web

Microsoft Expression Web - Illustrated

Modifying a Table StyleModifying a Table Style

Microsoft Expression Web - Illustrated

Making a Table AccessibleMaking a Table Accessible

Right-click in the first cell in the top row of the table, point to Select, then click Row

Right-click in the selected row, then click Cell Properties on the shortcut menu

Click the Header cell check box in the Layout section, compare your screen to the figure on the following slide, then click OK

Microsoft Expression Web - Illustrated

Making a Table AccessibleMaking a Table Accessible

Microsoft Expression Web - Illustrated

Making a Table AccessibleMaking a Table Accessible

Click Table on the menu, point to Insert, then click Caption

Type a caption in the caption area

Microsoft Expression Web - Illustrated

Making a Table AccessibleMaking a Table Accessible

Right-click anywhere in the table, point to Select, then click Table

Click the Tag Properties tab in the CSS Properties task pane, then click in the text box to the right of summary as shown in the figure on the following slide

Type a description of the table

Save your changes, close the site, then exit Expression Web

Microsoft Expression Web - Illustrated