//MAKE: 3.09 Hand-in: Make a table using an array of objects


Saving your work

Use Save as... to save the empty template as "3.09H-MakeATableWithArraysOfObjects-LastName.html" in your Computer Programming directory.

As well, you might want to use some of Drapak's Finger-Savers® in order to help save you some time in typing up repetitive code.

The assignment

Use arrays and for...in loops to create a table. You may choose your own level of difficulty. Solve more problems to get a higher mark

Problem Solving

Remember that a table is composed of the following code:

			<th>Heading 1</th>
			<th>Heading 2</th>
			<th>Heading 3</th>
	<tbody id="outputID">
			<td>item 1a</td>
			<td>item 2a</td>
			<td>item 3a</td>
			<td>item 1b</td>
			<td>item 2b</td>
			<td>item 3b</td>

...makes this:

Heading 1 Heading 2 Heading 3
item 1a item 2a item 3a
item 1b item 2b item 3b

Make it your own!

If you create your own table of information it does not have to be as large. Create your own, smaller, arrays of information you can display!


  1. Create a <div> with id="outputId" in the body of your code
  2. Create a button that will trigger mainProcedure()
  3. Create an output function that will insert a result into outputId
  4. Create a process function to create a table
    1. Add the <table> and <thead> and <tbody>first
    2. Use for...in loops to create the rows:
    3. Add the <tr>, <th>s and the information
    4. Add the </tbody> and </table>
  5. Create a mainProcedure function that will pass multiple arrays to your process function, and then pass the results to your output function