Dynamic tables built by JavaScript

HTML tables dynamically generated by JavaScript

This page shows that several HTML tables can be built by JavaScript

As you see, putting the <TABLE> and <TT> tags outside the loop and closing them allows for the orderly display on one row; inside the loop we also open and close each of the four colour tables.

Here is the JavaScript code

<SCRIPT LANGUAGE="JavaScript">

   var picture = new Array(4);
   var title   = new Array(4);
   var caption = new Array(4);

   picture[0]= "red.jpg";
   title[0]  = "Red";
   caption[0]   = "Blood is red";
   
   picture[1]= "yellow.jpg";
   title[1]  = "Yellow";
   caption[1]   = "The buttercup is yellow";
   
   picture[2]= "green.jpg";
   title[2]  = "Green";
   caption[2]   = "Grass is green";
   
   picture[3] = "blue.jpg";
   title[3]   = "Blue";
   caption[3] = "The see is blue";


   document.write("<BR><BR><center>");
   document.write("<table>");
   document.write("<tr>");
   for (i=0; i <4; i++) {
     document.write("<td>");
     document.write("<table border=2>");
     document.write("<tr>");
     document.write("<th >" + title[i] + "</th>");
     document.write("</tr>");
     document.write("<tr>");
     document.write("<td >");
     document.write("<IMG SRC='images/" + picture[i] + "' WIDTH=96 HEIGHT=120 BORDER=0 ALT=''>");
     document.write("</td>");
	 document.write("</tr>");
     document.write("<tr>");
     document.write("<td >" + caption[i] + "</td>");
     document.write("</tr>");
     document.write("</table>");
	 document.write("</td>");
   }
   document.write("</tr>");
   document.write("</table>");
   document.write("</center>");

</SCRIPT>

Please click back to the article.

Back