Let's get started with a Web Table!

  1. Login into your Code.Org account.
  2. Click on your name.
  3. Choose: My Projects
  4. Click on your My First Web Site project.
  5. Click on the Add HTML button.
  6. Right click on: new-1.html
  7. Choose: Rename
  8. Name this file: table.html
  9. Delete all the lines in this file.
  10. Copy the Table Page Template (HTML) code (below).
  11. Paste that code into your table.html file.
  12. Change your page title, your Author name, and your page heading to something appropriate
  13. Change the column names and the cell data for each row to have a table of songs, or sports, or animals or whatever you want.
  14. After the <tbody> tag:
    1. Change the first <tr> tag
      to: <tr class="oddRow">
    2. Change the second <tr> tag
      to: <tr class="evenRow">
    3. Change the third <tr> tag
      to: <tr class="oddRow">
  15. Copy the Table Page Template Styles (CSS) code (below)
  16. Paste that code into the end of your style.css file.
  17. Change the background-color, font color, and font-family (if you want)
  18. Click: Refresh and Save
<!doctype html>
 <html>
   <head>
     <title>page title goes here</title>
     <!-- Author: put your name in this comment line -->
     <link href="style.css" rel="stylesheet"/> 
   </head>
   <body>
      <nav>
      <a href="index.html">Home</a> |
      <a href="table.html" class="selected">Table</a> |
      <a href="form.html">Form</a> |
      <a href="multimedia.html">Multimedia</a> |
      <a href="javascript.html">JavaScript</a> |
      <a href="temperature.html">Temperature</a> |
      <a href="js_styles.html">JS Styles</a>
    </nav>
     <h1>page heading goes here</h1>
     <table>
       <thead>
         <tr>
           <th>Column 1 Name</th>
           <th>Column 2 Name</th>
           <th>Column 3 Name</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td>put data here</td>
           <td>put data here</td>
           <td>put data here</td>
         </tr>
        <tr>
           <td>put data here</td>
           <td>put data here</td>
           <td>put data here</td>
         </tr>
        <tr>
           <td>put data here</td>
           <td>put data here</td>
           <td>put data here</td>
         </tr>
        </tbody>
     </table>
     <p>This page was last modified on: 
     <script>document.write(document.lastModified);</script>.</p>
   </body>
  </html>

Table Page Template Styles (CSS)

table {
  font-family:  Arial, Verdana, sans-serif;
  margin:  5% 15% auto;
  padding:  2%;
  width:  80%;
}
th {
  background-color:  put-color-here;
  color:  put-font-color-here;
  padding:  2%;
}
.evenRow {
  background-color:  put-even-row-color-here; 
  color:  put-font-color-here;
  padding:  2%; 
}
.oddRow {
  background-color:  put-odd-row-color-here;
  color:  put-font-color-here;
  padding:  2%; 
}

Example