Q:

Printing two dimensional array in table format

I have created array of movies object and other array of genres for the movies.  Now I want to use loop to print data into table.  Array of genres should be table heading and array of movies should be table data.  I am trying to print two dimensional array into table in my javascript program but I am getting different output.  I used table tag and accordingly all tags which requires to print data in table. But not getting output as requires. Could anyone please help me?  Here is my code:
<! DOCTYPE html>
<html>

<head>
    <title> Lab 7 </title>
    <meta charset="utf-8">
    <h1 style="font-family: monospace;  text-align: center; 
    text-shadow: 
    1.5em .4em 10vw orange, 
    0 0 10vw gold;
    font-size: 3vw;"> Movies Inventory </h1>

    <script type="text/javascript">
        function movie(the_title, the_rating, the_price) {
            this.title = the_title;
            this.rating = the_rating;
            this.price = the_price;
            this.display = displayClass;
        }

        function displayClass() {
            document.write("<span style='color:black; font-size: 120%'> Title : </span>", this.title + "<br>");
            document.write("<span style='color:black; font-size: 120%'> Rating : </span>", this.rating + "<br>");
            document.write("<span style='color:black; font-size: 120%'> Price : </span>", this.price + "<br>");
            document.write('<br />');
        }

 var myMovie = new movie("Minions", "PG", '$' + 11.49);   
 var myMovie2 = new movie("Terminator Genisys", 'PG - '+ 13, '$' + 11.99);  
 var myMovie3 = new movie( "Taken 2", 'PG - '+ 13, '$' + 12.99);

 var myMovie4 = new movie("Ted 2", "R", '$' + 13.49);
 var myMovie5 = new movie ("Jurassic World", 'PG - '+ 13, '$' + 12.49);
 var myMovie6 = new movie("True Story", "R", '$' + 12.99);

 var myMovie7 = new movie("The Intern", 'PG -' + 13, '$' + 12.49);
 var myMovie8 = new movie("Edge of Tomorrow", 'PG -' + 13, '$' + 12.99 );
 var myMovie9 = new movie("Concussion", 'PG -' + 13, '$' + 13.49 );

  genre = new Array("Comedy", "Science Fiction", "Drama");
  movie = new Array(myMovie, myMovie2, myMovie3);
  movie2 = new Array(myMovie4, myMovie5, myMovie6);
  movie3 = new Array(myMovie7, myMovie8, myMovie9); 

        document.write("<span style ='text-align: center; font-size: 160%; font-family:monospace'>   Number of genres in the inventory: </span> " + genre.length);  document.write('<br />'); document.write('<br />'); document.write('<br />');
    </script>

body{

background-image: url(lab7_images/back.jpg);
height: 100%;
/*background-repeat: no-repeat;*/
background-size: cover;
text-align: center;
font-family: Courier, monospace;
   }

html.js  {

font-size: 120%;
font-weight: bold;
color: black;
border-style: double;

 }

span{

color: #000;
font-size: 120%;
font-family: Courier, monospace;

}

   </style>
   </head>
    <script type="text/javascript">
    </script>

</table>

output:

After changing code output:

A:

<! DOCTYPE html>
   <html>
   <head>
   <title> Lab 7 </title>
   <meta charset="utf-8">
   <h1 style="font-family: monospace;  text-align: center; 
    text-shadow: 
    1.5em .4em 10vw orange, 
    0 0 10vw gold;
    font-size: 3vw;"> Movies Inventory </h1>

    <script type="text/javascript">

    function movie(the_title, the_rating, the_price) {
    this.title = the_title;
    this.rating = the_rating;
    this.price = the_price;     
    this.display = displayClass;
}

    function displayClass(){
    document.write("<span style='color:black; font-size: 120%'> Title : </span>", this.title + "<br>");
    document.write("<span style='color:black; font-size: 120%'> Rating : </span>", this.rating + "<br>");
    document.write("<span style='color:black; font-size: 120%'> Price : </span>", this.price + "<br>");
    document.write('<br />');
}

    var myMovie = new movie("Minions", "PG", '$' + 11.49);   
    var myMovie2 = new movie("Terminator Genisys", 'PG - '+ 13, '$' + 11.99);  
    var myMovie3 = new movie( "Taken 2", 'PG - '+ 13, '$' + 12.99);

    var myMovie4 = new movie("Ted 2", "R", '$' + 13.49);
    var myMovie5 = new movie ("Jurassic World", 'PG - '+ 13, '$' + 12.49);
    var myMovie6 = new movie("True Story", "R", '$' + 12.99);

    var myMovie7 = new movie("The Intern", 'PG -' + 13, '$' + 12.49);
    var myMovie8 = new movie("Edge of Tomorrow", 'PG -' + 13, '$' + 12.99 );
    var myMovie9 = new movie("Concussion", 'PG -' + 13, '$' + 13.49 );

    genre = new Array("Comedy", "Science Fiction", "Drama");
    movie = new Array(myMovie, myMovie2, myMovie3);
    movie2 = new Array(myMovie4, myMovie5, myMovie6);
    movie3 = new Array(myMovie7, myMovie8, myMovie9);
    images = new Array("https://i.pinimg.com/originals/25/21/d6/2521d66145c91e8e49e20b9649e7d4a7.jpg", "image_2_url", "image_3_url");
    images2 = new Array("image_4_url", "image_5_url", "image_6_url");
    images3 = new Array("image_7_url", "image_8_url", "image_9_url");

   </script>

   </head>
   <body>

    <table border="2", align="center">
      <tr>
        <script type="text/javascript">for (i = 0; i < 3; i++) {
              document.write('<th>'+genre[i]+'</th>') }
        </script>
      </tr>        

      <tr>
        <script type="text/javascript">for (j = 0; j < 3; j++) {
          document.write("<td>")
          movie[j].display();
          document.write("<img src='")
          document.write(images[j])
          document.write(" '")
          document.write(" width='200' height='200' ")
          document.write(" > ")
          document.write("</td>")} 
        </script>
      </tr>

      <tr>
        <script type="text/javascript">for (j = 0; j < 3; j++) {
          document.write("<td>")
          movie2[j].display();
          document.write("<img src='")
          document.write(images2[j])
          document.write(" '")
          document.write(" width='200' height='200' ")
          document.write(" > ")
          document.write("</td>")} 
        </script>
      </tr>

      <tr>
        <script type="text/javascript">for (j = 0; j < 3; j++) {
          document.write("<td>")
          movie3[j].display();
          document.write("<img src='")
          document.write(images3[j])
          document.write(" '")
          document.write(" width='200' height='200' ")
          document.write(" > ")
          document.write("</td>")} 
        </script>
      </tr>

    </table>

