Format Table Styles

After completing this topic, you will be able to format table styles in the style sheet.

Steps:

1. Create a new table style with the name Table 1.

    

   Click the Add Style menu.

   Step 1

2. Click the Table list item.

   Step 2

3. Enter the desired information into the Style name field. Enter

    a valid value
    e.g.
    "Table 1"
   .
   Step 3

4. Press [Enter].

   Step 4

5. You use the Apply to list to select the table element you want to format.

    

   The Table Position and Whole Table options affect the attributes for the entire table.

    

   First, we will set the Table Position attributes for the table elements.

   Step 5

6. Center the table horizontally on the page.

    

   Click the Align Center button.

   Step 6

7. Set the width and height of the table.

    

   Click the Width and Height button.

   Step 7

8. Set a width of 800 pixels and a height of 200 pixels.

    

   Enter the desired information into the Width field. Enter

    a valid value
    e.g.
    "800"
   .
   Step 8

9. Click in the Height field.

   Step 9

10. Enter the desired information into the Height field. Enter

     a valid value
     e.g.
     "200"
    .
    Step 10

11. Click the OK button.

    Step 11

12. Add 12 points of spacing above and below the table.

     

    Click the Spacing button.

    Step 12

13. Enter the desired information into the Before field. Enter

     a valid value
     e.g.
     "12"
    .
    Step 13

14. Click in the After field.

    Step 14

15. Enter the desired information into the After field. Enter

     a valid value
     e.g.
     "12"
    .
    Step 15

16. Click the OK button.

    Step 16

17. After selecting Table Position attributes, you can set the Whole Table attributes.

     

    Click the Apply to button.

    Step 17

18. Click the Whole Table list item.

    Step 18

19. Apply an Align Top style to the whole table.

     

    Click the Align Top button.

    Step 19

20. Notice that the attribute affects all cells in the entire table.

    Step 20

21. Apply an Align Middle style to the whole table.

     

    Click the Align Middle button.

    Step 21

22. Set a 2 pixel gray border around the table.

     

    Click the Border button.

    Step 22

23. Click in the Width field.

    Step 23

24. Enter the desired information into the Width field. Enter

     a valid value
     e.g.
     "2"
    .
    Step 24

25. Click the Color button.

    Step 25

26. Click the Gray Web Color.

    Step 26

27. Click the Ok button.

    Step 27

28. Click the OK button.

    Step 28

29. Notice the 2 point gray border around the table. The interior cell borders are still black.

    Step 29

30. Set the Table Caption attributes.

     

    Click the Apply to button.

    Step 30

31. Click the Table Caption list item.

    Step 31

32. Align the caption on the bottom of the table.

     

    Click the Caption Bottom button.

    Step 32

33. Left align and bold the caption text.

     

    Click the Align Left button.

    Step 33

34. Click the Bold button.

    Step 34

35. Set the table header attributes.

     

    Click the Apply to button.

    Step 35

36. If you select the Header element, the same formatting is applied to header row and column cells.

     

    To produce different formats for header rows and columns, format the Header Row and Header Column elements separately.

    Step 36

37. Apply the same formatting to all headers.

     

    Click the Header list item.

    Step 37

38. Set a 2 pixel gray border around the header cells.

     

    Click the Border button.

    Step 38

39. Enter the desired information into the Width field. Enter

     a valid value
     e.g.
     "2"
    .
    Step 39

40. Click the Color button.

    Step 40

41. Click the Gray Web Color.

    Step 41

42. Click the Ok button.

    Step 42

43. Click the OK button.

    Step 43

44. Notice that the border lines around the column and row header cells are formatted as 2 point gray lines. However, the interior cell lines are still black.

    Step 44

45. Choose a light yellow background color for the header cells.

     

    Click the Background Color button.

    Step 45

46. Click the Light Yellow color.

    Step 46

47. Click the Ok button.

    Step 47

48. Set the attributes for the interior cells.

     

    Click the Apply to button.

    Step 48

49. Click the Cell list item.

    Step 49

50. Set a 2 pixel gray border around the interior cells.

     

    Click the Border button.

    Step 50

51. Enter the desired information into the Width field. Enter

     a valid value
     e.g.
     "2"
    .
    Step 51

52. Click the Color button.

    Step 52

53. Click the Gray Web Color.

    Step 53

54. Click the Ok button.

    Step 54

55. Click the OK button.

    Step 55

56. You are designing a style primarily for tables with numeric values. Right-align the text.

     

    Click the Align Right button.

    Step 56

57. The cell text is too close to the right cell borders. Add 6 points of padding on the right side.

     

    Click the Padding button.

    Step 57

58. Click in the Right field.

    Step 58

59. Enter the desired information into the Right field. Enter

     a valid value
     e.g.
     "6"
    .
    Step 59

60. Click the OK button.

    Step 60

61. Align the header column text to the right and add padding to match the column cells below the headers.

     

    Click the Apply to button.

    Step 61

62. Click the Header Column list item.

    Step 62

63. Click the Align Right button.

    Step 63

64. Add 6 points of padding on the right.

     

    Click the Padding button.

    Step 64

65. Click in the Right field.

    Step 65

66. Enter the desired information into the Right field. Enter

     a valid value
     e.g.
     "6"
    .
    Step 66

67. Click the OK button.

    Step 67

68. Remove the default for the style.

     

    Click in the Table [default] field in the style header.

    Step 68

69. You can create several table styles for different types of table content.

     

    The Text Table style was created for tables with text information.

    Step 69

70. Save the style sheet.

     

    Click the Save button.

    Step 70

71. We have opened the Page Setup web page and clicked in the table at the bottom of the page.

     

    Since no there are no default table styles in the MyStyles style sheet, the table is formatted with browser defaults only.

    Step 71

72. Apply a style to the table.

     

    Click the Styles button.

    Step 72

73. Apply the Table 1 style.

     

    Click the Table 1 - Table list item.

    Step 73

74. The Web Page Editor applies the Table 1 style to the table. All of the columns are right aligned.

    Step 74

75. Try the other table style.

     

    Click the Styles button.

    Step 75

76. Apply the Text Table style.

     

    Click the Text Table - Table list item.

    Step 76

77. The Web Page Editor applies the Text Table style to the table. The cell text is left aligned.

    Step 77

After completing this topic, you are able to format table styles in the style sheet.

Table of Contents  Start Topic