Let's get started with a Web Table!

  1. Open Notepad++
    1. Choose: File -> New
    2. Name the file: table.html
    3. Change the Save as type:
      to: Hyper Text Markup Language file (*.html)
    4. Open your index.html file
    5. Open your styles.css file
    6. Copy the Table Page Template (HTML) code (below)
    7. Paste that code into your table.html file
    8. Change your page title, your Author name, and your page heading to something appropriate
    9. 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.
    10. 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">
    11. Copy the Table Page Template Styles (CSS) code (below)
    12. Paste that code into your styles.css file
    13. Change the background-color, font color, and font-family (if you want)
    14. In your index.html file
      1. Add a link to this page. Change: <li>Create a Table Page</li>
        to: <li><a href="table.html">Create a Table Page</a></li>
    15. Click File -> Save
      or CTRL-S
      or click the floppy disk icon
      to save your changes
    16. Click: Run
    17. Choose: Launch in IE
      or Launch in Chrome
      or Launch in Firefox
    18. View your web page
    19. Make any changes
    20. Save your changes

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" /> 
   </head>
   <body>
     <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