//MAKE: 3.07 Hand-in: Make a table

Resources

Saving your work

Use Save as... to save the empty template as "3.07H-MakeATable-LastName.html" in your Computer Programming 12 directory.

The assignment

Use arrays and for...in loops to create a table. You may choose your own level of difficulty. You do not have to use the top 20 sites data - but if you choose your own data, make sure that your table is not too large

For example

The top 20 websites in Canada!




Problem Solving

Remember that a table is composed of the following code:

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

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

Hints

  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
  6. Reread //PROCESS: for loops for more info

Evaluation —