After completing this topic, you will be able to format table styles in the style sheet.
Steps:
Create a new table style with the name Table 1.
Click the Add Style menu.
Step 1Click the Table list item.
Step 2Enter the desired information into the Style name field. Enter
Press [Enter].
Step 4You 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 5Center the table horizontally on the page.
Click the Align Center button.
Step 6Set the width and height of the table.
Click the Width and Height button.
Step 7Set a width of 800 pixels and a height of 200 pixels.
Enter the desired information into the Width field. Enter
Click in the Height field.
Step 9Enter the desired information into the Height field. Enter
Click the OK button.
Step 11Add 12 points of spacing above and below the table.
Click the Spacing button.
Step 12Enter the desired information into the Before field. Enter
Click in the After field.
Step 14Enter the desired information into the After field. Enter
Click the OK button.
Step 16After selecting Table Position attributes, you can set the Whole Table attributes.
Click the Apply to button.
Step 17Click the Whole Table list item.
Step 18Apply an Align Top style to the whole table.
Click the Align Top button.
Step 19Notice that the attribute affects all cells in the entire table.
Step 20Apply an Align Middle style to the whole table.
Click the Align Middle button.
Step 21Set a 2 pixel gray border around the table.
Click the Border button.
Step 22Click in the Width field.
Step 23Enter the desired information into the Width field. Enter
Click the Color button.
Step 25Click the Gray Web Color.
Step 26Click the Ok button.
Step 27Click the OK button.
Step 28Notice the 2 point gray border around the table. The interior cell borders are still black.
Step 29Set the Table Caption attributes.
Click the Apply to button.
Step 30Click the Table Caption list item.
Step 31Align the caption on the bottom of the table.
Click the Caption Bottom button.
Step 32Left align and bold the caption text.
Click the Align Left button.
Step 33Click the Bold button.
Step 34Set the table header attributes.
Click the Apply to button.
Step 35If 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 36Apply the same formatting to all headers.
Click the Header list item.
Step 37Set a 2 pixel gray border around the header cells.
Click the Border button.
Step 38Enter the desired information into the Width field. Enter
Click the Color button.
Step 40Click the Gray Web Color.
Step 41Click the Ok button.
Step 42Click the OK button.
Step 43Notice 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 44Choose a light yellow background color for the header cells.
Click the Background Color button.
Step 45Click the Light Yellow color.
Step 46Click the Ok button.
Step 47Set the attributes for the interior cells.
Click the Apply to button.
Step 48Click the Cell list item.
Step 49Set a 2 pixel gray border around the interior cells.
Click the Border button.
Step 50Enter the desired information into the Width field. Enter
Click the Color button.
Step 52Click the Gray Web Color.
Step 53Click the Ok button.
Step 54Click the OK button.
Step 55You are designing a style primarily for tables with numeric values. Right-align the text.
Click the Align Right button.
Step 56The cell text is too close to the right cell borders. Add 6 points of padding on the right side.
Click the Padding button.
Step 57Click in the Right field.
Step 58Enter the desired information into the Right field. Enter
Click the OK button.
Step 60Align the header column text to the right and add padding to match the column cells below the headers.
Click the Apply to button.
Step 61Click the Header Column list item.
Step 62Click the Align Right button.
Step 63Add 6 points of padding on the right.
Click the Padding button.
Step 64Click in the Right field.
Step 65Enter the desired information into the Right field. Enter
Click the OK button.
Step 67Remove the default for the style.
Click in the Table [default] field in the style header.
Step 68You can create several table styles for different types of table content.
The Text Table style was created for tables with text information.
Step 69Save the style sheet.
Click the Save button.
Step 70We 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 71Apply a style to the table.
Click the Styles button.
Step 72Apply the Table 1 style.
Click the Table 1 - Table list item.
Step 73The Web Page Editor applies the Table 1 style to the table. All of the columns are right aligned.
Step 74Try the other table style.
Click the Styles button.
Step 75Apply the Text Table style.
Click the Text Table - Table list item.
Step 76The Web Page Editor applies the Text Table style to the table. The cell text is left aligned.
Step 77After completing this topic, you are able to format table styles in the style sheet.