/* Using a sans serif font and increasing the size of the characters */
body {
  font-family: sans-serif;
  font-size: 20px;
}

/* Shift the heading text to the left, by default it is centered */
table caption {
  text-align: left;
}

/* We "collapse" the frames of adjacent cells */
table {
  border-collapse: collapse;
}

/* 
  Add a border and padding to the cells, the distance from the content to the border.
  To control the vertical position, the caption-side property is used.
*/
table th,
table td {
  padding: 10px;
  border: 1px solid #2a2a2a;
}

table {
  box-shadow: 2px 2px 2px 2px hsla(0, 0%, 0%, 0.2);
  margin: 3rem;
  font-family: sans-serif;
  border-collapse: collapse;
}
caption {
  font-size: 20px;
  margin-bottom: 1rem;
}
thead {
  background-color: #555;
  color: #fff;
}

td,
th {
  padding: 0.5rem 1rem;
  border: 1px solid #888;
  text-align: center;
}

td[colspan] {
  background-color: #eee;
}