Skip to main content

Example 3: Generating a Multiplication Table

This tutorial provides two ways to create an output table by either using a utility function or the Pandas library.

Here is a demo using the utility function:

Step 1: Info

  • You can fill in the required fields as shown in the following image.
  • You can use the default Favicon Image.
  • The Primary Image used is available here.

img alt

Step 2: Inputs

For this example, create one input group titled "Multiplication Table" with two numerical inputs: "Multiplier" and "Table Range". The variable names assigned to these inputs are multiplier and range. The following image shows the inputs step after creating these inputs:

img alt

The following two images show the settings used for each of the inputs:

img alt

img alt

Step 3: Code

We are going to present two different versions of the code that can be used to generate tables.

In the first version, the utility function build_html_table, which has the following inputs and outputs:

  • columns: an array of table column values.
  • ColumnHeaders: an array of strings containing the column headers.
  • Returns: a string representing the HTML version of the table.
def build_html_table(columns, ColumnHeaders):
# <table> is the table
# <tr> is table row
# <th> is table header
# <td> is table data cell
# (1) Table opening table
html_table = "<table border='3' cellpadding='5' style='border-collapse:collapse;'><tr>"
# (2) Add header row
rows=len(columns[0])
for h in ColumnHeaders:
html_table += "<th>"+h+"</th>"
html_table += "</tr>"
# (3) Add all data rows
for i in range(rows):
html_table += "<tr>"
for column in columns:
html_table += "<td>"+str(column[i])+"</td>"
html_table += "</tr>"
# (4) Add the table closing tag
html_table += "</table>"
return html_table

def main(inputs):
m = inputs['multiplier']
r = inputs['range']
col1 = [m for i in range(r)]
col2 = [i+1 for i in range(r)]
col3 = [col1[i]*col2[i] for i in range(r)]
columns = [col1,col2,col3]
ColumnHeaders = ["First Number", "Second Number","Product"]
table = build_html_table(columns,ColumnHeaders)
return {"Multiplier": m, "Table":table }

In the second version, we are going to use the Pandas library to first create a Pandas dataframe, and then convert the dataframe into an HTML table, using .to_html():

import pandas as pd

def main(inputs):
m = inputs['multiplier']
r = inputs['range']
rows = [[m,i+1,m*(i+1)] for i in range(r)]
ColumnHeaders = ["First Number", "Second Number","Product"]
a = pd.DataFrame(data=rows, columns=ColumnHeaders)
table = a.to_html(index=False)
return {"Multiplier": m, "Table":table }

Both versions return an HTML table that can be embedded directly into the output page as shown in the next step.

Step 4: Output

The output page used for this example is shown in the following image:

img alt

Step 5: Docs

You can skip adding documentation for this tutorial.

Step 6: Preview

In the preview section, confirm that the app works as expected:

img alt

Once ready, click on PUBLISH to publish the app on the web. The two versions of the app are available here:

https://www.mecsimcalc.com/app/5389912/multiplication_table

https://www.mecsimcalc.com/app/6325826/multiplication_table