Untitled

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="HTML Tables">
  <meta charset="utf-8">
  <title>HTML Tables</title>
<style id="jsbin-css">
body {
    font-family: Helvetica, sans-serif;
}

.album-view-song-list {
    width: 90%;
    margin: 1.5rem auto;
    font-weight: 300;
    font-size: 1em;
    background-color: rgba(20,250,200,0.6) ;
    color: rgb(233,50,117);
}
thead{
  font-size: 1.2eml;
  color: black;
}

.album-view-song-list {
  position: relative;
}

.album-view-song-item {
    height: 3rem;
  text-align: center;
}

.song-item-number {
    width: 5%;
}

.song-item-title {
    width: 80%;
}

.song-item-duration {
    width: 10%;
    letter-spacing: 0.05rem;

}
</style>
</head>
<body>
  <table class="album-view-song-list" border="1">
    <thead>
      <tr>
        <th>Song number </th>
        <th> Title </th>
        <th> Duration </th>
        <th> Times played </th>
      </tr>
    </thead>
      <tr class="album-view-song-item">
          <td class="song-item-number">1</td>
          <td class="song-item-title">Blue</td>
          <td class="song-item-duration">X:XX</td>
          <td class="times-played"> 3 </td>
      </tr>
      <tr class="album-view-song-item">
          <td class="song-item-number">2</td>
          <td class="song-item-title">Red</td>
          <td class="song-item-duration">X:XX</td>
          <td class="times-played"> 3 </td>
      </tr>
      <tr class="album-view-song-item">
          <td class="song-item-number">3</td>
          <td class="song-item-title">Green</td>
          <td class="song-item-duration">X:XX</td>
          <td class="times-played"> 3 </td>
      </tr>
      <tr class="album-view-song-item">
          <td class="song-item-number">4</td>
          <td class="song-item-title">Purple</td>
          <td class="song-item-duration">X:XX</td>
          <td class="times-played"> 3 </td>
      </tr>
      <tr class="album-view-song-item">
          <td class="song-item-number">5</td>
          <td class="song-item-title">Black</td>
          <td class="song-item-duration">X:XX</td>
          <td class="times-played"> 1 </td>
      </tr>
      <tr class="album-view-song-item">
          <td class="song-item-number">6</td>
          <td class="song-item-title">Blue Pt.2</td>
          <td class="song-item-duration">X:XX</td>
          <td class="times-played"> 1 </td>
      </tr>  <tr class="album-view-song-item">
          <td class="song-item-number">7</td>
          <td class="song-item-title">Rainbow</td>
          <td class="song-item-duration">X:XX</td>
          <td class="times-played"> 5 </td>
      </tr>
  </table>


<script id="jsbin-source-css" type="text/css">body {
    font-family: Helvetica, sans-serif;
}

.album-view-song-list {
    width: 90%;
    margin: 1.5rem auto;
    font-weight: 300;
    font-size: 1em;
    background-color: rgba(20,250,200,0.6) ;
    color: rgb(233,50,117);
}
thead{
  font-size: 1.2eml;
  color: black;
}

.album-view-song-list {
  position: relative;
}

.album-view-song-item {
    height: 3rem;
  text-align: center;
}

.song-item-number {
    width: 5%;
}

.song-item-title {
    width: 80%;
}

.song-item-duration {
    width: 10%;
    letter-spacing: 0.05rem;

}</script>
</body>
</html>