CodePen

HTML

            
              <table>
  <thead>
    <tr>
      <th scope="col">Header 1</th>
      
      <th scope="col">Header 2</th>
      <th scope="col">Header 3</th>
    </tr>
    <tr>
      <th>Section 1</th>
      
      <th>Section 2</th>
      <th>Section 3</th>
    </tr>
  </thead>
  <tfoot>
    
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
      <td>Footer 3</td>
      
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      
      <td>Cell 3</td>
    </tr>
    <tr>
      <td>Cell 7</td>
      <td>Cell 8</td>
      
      <td>Cell 9</td>
    </tr>
  </tbody>
</table>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              table {
  width:960px;
  margin:25px auto;
  text-align:center;
}

th[scope="col"] {
  background:green;
}


th {
  background:#bada55;
}

tr {
  background:darkgrey; /* Overridden by td styling */
}

td {
  background:lightgrey;
}

tfoot tr td {
  background:orange;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................