Sorting Table - Part 3

SUMMARY

In this third part of Sorting Table tutorial we will learn to customize the Table appearance in order to give it the visual aspect we want. We will see how to use the Widget Options panel to edit the appearance of the Table Header, Rows, and Footer, how to change the Table text properties, how to modify the Table size, and how to make it responsive.


TABLE OF CONTENTS

Part 1 : Introduction

  1. Getting Sorting Table
  2. Adding the widget in the Library panel

Part 1 > Go to

Part 2 : Fill in the Table with data

  1. How to put the HTML Code in a Muse page
  2. Understanding the Table HTML code
  3. How to add data in the Table cells
  4. How to insert links in the Table cells
  5. How to put pictures in the Table cells

Part 2 > Go to

Part 3 : Customizing the Table appearance

  1. How to use the Widget Options panel
  2. Tweaking the General Options
  3. Editing the appearance of the Table Header, Rows, & Footer
  4. Changing the Table text properties
  5. Modifying the Table size
  6. Making the Table responsive

Part 3 > On this page


Part 3

Customizing the Table appearance


1. How to use the widget Options panel

In order to customize the Table appearance with your own design you have to use the Table Widget Options panel. To do so you have to drag and drop "Sorting Table - Widget" from the Library panel (Window > Library) into your page.

Once the "Sorting Table - Widget" is in your page you have to select it and then click on the blue arrow at the top-right corner of the widget. The Widget Options panel will open up. You can modify the Table appearance by opening the sections below "Table Options", and find help on how to use Sorting Table by opening the sections below "Help Information".


Important note

You need to preview the page in your browser in order to see the result of the modifications done in "Sorting Table - Widget" Options panel. Go to "File > Preview Page in browser" (Cmd+Shift+E/Ctrl+Shift+E) to preview the page in your browser.


2. tweaking the general options

In order to have access to the standard options you need to click on the "General Options" title under "Table Options". A drop-down section containing various options will appear below "General Options". In this section you can modify the text alignment of all the texts inside the Table, and customize the size and the color of the Table borders.

A. The Text alignment

You have to click on the "Text alignment" drop-down menu in order to choose what type of alignment you want for the texts elements inside the Table. You can choose to have your text aligned on the Center, the Left, or the Right. Click on the alignment you want in the drop-down menu to select it for the text of the Table.

B. The borders properties

If you want to add borders to the Table you can do so by putting a number in the "Vertical Border Size" and the "Horizontal Border Size" options. You can also use the arrows next to the number options to modify the size of the borders. The size of the borders is expressed in pixels and can go up to 20px.

In order to modify the color of the borders you can use both the options "Vertical Border Color" and "Horizontal Border Color". By clicking on the colored square next to the options names you open the options Color Panel. In this Color Panel you have access to various ways to change the color. You can use one of your website Swatch Color for the Table borders, enter a RGB or Hexadecimal value, or directly pick a new color from the Color Picker.

Note that the colors you choose for your borders are not visible if the borders size is on "0" in the Border Size options.


3. Editing the Appearance of the Table Header, Rows, & Footer

To modify the appearance of the Table Header, Rows, and Footer you need to click on "Header Options", "Rows Options", and "Footer Options" in the widget Options panel. It will open the sections related to the Header, the Rows, and the Footer modifications. From this sections you are able to modify the Cursor Type, both the vertical and horizontal padding, or the fill and text colors for various states of each parts of the Table.

A. The Cursor types

The Cursor Type drop-down menu allow you to change which mouse cursor is visible when a user rollover the content of the Table. You currently have access to four options in the Cursor Type drop-down menu:

  • The Default pointer will show the regular pointer of your users computers (or browsers).
  • The Help pointer will show the same pointer with a question mark next to it.
  • The pointer named Pointer will indicate to your users that the area is clickable.
  • The Text pointer will show to your users that they can select the text of the area.

You can choose a different pointer for each parts of the Table. The pointer named Pointer is great for the Header as it indicate to your users that they can click on the Header titles to sort the Table.

B. The padding

From the Header, Rows, and Footer sections you can modify both the vertical and the horizontal padding of the different parts of the Table. The maximum value for the padding is 50px and the minimum value is 0px.

To modify the padding of the Table you have to enter a value in the Vertical Padding and/or the Horizontal Padding options. You can also use the up and down arrows next to the Padding options names.

C. The text and background colors

With "Sorting Table - Widget" you can customize the text and background colors of each parts of the Table. Since the 1.1 update you can also customize this colors for the Rollover and the Mouse Down states.

In order to modify the color of a text or a background element you have to click on the colored square next to the option name. Clicking on the colored square opens up a Color Panel. In this Color Panel you have access to various ways to change the color of the text or background element of the Table. You can use one of your website Swatch Color for the Table borders, enter a RGB or Hexadecimal value, or directly pick a new color from the Color Picker.

If you do not want to have Rollover or Mouse Down effects in the Table simply put the same colors as for the Normal state.

D. The specificity of the Rows Options

Note that the Rows Options allow you to change the text and the background colors of the Odd and Even rows of the Table for each states.


Important note

You can put "Sorting Table - Widget" in your Master page if you have multiple Tables in different pages of your website and you want them to have the same visual attributes.


4. CHANGING THE TABLE TEXT PROPERTIES

There are two different ways to change the Table texts sizes, fonts, margins, leading, indent, and styles. The way to change the text you are going to use will depend on the degree of customization you want to achieve.

A. The Text panel method

The easiest way to modify the Table text properties is to select "Sorting Table - HTML Code" on your page, to open the Text panel (Cmd+T/Ctrl+T), and to change the values available. This method will change the text properties of all the texts elements available in the Table, whether they are in the Header, the Rows, or the Footer.

B. The Styles method

The Styles method allow you to have different text properties for the Header, the Rows, and the Footer text elements. In order to do so you need to create a text block and write three lines of text.

Each line of text correspond to a part of the Table. The first line of text will be for the Header text elements, the second line will be for the Footer text elements, and the third line will be for the Rows text elements.

Edit this three lines of text with the Text panel (Cmd+T/Ctrl+T) to obtain the text properties you want for the Header, the Rows, and the Footer text elements of the Table. The first line of text will be for the Header text elements, the second line will be for the Footer text elements, and the third line will be for the Rows text elements.

Once you have customize the lines of text the way you want in the text block, select one of them and open the Paragraph Styles panel (Cmd+F11/Ctrl+F11). Then click on the New page icon at the bottom right of the Paragraph Styles panel (see picture below).

Right-click on the new Paragraph style name in the Paragraph Styles panel, and click on "Styles Options..." in the drop-down menu. Enter a new Style Name for each line of the text block matching one of the part of the Table.

  • The Header Style Name have to be named "thead"
  • The Rows Style Name have to be named "trow"
  • The Footer Style Name have to be named "tfoot"

Click on the button "OK" in the Paragraph Style Options when you are done to validate the new Style Name.

Once you have finish you should have three new Paragraph styles in the Paragraph Styles panel named "thead", "trow", and "tfoot". Now you can delete the text block used to create this Paragraph styles if you do not want to edit them later on.

Preview the page in your browser to see the effect of this three Paragraph styles on the Table.


5. Modifying the Table size

The height and width of the table can not be changed with the same method in Adobe Muse. To edit the Table height you need to use "Sorting Table - Widget" Options panel, while you need to select "Sorting Table - HTML Code" to change the Table width.

A. The Table height

In order to modify the Table height you have to modify the Vertical Padding of the Header, the Rows, and/or the Footer from the Widget Options panel. You can see how the Vertical Padding of the Header can increase the Table height with different values on the picture below.

  The Table Header with a Vertical Padding of 0px, 25px, and 50px

The Table Header with a Vertical Padding of 0px, 25px, and 50px

B. The Table width

To modify the Table width you need to select "Sorting Table - HTML Code" on your Muse page, then you have to expand its width. To do so you can use your mouse like you would do for any other Muse element or use the Transform panel (Shift+F8).


6. Making the Table responsive

In order to make the Table responsive you have to select "Sorting Table - HTML Code" in your page. While the HTML Code is selected you need to click on the icon next to the word "Resize" in Muse top bar. Then you have to select "Responsive Width" in the drop-down menu to make the Table responsive to the page width.

You can also select "Stretch to Browser Width" if you want the Table to have the same width as the page.


CURIOUS ABOUT SOMETHING ELSE

If you want to know something else about using Sorting Table you can ask us in the Comments section below or by contacting us through the form of the Contact page.