<div id="container"></div>

caption {
  font-family: Helvetica, sans-serif;
  font-weight: bold;
  padding: 10px;
  text-align: left;
}

body {
  font-family: 'Consolas';
}

table {
  text-align: left;
  border-collapse: collapse;
}

thead {
  background-color: #397112;
}

th {
  color: white;
}

table, th, td {
  border: 0;
}

td, th {
  padding: 10px 20px;
}

tbody tr:nth-child(even) {
  background-color: #eee;
}

.name {
  font-weight: bold;
}

// table row entry
const playerStats = ({name, goals, assists, apps}) => (`   
  <tr>
    <td class='name'>${name}</td>
    <td>${goals}</td>
    <td>${assists}</td>
    <td>${apps}</td>
  </tr>
`)

// table
const teamTable = (team, players) => (`
  <table>
    <caption>${team} Player Statistics</caption>
    <thead>
      <tr>
        <th>Player</th>
        <th>Goals</th>
        <th>Assists</th>
        <th>Appearances</th>
      </tr>
    <thead>
    <tbody>
      ${
        players.map(playerStats).join('')
      }
    </tbody>
  <table>
`)

const squad = [
    { name: 'Emile Smith Rowe', goals: 9, assists: 2, apps: 15 },
    { name: 'Bukayo Saka', goals: 7, assists: 4, apps: 21 },
    { name: 'Gabriel Martinelli', goals: 4, assists: 2, apps: 11 },
    { name: 'Martin Ødegaard', goals: 4, assists: 3, apps: 17 }
]

document
  .querySelector('#container')
  .insertAdjacentHTML('afterbegin', teamTable('Arsenal', squad))