Sorting Table - Part 2

SUMMARY

In the second part of the tutorial for Sorting Table we will see how to edit the Table HTML Code in Adobe Muse CC. From putting the HTML Code in a Muse page to adding different types of data in the Table, this second part of the tutorial will cover everything there is to know about Sorting Table HTML Code.


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 > On this page

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 > Go to


Part 2

Fill in the Table with data


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

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.

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.


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

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

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"

4. How to insert links in the Table cells

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.

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>

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

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.


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.