1. Microsoft Expression Web-Illustrated Unit I: Working with Tables

2. Objectives Insert a table and add content Apply an AutoFormat to a table Set table properties Merge cells Microsoft Expression Web - Illustrated

3. Objectives Add and resize rows and columns Modify cell properties Modify a table style Make a table accessible Microsoft Expression Web - Illustrated

4. Inserting a Table and Adding 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

5. Inserting a Table and Adding Content Microsoft Expression Web - Illustrated

6. Inserting a Table and Adding Content Click in the top-left table cell, type Day Microsoft Expression Web - Illustrated

7. Inserting a Table and Adding 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

8. Inserting a Table and Adding Content Microsoft Expression Web - Illustrated Example of a table with all content entered

9. Applying an AutoFormat to a Table Right-click anywhere in the table, point to Modify, then click Table AutoFormat Microsoft Expression Web - Illustrated

10. Applying 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

11. Applying an AutoFormat to a Table Microsoft Expression Web - Illustrated

12. Applying 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

13. Table Properties Dialog Box Options Microsoft Expression Web - Illustrated

14. Setting 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

15. Setting 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

16. Setting Table Properties Microsoft Expression Web - Illustrated

17. Setting 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

18. Merging 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

19. Merging Cells Microsoft Expression Web - Illustrated Example of merged cells

20. Merging 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

21. Merge 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

22. Splitting Cells The process is similar to merging cells, but you use the Split Cells dialog box Microsoft Expression Web - Illustrated

23. Adding and Resizing Rows 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

24. Adding and Resizing Rows and Columns Microsoft Expression Web - Illustrated Example of an added column

25. Adding and Resizing Rows 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

26. Adding and Resizing Rows and Columns Microsoft Expression Web - Illustrated

27. Adding and Resizing Rows 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

28. Adding and Resizing Rows 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

29. Modifying Cell Properties Right-click the first cell in the top row of the table, point to Select, then click Row Microsoft Expression Web - Illustrated

30. Modifying Cell Properties Right-click in the selected row, then click Cell Properties on the shortcut menu Microsoft Expression Web - Illustrated

31. Modifying 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

32. Modifying Cell Properties Microsoft Expression Web - Illustrated In addition to modifying the whole table, you can also modify individual cells, or groups of cells Using the Cell properties dialog box you can: Set horizontal and vertical alignment Specify a cell as a header cell Dictate that the content of a cell not wrap inside a cell

33. Modifying 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

34. Modifying 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

35. Modifying 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

36. Modifying a Table Style Microsoft Expression Web - Illustrated

37. Making 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

38. Making a Table Accessible Microsoft Expression Web - Illustrated

39. Making 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

40. Making 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