CodePen

HTML

            
              <table>

<thead>
  <tr>
<th colspan="5">This is the Head</th>
</tr>
  </thead>
  <tbody>
<tr>
<th></th>
<th scope="row">Column 1 (th)</th>
<th scope="row">Column 2 (th)</th>
<th scope="row">Column 3 (th)</th>
<th scope="row">Column 4 (th)</th>
</tr>
<tr>
<th scope="col">Row 1 (th)</th>
<td>Example Stuff</td>
<td>Example Stuff</td>
<td>Example Stuff</td>
<td>Example Stuff</td>
</tr>
<tr>
<th scope="col">Row 2 (th)</th>
<td>Example Stuff</td>
<td>Example Stuff</td>
<td>Example Stuff</td>
<td>Example Stuff</td>
</tr>
<tr>
<th scope="col">Row 3 (th)</th>
<td>Example Stuff</td>
<td>Example Stuff</td>
<td>Example Stuff</td>
<td>Example Stuff</td>
</tr>
<tr>
<th scope="col">Row 4 (th)</th>
<td>Example Stuff</td>
<td>Example Stuff</td>
<td>Example Stuff</td>
<td>Example Stuff</td>
</tr>
<tr>
<th scope="col">Row 5 (th)</th>
<td>Example Stuff</td>
<td>Example Stuff</td>
<td>Example Stuff</td>
<td>Example Stuff</td>
</tr>
<tr>
<th scope="col">Row 6 (th)</th>
<td>Example Stuff</td>
<td>Example Stuff</td>
<td>Example Stuff</td>
<td>Example Stuff</td>
</tr>
</tbody>
</table>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              table {
  margin: 10px 0px 10px 0px;
}

thead{
  background: #1958A2
}
th {
	background: #4C4D4F;
	color:white;
	padding: 5px 5px 5px 5px;
	font-size: 11px;
}

th[scope=col] {
	text-align:left
}

th[scope=row] {
	text-align:center
}

tr {
	background: #DDD;
	padding: 5px 5px 5px 5px;
	text-align: center;
}

td {
	background: #DDD;
	text-align: center;
	padding: 5px 5px 5px 5px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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