Introduction

In this tutorial we will learn how to use the widget Sorting Table for Adobe Muse CC. We will see how to add the widget in the Library panel, how to edit and fill the HTML code of the Table with different types of data, and how to customize the appearance of the Table with the Widget Options panel.

SortingTable-PicturePreview-Widget-UrMuse-03.jpg

Adding the widget in the Library panel

After having downloaded Sorting Table and unzipped the widget's folder on your computer, you need to open Adobe Muse from the Creative Cloud application. Once Muse is open you have to create a new site (Cmd+N/Ctrl+N), or open an already created site (Cmd+O/Ctrl+O), and open a page of this site in order to access the Library panel.

ScreenCapture-SortingTable-Tutorials-UrMuse-1-01.jpg

When your site is open you have to click on Library in the right panel (Go to "Window > Library" if you don't find it in the right panel), and click on the button "Import Muse Library" at the bottom-left of the Library panel.

ScreenCapture-SortingTable-Tutorials-UrMuse-1-02.jpg

A window opens in order for you to choose the .mulib file you want to add in the Library panel. Go to the folder where you have unzipped the widget before, select UrMuse-SortingTable.mulib and then click on Open.

ScreenCapture-SortingTable-Tutorials-UrMuse-1-03.jpg

The widget is now added to the Library panel in Adobe Muse CC. You can find it in the Library panel under the name "UrMuse-SortingTable". You can click on the grey arrow next to its name to open the widget content.


How to put the HTML Code in a Muse page

In order to fill in the Table with your own data you first need to add the Table HTML Code to your page. To do so you have to select "Sorting Table - HTML Code" and move it from the Library panel (Window > Library) into your page.

ScreenCapture-SortingTable-Tutorials-UrMuse-2-01.jpg

Once the "Sorting Table - HTML Code" widget is in your page, you have to select it and right-click on it. Then click on "Edit HTML ..." in the menu that has just opened.

ScreenCapture-SortingTable-Tutorials-UrMuse-2-02.jpg

A window containing the HTML code of the Table appears above your page. In the next parts of the tutorial we will learn how to edit the HTML code to add data inside the table.

ScreenCapture-SortingTable-Tutorials-UrMuse-2-03.jpg

Understanding the Table HTML code

Once the window is open we can see that Table is composed of this HTML code:

<center>
<table class="sortable">
<thead>
    <tr>
        <th class="thead">(HeaderA)</th>
        <th class="thead">(HeaderB)</th>
        <th class="thead">(HeaderC)</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <td class="tfoot">(FooterA)</td>
        <td class="tfoot">(FooterB)</td>
        <td class="tfoot">(FooterC)</td>
    </tr>
</tfoot>
<tbody>
    <tr>
        <td class="trow">(A-Line1)</td>
        <td class="trow">(B-Line1)</td>
        <td class="trow">(C-Line1)</td>
    </tr>
    <tr>
        <td class="trow">(A-Line2)</td>
        <td class="trow">(B-Line2)</td>
        <td class="trow">(C-Line2)</td>
    </tr>
    <tr>
        <td class="trow">(A-Line3)</td>
        <td class="trow">(B-Line3)</td>
        <td class="trow">(C-Line3)</td>
    </tr>
    <tr>
        <td class="trow">(A-Line4)</td>
        <td class="trow">(B-Line4)</td>
        <td class="trow">(C-Line4)</td>
    </tr>
</tbody>
</table>
</center>

This should be rendered like this in your Muse page:

(HeaderA) (HeaderB) (HeaderC)
(FooterA) (FooterB) (FooterC)
(A-Line1) (B-Line1) (C-Line1)
(A-Line2) (B-Line2) (C-Line2)
(A-Line3) (B-Line3) (C-Line3)
(A-Line4) (B-Line4) (C-Line4)

A. Which part of the HTML Code is the header of the Table

The Table header corresponds to the part between <thead> and </thead>:

<thead>
    <tr>
        <th class="thead">(HeaderA)</th>
        <th class="thead">(HeaderB)</th>
        <th class="thead">(HeaderC)</th>
    </tr>
</thead>

B. Which part of the HTML Code is the body of the Table

The Table body corresponds to the part between <tbody> and </tbody>:

<tbody>
    <tr>
        <td class="trow">(A-Line1)</td>
        <td class="trow">(B-Line1)</td>
        <td class="trow">(C-Line1)</td>
    </tr>
    <tr>
        <td class="trow">(A-Line2)</td>
        <td class="trow">(B-Line2)</td>
        <td class="trow">(C-Line2)</td>
    </tr>
    <tr>
        <td class="trow">(A-Line3)</td>
        <td class="trow">(B-Line3)</td>
        <td class="trow">(C-Line3)</td>
    </tr>
    <tr>
        <td class="trow">(A-Line4)</td>
        <td class="trow">(B-Line4)</td>
        <td class="trow">(C-Line4)</td>
    </tr>
</tbody>

C. Which part of the HTML Code is the footer of the Table

The Table footer corresponds to the part between <tfoot> and </tfoot>:

<tfoot>
    <tr>
        <td class="tfoot">(FooterA)</td>
        <td class="tfoot">(FooterB)</td>
        <td class="tfoot">(FooterC)</td>
    </tr>
</tfoot>

D. In which part of the HTML Code are located the Table cells

Each cell of the Table corresponds to the elements between <td> and </td>:

<td class="trow">(A-Line1)</td>

Except for the Table header which corresponds to the elements between <th> and </th>:

<th class="thead">(HeaderA)</th>

E. In which part of the HTML Code are located the Table lines

Each line of the Table corresponds to the elements between <tr> and </tr>:

    <tr>
        <td class="trow">(A-Line1)</td>
        <td class="trow">(B-Line1)</td>
        <td class="trow">(C-Line1)</td>
    </tr>

F. In which part of the HTML Code are located the Table columns

Each column of the Table corresponds to a line of <td></td> or <th></th> positioned at the same place between each <tr> and </tr> of the Table:

<thead>
    <tr>
        <th class="thead">(HeaderA)</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="trow">(A-Line1)</td>
    </tr>
    <tr>
        <td class="trow">(A-Line2)</td>
    </tr>
    <tr>
        <td class="trow">(A-Line3)</td>
    </tr>
    <tr>
        <td class="trow">(A-Line4)</td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td class="tfoot">(FooterA)</td>
    </tr>
</tfoot>

We have assigned a letter to the three columns available by default in the Table. In the example above you can see that the first column of the Table has the letter "A". The header of the first column corresponds to "HeaderA", the body lines of the first column correspond to "A-Line" followed by the line number, and the footer of the first column corresponds to "FooterA".

G. Which part of the HTML Code can be modified  

The content you can modify in the Table is located between ( ):

(A-Line1)

How to add data in the Table cells

To add your own data in the Table you must open the HTML code as we have done previously by right-clicking on "Sorting Table - HTML Code" widget in the page and by clicking on "Edit HTML ..." in the menu that has just opened. 

Once the window "Edit HTML" is open you need to locate the elements between ( ) in the HTML code which corresponds to the spaces where you can add your own data.

A. How to add data in the header cells

To modify the Table header cells you need to locate the elements between <thead> and </thead> in the HTML code, and replace the elements between ( ) located in the middle of each <th> and </th>.

<thead>
    <tr>
        <th class="thead">(HeaderA)</th>
        <th class="thead">(HeaderB)</th>
        <th class="thead">(HeaderC)</th>
    </tr>
</thead>

For example if you want to modify the text of the cell inside the first column of the header you need to replace the text between ( ) in the first line of <th> and </th>.

        <th class="thead">(HeaderA)</th>

Don't forget to delete the ( ) after having replaced the text it contains.

        <th class="thead">Header of the first column</th>

B. How to add data in the footer cells

To modify the Table footer cells you need to locate the elements between <tfoot> and </tfoot> in the HTML code, and replace the elements between ( ) located in the middle of each <td> and </td>.

<tfoot>
    <tr>
        <td class="tfoot">(FooterA)</td>
        <td class="tfoot">(FooterB)</td>
        <td class="tfoot">(FooterC)</td>
    </tr>
</tfoot>

For example if you want to modify the text of the cell inside the second column of the footer you need to replace the text between ( ) in the second line of <td> and </td>.

        <td class="tfoot">(FooterB)</td>

It should look like this once it has been modified.

        <td class="tfoot">Footer of the second column</td>

C. How to add data in the body cells

To modify the Table body cells you need to locate the elements between <tbody> and </tbody> in the HTML code, and replace the elements between ( ) located in the middle of each <td> and </td>.

<tbody>
    <tr>
        <td class="trow">(A-Line1)</td>
        <td class="trow">(B-Line1)</td>
        <td class="trow">(C-Line1)</td>
    </tr>
    <tr>
        <td class="trow">(A-Line2)</td>
        <td class="trow">(B-Line2)</td>
        <td class="trow">(C-Line2)</td>
    </tr>
    <tr>
        <td class="trow">(A-Line3)</td>
        <td class="trow">(B-Line3)</td>
        <td class="trow">(C-Line3)</td>
    </tr>
    <tr>
        <td class="trow">(A-Line4)</td>
        <td class="trow">(B-Line4)</td>
        <td class="trow">(C-Line4)</td>
    </tr>
</tbody>

For example if you want to modify the text of the cell in the first line and inside the third column of the body you need to replace the text between ( ) in the third line of <td> and </td> inside the first <tr> and </tr>.

        <td class="trow">(C-Line1)</td>

It should look like this once it has been modified.

        <td class="trow">First cell of the third column</td>

D. How to apply your changes

Once you have finished to modify and replace the data in the Table you can click on "OK" in the "Edit HTML" window to validate your modifications.

ScreenCapture-SortingTable-Tutorials-UrMuse-2-04.jpg

The Table should look like this in the Muse page when we have modified all the cells it contains.

Header of the first column Header of the second column Header of the third column
First cell of the first column First cell of the second column First cell of the third column
Second cell of the first column Second cell of the second column Second cell of the third column
Third cell of the first column Third cell of the second column Third cell of the third column
Fourth cell of the first column Fourth cell of the second column Fourth cell of the third column
Footer of the first column Footer of the second column Footer of the third column

Important note

When you modify your Table data be careful not to erase or modify the class elements as they are used to connect the "Sorting Table - HTML Code" and the "Sorting Table - Widget".

class="class name"

A. How to insert links to another domain in the Table cells

If you want to add a link to another domain inside a cell of the Table you have to open "Sorting Table - HTML Code" and put the code below between ( ) inside one of the <td> and </td>.

<a href="http://www.yourlink.com">Link Name</a>

It should look like this in your Table HTML Code.

    <tr>
        <td class="trow"><a href="http://www.yourlink.com">Link Name</a></td>
        <td class="trow">(B-Line1)</td>
        <td class="trow">(C-Line1)</td>
    </tr>

Replace "http://www.yourlink.com" by the URL address you want 

For example if we want to add a link to UrMuse it should look like this:

<a href="http://www.urmuse.com">Link Name</a>

Replace "Link Name" by the name of the link you want to display to your visitors.

If we want to display "UrMuse" as a link name it should look like this in the Table:

<a href="http://www.urmuse.com">UrMuse</a>

If you want the link to be opened in a new page instead of opening in the same page, you can add the following code after the link URL address.

target="_blank"

It should look like this in your Table HTML Code.

<td class="trow"><a href="http://www.yourlink.com" target="_blank">Link Name</a></td>

B. How to insert links to your website domain in the Table cells

If you want to add a link directing to another page of your Muse website inside a cell of the Table you have to open "Sorting Table - HTML Code" and put the code below between ( ) inside one of the <td> and </td>.

<a href="/page-name.html">Page Name</a>

It should look like this in your Table HTML Code.

    <tr>
        <td class="trow"><a href="/page-name.html">Page Name</a></td>
        <td class="trow">(B-Line1)</td>
        <td class="trow">(C-Line1)</td>
    </tr>

The part "/page-name.html" corresponds to your page Filename. To find your page Filename you have to go in Plan view in Muse, then make a right-click on your page and select "Page Properties..." (Page > Page Properties...) in the drop-down menu. Once the window "Page Properties" is open you have to click on the "Options" tab. Your page Filename will be visible in the frame "Filename:".

You can replace "page-name" by your page Filename.

ScreenCapture-SortingTable-Update1-Tutorials-UrMuse-2-05.jpg

Be careful to leave "/" before your page Filename and ".html" after your page Filename.

Then replace Page Name by the name of your page visible in the frame "Page Name:" in the tab "Options" inside the window "Page Properties". You now have a link that directs your visitors to another page of your domain inside a cell of your Table.

If you want the link to be opened in a new page instead of opening in the same page, you can add the following code after "/page-name.html".

target="_blank"

It should look like this in your Table HTML Code.

<a href="/page-name.html" target="_blank">Page Name</a>

How to put pictures in the Table cells

A. How to pictures pictures from another domain in the Table cells

In order to add a picture from another domain in one of the Table cells you have to copy and paste the following code between the ( ) inside one of the <td> and </td> of "Sorting Table - HTML Code".

<img src="Picture URL" alt="Alternative text" width="Picture width" height="Picture height">

It should look like this once you put it in "Sorting Table - HTML Code".

    <tr>
        <td class="trow"><img src="Picture URL" alt="Alternative text" width="Picture width" height="Picture height"></td>
        <td class="trow">(B-Line1)</td>
        <td class="trow">(C-Line1)</td>
    </tr>

In this code you have to replace "Picture URL" by the URL of the picture you want to add in one of the Table. You also need to replace "Alternative text" by an alternative text for the picture.

The "alt" attribute is used to provide an alternate text for the picture. The "Alternative text" will be displayed by the browser if it cannot find the picture from its URL, if the user uses a screen reader, or if the user has a slow connection.

For example, the code will look like this if we want to add UrMuse logo in one of the Table cells.

    <tr>
        <td class="trow"><img src="http://preview.urmuse.com/widgets/urform/images/urmuse-logo-52x52.png" alt="UrMuse Logo" width="Picture width" height="Picture height"></td>
        <td class="trow">(B-Line1)</td>
        <td class="trow">(C-Line1)</td>
    </tr>

The "width" and "height" attributes are used to define the width and height the picture will have in the Table cell. You can express the width and height of the picture in pixels (px).

In the example of UrMuse logo we have specified a width and a height of 52 pixels for the picture. You can see the result in the code below.

    <tr>
        <td class="trow"><img src="http://preview.urmuse.com/widgets/urform/images/urmuse-logo-52x52.png" alt="UrMuse Logo" width="52px" height="52px"></td>
        <td class="trow">(B-Line1)</td>
        <td class="trow">(C-Line1)</td>
    </tr>

The Table should look like this once you are done.

(HeaderA) (HeaderB) (HeaderC)
(FooterA) (FooterB) (FooterC)
UrMuse Logo (B-Line1) (C-Line1)
(A-Line2) (B-Line2) (C-Line2)
(A-Line3) (B-Line3) (C-Line3)
(A-Line4) (B-Line4) (C-Line4)

B. How to put pictures from your website assets in the Table cells

If you want to add one picture from your Muse websites in one of the Table cells you need to add this picture in the Assets folder of your website and then place a piece of HTML code between the ( ) inside one of the <td> and </td> of the Table HTML Code.

To add a picture in the Assets folder you need to go to "File > Add Files for Upload..." in Adobe Muse. From the window that opens you need to go to the folder on your computer where the picture is located, select the picture, and click on the "Open" button. The picture is now added to your Muse website Assets folder.

ScreenCapture-SortingTable-Update1-Tutorials-UrMuse-2-07.jpg

Then you have to copy and paste the following code between the ( ) inside one of the <td> and </td> of "Sorting Table - HTML Code".

<img src="/assets/Picture URL" alt="Alternative text" width="Picture width" height="Picture height">

It should look like this once you put it in "Sorting Table - HTML Code".

    <tr>
        <td class="trow"><img src="/assets/Picture URL" alt="Alternative text" width="Picture width" height="Picture height"></td>
        <td class="trow">(B-Line1)</td>
        <td class="trow">(C-Line1)</td>
    </tr>

In this code you have to replace "Picture URL" by the name of the picture you have added in the Assets folder. Don't forget to put the extension of the picture you have uploaded to the Assets folder. 

You also need to replace "Alternative text" by an alternative text for the picture. The "alt" attribute is used to provide an alternate text for the picture. The "Alternative text" will be displayed by the browser if it cannot find the picture from its URL, if the user uses a screen reader, or if the user has a slow connection.

For example, the code will look like this if we want to add a picture named "icon.png" in one of the Table cells.

    <tr>
        <td class="trow"><img src="/assets/icon.png" alt="Icon" width="Picture width" height="Picture height"></td>
        <td class="trow">(B-Line1)</td>
        <td class="trow">(C-Line1)</td>
    </tr>

The "width" and "height" attributes are used to define the width and height the picture will have in the Table cell. You can express the width and height of the picture in pixels (px).

In the example of the picture named "icon.png" we have specified a width and a height of 64 pixels for the picture. You can see the result in the code below.

    <tr>
        <td class="trow"><img src="/assets/icon.png" alt="Icon" width="64px" height="64px"></td>
        <td class="trow">(B-Line1)</td>
        <td class="trow">(C-Line1)</td>
    </tr>

When you are done you should see that an error appear in the Table at the position where your picture should be. It is because you have to publish your website in order for Muse to create the Assets folder directing to your picture. Once you have published your website online you should see the picture in the Table.


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.

ScreenCapture-SortingTable-Update1-Tutorials-UrMuse-3-01.jpg

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".

ScreenCapture-SortingTable-Update1-Tutorials-UrMuse-3-02.jpg

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.


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.

ScreenCapture-SortingTable-Update1-Tutorials-UrMuse-3-03.jpg

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

ScreenCapture-SortingTable-Update1-Tutorials-UrMuse-3-04.jpg

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.

ScreenCapture-SortingTable-Update1-Tutorials-UrMuse-3-05.jpg

Editing the appearance of the Table

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.

ScreenCapture-SortingTable-Update1-Tutorials-UrMuse-3-06.jpg

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.

ScreenCapture-SortingTable-Update1-Tutorials-UrMuse-3-07.jpg

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.

ScreenCapture-SortingTable-Update1-Tutorials-UrMuse-3-10.jpg

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.

ScreenCapture-SortingTable-Update1-Tutorials-UrMuse-3-11.jpg

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.


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.

ScreenCapture-SortingTable-Update1-Tutorials-UrMuse-3-12.jpg

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.

ScreenCapture-SortingTable-Update1-Tutorials-UrMuse-3-13.jpg

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).

ScreenCapture-SortingTable-Update1-Tutorials-UrMuse-3-14.jpg

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.

ScreenCapture-SortingTable-Update1-Tutorials-UrMuse-3-15.jpg

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.


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.

ScreenCapture-SortingTable-Update1-Tutorials-UrMuse-3-09.jpg

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).


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.

ScreenCapture-SortingTable-Update1-Tutorials-UrMuse-3-17.jpg

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