Let's get started with a JavaScript Table Page!

  1. Open Notepad++
    1. Open your index.html file
    2. Open your styles.css file
    3. Choose: File -> New
    4. Copy the JavaScript Table Page Template (HTML) code (below)
    5. Paste that code into your new file
    6. Choose: Save
    7. Save the file as: js_table.html
    8. Change the Save as type:
      to: Hyper Text Markup Language file (*.html)
    9. Change your page title, your Author name, and your page heading to something appropriate
    10. Choose: File -> New
    11. Copy the Table Page JavaScript (JS) code (below)
    12. Paste that code into your new file
    13. Choose: Save
    14. Save the file in your includes folder as: table.js
    15. Change the Save as type:
      to: JavaScript File (*.js)
    16. In your index.html file
    17. Add a link to this page.
      Change: <li>Use JavaScript to Create a Table Page</li>
      to: <li><a href="js_table.html">Use JavaScript to Create a Table Page</a></li>
    18. Save your changes
    19. Click: Run
    20. Choose: Launch in IE
      or Launch in Chrome
      or Launch in Firefox
    21. View your web page
    22. Make any changes
    23. Save your changes

JavaScript Table Page Template (HTML)

Tables should NEVER be used for page layout!

<!doctype html>
<html>
  <head>
    <title>page title goes here</title>
    <!-- Author: put your name in this comment line --> 
    <link href="includes/styles.css" rel="stylesheet"/>
    <script src="includes/table.js"></script>
  </head>
  <body onload="displayTable();">
    <h2>put page heading here</h2>
    <div id="table">
    </div>
    <p>This page was last modified on: 
     <script>document.write(document.lastModified);</script>.</p>
  </body>
</html>

Table Page JavaScript (JS)

function displayTable() {
  // Setup arrays
  var monthNames = ["January", "February", "March", "April", "May", "June", 
                    "July", "August", "September", "October", "November", "December"];
  var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  
  // Setup table header HTML
  var tableCode = "<table style=\"background-color: #00F; border-radius: 22px;\">\n";
  tableCode    += "  <tr>\n"
  tableCode    += "    <th>Month<br/>Number</th>\n"
  tableCode    += "    <th>Month<br/>Name</th>\n"
  tableCode    += "    <th>Days in<br/>Month</th>\n"
  tableCode    += "  </tr>\n"
  
  // Walk through arrays
  for (var  i = 0; i < monthNames.length; i++) {
    if (i % 2 == 0) {
      tableCode += "  <tr class=\"evenRow\">\n"
    } else {
      tableCode += "  <tr class=\"oddRow\">\n"
    }
    tableCode += "    <td style=\"color: #000; text-align: center;\">"
                 + (i + 1) + "</td>\n"
    tableCode += "    <td style=\"color: #000; text-align: center;\">" 
                 + monthNames[i] + "</td>\n"
    tableCode += "    <td style=\"color: #000; text-align: center;\">" 
                 + monthDays[i] + "</td>\n"
    tableCode += "  </tr>\n"
  }
  
  // setup table ending HTML
  tableCode += "</table>\n"
  
  // display HTML code
  document.getElementById("table").innerHTML = tableCode;
}

Example