Next page | Contents page |

Exercise 8 - Generate HTML table

Given the following snippet of JavaScript, output all the data values it contains as an HTML table (4 columns).

var headings = ["Name", "RA (2000)", "Dec (2000)", "Magnitude"];
var orionStars =
{name: "Alpha Ori", ra: "05 55 10.29", dec: "+07 24 25.3", vmag: 0.45 },
{name: "Beta Ori", ra: "05 14 32.27", dec: "-08 12 05.9", vmag: 0.18 },
{name: "Gamma Ori", ra: "05 25 07.87", dec: "+06 20 59.0", vmag: 1.64 },
{name: "Delta Ori", ra: "05 32 00.40", dec: "-00 17 56.7", vmag: 2.25 },
{name: "Epsilon Ori", ra: "05 36 12.81", dec: "-01 12 06.9", vmag: 1.69 },
{name: "Kappa Ori", ra: "05 47 45.39", dec: "-09 40 10.6", vmag: 2.07 },
{name: "Zeta Ori", ra: "05 40 45.52", dec: "-01 56 33.3", vmag: 1.74 } ];

You should be able to copy that from this page and paste it into your text editor.

If you don't know, HTML tables comprise header cell elements, <th>, and data cell elements, <td>, arranged inside row elements, <tr>, like this:

<table width="50%" border="1">
  <tr><th>Head, col 1</th><th>Head, col 2</th>...<th>Head, col m</th></tr>
  <tr><td>Data, row 1 col 1</td><td>Data, row 1 col 2</td>...
            <td>Data, row 1 col m</td></tr>
  <tr><td>Data, row n col 1</td><td>Data, row n col 2</td>...
            <td>Data, row n col m</td></tr>

Recall from Part 1 how we used an id attribute on a <p> element, with document.getElementById() and then innerHTML. Build the table up as one String first.

There is a lot of repetition in the table structure so write some functions that can be called repeatedly, such as addRow() and addCell().

Background (astronomy)

The data comprise the names, positions and visual magnitudes (brightnesses) of the principal stars in the constellation of Orion. RA stands for Right Ascension which is celestial longitude. It is measured in units of time (hours, minutes and seconds), as the sky appears to rotate once in almost 24 hours. Dec is declination which is celestial latitude measured in degrees, arcminutes and arcseconds, north or south of the celestial equator (the projection of the Earth's equator onto the sky). The coordinate system changes slowly over time as the Earth's axis wobbles, so we specify 2000 as the epoch for which the coordinates are determined.

The International Astronomical Union (IAU) has defined 3-letter abbreviations for the constellations: Ori means Orion.

We will use these data in other exercises later.

Next page | Contents page |