Table challenge: overview

Making a JavaScript that prints to the screen the HTML code for a table.

Starter script from April 22 class

Notes and script progress from April 29 class

Hand-coding a table within HTML is a dull, repetitive task, so we'll create a JavaScript that will gather the variable information and print the proper HTML code onto the screen.

Here's a sample of what we'd want the output to come out like. The things in bold italics are items the user should be able to determine, along with the number of rows and columns the table should have.

<table width="100%" cellpadding="5" cellspacing="0" border="2" bgcolor="#FFFFFF">

<tr>

<td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
<td>Thing 4</td>

</tr>

<tr>

<td>Thing 5</td>
<td>Thing 6</td>
<td>Thing 7</td>
<td>Thing 8</td>

</tr>

<tr>

<td>Thing 9</td>
<td>Thing 10</td>
<td>Thing 11</td>
<td>Thing 12</td>

</tr>

</table>

In order to collect the variables we need in order to create this table, we need to write a prompt for each of these:

How wide should the table be? (enter a number or a %)
How much cellpadding? (enter a number)
How much cellspacing? (enter a number)
What color should the background be?
What size border?

All that data will go into a single line of output, the opening table tag.

We'll also need two more prompts for the user to tell us:

How many rows?
How many columns?

Once that data's collected, the script will write the opening table tag:

<table width="100%" cellpadding="5" cellspacing="0" border="2" bgcolor="#FFFFFF">

We'll need to create a variable that's incremented, so that the content of the first cell says "Thing 1", the content of the second cell says "Thing 2", etc.

We'll need to create a loop to create the number of rows the user requested.

Nested inside that row loop, we'll need another loop to put the right number of columns in each row.

And, once we're finished with both loops, we'll need to print the closing </table> tag.

Follow along with our class notes as we address this challenge in class.