3.1.1. HTML tables

In our program, we’ll need an HTML table which we’ll use to show the high score list to the user.

HTML tables are a fairly straightforward concept. Here’s one:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
     <table id="hiscore" border="1">
         <tr>
             <td>Position</td>
             <td>Date</td>
             <td>User</td>
             <td>Guesses</td>
         </tr>
         <tr>
             <td>1</td>
             <td></td>
             <td></td>
             <td></td>
         </tr>
         <tr>
             <td>2</td>
             <td></td>
             <td></td>
             <td></td>
         </tr>
     </table>
  • Line 1: We start the table with the <table> tag. We assign it an ID and request it to be rendered with a border.
  • Line 2: We start defining a row for the table using the <tr> (table row) tag.
  • Line 3: We define a cell using the <td> (table data) tag. The contents are simply text in this case but can in general be any HTML.

In order to modify tables in JavaScript, we can do the following:

1
2
3
4
table = document.getElementById("hiscore");
for(var i = 1; i < 3; i++) {
    table.rows[i].cells.item(1).innerHTML = "2017-02-15";
}
  • Line 1: We obtain a reference to the table
  • Line 2: We iterate over two table rows using a for loop, skipping the header (both rows and cells, and JavaScript arrays in general, are 0-indexed, meaning the arrays start at 0)
  • Line 3: We set the contents of the second cell of the i’th row to “2017-02-15”.

Exercise: Add a HTML table in your guessing game web page as a placeholder for the high score list. You can set the values for the first row in the table (i.e. the header) but leave the other cells empty for now.