The team at MuseThemes has been hard at work trying to solve a highly requested problem - how can you build a table in Adobe Muse?

By combining our new Table Maker Widget with a simple online table generator, we’ve built an elegant solution that requires no manual coding. The resulting table is attractive, customizable and very powerful. Column headings are even sortable, so when a user clicks on a column the entire table will reorder from A>Z or highest to lowest. Cool!

Click here to view a sample table
http://widgets-musethemes.businesscatalyst.com/tb021.html

Don't feel like reading? Watch a video tutorial instead
https://www.youtube.com/watch?v=hV386u27o-s&list=UUjPvakCluYSkLQE3Qlw7mpw

Getting Started

As a member of MuseThemes.com, you have access to our toolbox file that contains the TableMaker Widget. When you drag the widget out onto the canvas, it appears in two parts:

The Widget Controller - this element appears as small code snippet with an options flyout panel. The panel contains all of the style and customization controls for our table - fills, strokes and row heights are all available within this widget.

The HTML Container - this container is where you will paste the HTML code that the online table generator provides you. You do not need to write any HTML, so don’t worry!

The widget contains two parts - the controller, and the html container.

Step 1 - Build Your Table Visually

Visit the online table generator at this link (www.tablesgenerator.com/html_tables)

We’re going to use this free tool to do the heavy lifting - building the actual HTML required for a table. Using this editor is very easy, and functions similar to Microsoft Excel. Drag or add rows / columns as needed, and starting inputting the data for your table.
If you have a huge table to bring into Muse, you can actually import an excel file right into this online tool using FILE > PASTE TABLE DATA.

In the video overview below we brought a table from Excel into Muse in less than 3 minutes!

Paste data directly from Excel!

Once you’re done building your table, you need to generate its HTML code. Directly below the table, you will see a button that says “Generate”. Click that button to generate your HTML. One important note: uncheck the box that says “Generate CSS”. We don’t need this tool to generate the css styles as our widget will take care of that right in Muse.

Now that you’ve generated the HTML code for your table, it should appear something like this:

  <tr>
    <th>NAME</th>
    <th>AGE</th>
    <th>PHONE</th>
    <th>WEBSITE</th>
  </tr>

 <tr>
    <td>Joe</td>
    <td>45<br></td>
    <td>123456789</td>
    <td>MuseThemes.com</td>
  </tr>

  <tr>
    <td>Ashley<br></td>
    <td>30</td>
    <td>987654321</td>
    <td>MuseThemes.com</td>
  </tr>

Step 2 - Copy / Paste the HTML code into Muse

Jump back to Adobe Muse, and locate the HTML container portion of our widget. It should appear as a large rectangle with some rough data inside. Right click on that box, and select "EDIT HTML…"

An input box will appear, and it contains HTML code. There are clear dividers built into this code that say:

<!-- PASTE HEADER ROWS below, starting with the first <tr> tag. Do not edit above this line -->

<!-- END HEADER ROWS —>


<!-- PASTE BODY ROWS below, starting with the first <tr> tag -->

<!-- END BODY ROWS. Make sure the last tag in your code above is the last </tr>. Do not edit below this line —>


We are going to paste the HTML from our online table generator into these sections. The first block is called the table “header” rows, and these are used if you have sortable column headings. Table headings appear as <th> tags (table heading) and are easily identifiable. 

Copy and paste the header block from the online table generator into our widget, so it looks like this:

<!-- PASTE HEADER ROWS below, starting with the first <tr> tag. Do not edit above this line -->

  <tr>
    <th>NAME</th>
    <th>AGE</th>
    <th>PHONE</th>
    <th>WEBSITE</th>
  </tr>

<!-- END HEADER ROWS —>

Once you’ve pasted the header rows in, repeat this process for the body rows. They look like this:

<!-- PASTE BODY ROWS below, starting with the first <tr> tag -->

 <tr>
    <td>Joe</td>
    <td>45<br></td>
    <td>123456789</td>
    <td>MuseThemes.com</td>
  </tr>

  <tr>
    <td>Ashley<br></td>
    <td>30</td>
    <td>987654321</td>
    <td>MuseThemes.com</td>
  </tr>

<!-- END BODY ROWS. Make sure the last tag in your code above is the last </tr>. Do not edit below this line —>

All done! Once you’ve pasted this data in, our widget will pickup the table structure, apply functionality and let you style it using the options panel.

Step 3 - Style the Table

Now that your data is pasted in, we can use the options flyout panel on the Table Maker Widget to add colors and strokes, as well as adjust the row heights.  Look to the right for a snapshot of the widget options panel.

The controls on the widget flyout panel are clearly labelled, and can be quickly modified to adjust elements of the table. Once you’ve applied style to your table, don’t forget to preview it in the browser to see how it works!

Confused?  Don’t worry!

We love recording training videos that clearly explain how to use our products. The video below explains exactly how to use every element of this table, and we guarantee you will be able to build a table in Muse with zero experience using HTML code.

We hope you enjoy this widget! It caused a few brain melting moments during the development process, however at the end of the day we pulled through... and delivered what we hope you will think is a really slick solution.

Enjoy - Cheers!
Steve Harris