<table>
  <caption>
    The cities I visited on my travels
    </caption>
  <tr>
    <th>City</th>
    <th>Date</th>
    <th>Temp</th>
    <th>Altitude</th>
    <th>Population</th>
    <th>Diner Rating</th>
  </tr>
  <tr>
    <td>Walla Wall, WA</td>
    <td>6/25</td>
    <td>28</td>
    <td>1204 ft</td>
    <td>100</td>
    <td>4/5</td>
  </tr>
  <tr>
    <td>Magic City, MC</td>
    <td>7/1</td>
    <td>30</td>
    <td>5000 ft</td>
    <td>200</td>
    <td>3/5</td>
  </tr>
  <tr>
    <td>Bountiful, UT</td>
    <td>7/10</td>
    <td>32</td>
    <td>2400 ft</td>
    <td>120</td>
    <td>4/5</td>
  </tr>
  <tr>
    <td rowspan="2">Apple</td>
    <td>8/15</td>
    <td>25</td>
    <td rowspan="2">4000 ft</td>
    <td rowspan="2">700</td>
    <td>5/5</td>
  </tr>
  <tr>
    <td>9/12</td>
    <td>28</td>
    <td>4/5</td>
  </tr>
    <tr>
    <td>Bountiful, UT</td>
    <td>7/10</td>
    <td>32</td>
    <td>2400 ft</td>
    <td>120</td>
    <td>4/5</td>
  </tr>
</table>
table{
  caption-side: bottom;/* move title to bottom */
  border: 5px solid var(--grey1);
  /* horizontal vertical IE7+ */
  border-spacing: 0px 10px; 
/*   destory border */
/*   border-collapse: collapse;  */
}
td, th{
  border: 1px solid var(--grey3);
}

th{background-color: green;}

tr:nth-child(even){
  background-color: magenta;
}

body{
  background-color: rgb(30,30,30);
  color: white;
  font-family: verdana;
}

:root{
  --grey1: rgb(60,60,60);
  --grey2: rgb(90,90,90);
  --grey3: rgb(120,120,120);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.