Programming the production of tables on webpages

by David Halls


Interest Rates

Show  Hide

These are subject to change

In a previous article, it was shown how to use CSS to clean up the code in a table. With all the styling information in a stylesheet or style block, the code for production of a table using scripting becomes easier as this article will show.

Tables can be produced from:-

We will use the latter as it conveniently allows this to be shown live on this page.

The Data

Two-dimensional arrays are not possible in Javascript but each row of the table can be put into a single-dimensional array with the constituents separated by a delimiter. These are then generated by using the split function when needed. Data for a table of loan interest rates is shown below.

<script language="Javascript" type="text/javascript">
<!--
var data = new Array();
data[0]= "Loan amount;Interest rate;Typical APR";
data[1]= "£1,000 - £2,999;14.4%;14.4%";
data[2]= "£3,000 - £4,999;12.9%;12.9%";
data[3]= "£5,000 - £7,499;7.8%;7.8%";
data[4]= "£7,500 - £25,000;6.7%;6.7%";
//-->
</script>

The Table

The block at the top of this page shows what we will be producing. If you click on the link in the block, the table will be generated.

Before we get into some of the complexities with different row colours, let us look at the basic code to generate a table from the data above. The entire HTML code for the table will be put into one variable, html.

  1. The headings. These are produced from the first item in the array which we split to get the individual headings:-

    html = "<table id = 'temptable' summary = 'Interest Rates'><tr class = 'heading'>";
headings = data[0].split(";");
for (j=0;j<headings.length;j++) {
	html = html + "<th>" + headings[j] + "</th>";
	}

  2. The rows. The code for this is similar for the remaining items in the array. As we have dealt with the first item in the array, data[0], we start the for loop at i = 1.

    for (i=1;i<data.length;i++) {
	html = html + "<tr>";
	myarray = data[i].split(";");
for (j=0;j<myarray.length;j++) {
		html = html + "<td>" + myarray[j]+"</td>";
		}
	html = html +"</tr>";	
	}

  3. Close the table.

    html = html + "</table>";

  4. Insert the HTML code. A division is created in the <body> of the webpage with an id of "tablespace". The html code generated by Javascript then is inserted into this division.

    document.getElementById("tablespace").innerHTML = html;
  5. Make the above into a sub-routine and put it into the <head> section of the webpage.

Alternate colors in rows

This adds some complexity to the subroutine. I am sure there are other ways of achieving this, but my solution was to define a variable rowstyle initially as "odd" and then use a switch routine to alternately toggle the rows between "odd and "even". The variable rowstyle defined the class of the row and hence set the style. The complete subroutine is shown below:-

function tabdata() {
var rowstyle="odd"
html = "<table id = 'temptable' summary = 'Interest Rates'><tr class = 'heading'>";
headings = data[0].split(";");
for (j=0;j<headings.length;j++) {
		html = html + "<th>" + headings[j] + "</th>";
		}
for (i=1;i<data.length;i++) {
	html = html + "<tr class = '" + rowstyle + "'>";
	myarray = data[i].split(";");
	for (j=0;j<myarray.length;j++) {
		html = html + "<td>" + myarray[j]+"</td>";
		}
html = html +"</tr>";
switch(rowstyle) {
case "odd":
rowstyle = "even";
break;
case "even":
rowstyle = "odd";
break;
}
}
html = html + "<table>";
document.getElementById("tablespace").innerHTML = html;
}

The style

The code below shows the styling information which can be put into the <head7gt; section of the page or in a separate style sheet.


<style>
#temptable{
border-collapse: collapse;
width:70%;
background-color:#fbfabf;
border: 1px solid navy;
padding:0;
font-size:10pt;
}
#temptable td, th {
height: 2.0em;
text-align:center;
margin: 0;
width: 25%;
border: 0;
}
th {
background-color:#2f4f4f;
color: white;
}
#temptable tr.odd {
background-color:#dcdcdc;
}
#temptable tr.even {
background-color:#f5f5f5;
}
</style>

Conclusion

Using CSS to apply style to a table helps when programming the production of a table by keeping the required HTML elements simple.