JavaScript String Template with Ternary Operators

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>ES6 Template Strings</title>
    <link rel="stylesheet" href="style.css">
    <script data-require="traceur@*" data-semver="0.0.0-20140302" src="https://traceur-compiler.googlecode.com/git/bin/traceur.js"></script>
    <script data-require="traceur@*" data-semver="0.0.0-20140302" src="https://traceur-compiler.googlecode.com/git/src/bootstrap.js"></script>
  </head>
  <body>
    <h1>Sales For Year</h1>
    <div id="content"></div>
    <script src="script.js"></script>
  </body>
</html>

      'use strict';
      traceur.options.experimental = true;
      
      //String Template Code
      let displayAverages = true;
      let totalSales = 500;
      let sales = [50, 200, 125, 75, 25, 10, 15];
      let tableTemplate = `<table id="sales">
          <tr>
              <th>Total</th>
              ${displayAverages ? '<th>Averages</th>' : ''}
          </tr>
          <tr>
              <td>${totalSales}</td>
              ${displayAverages ? `<td>${Math.round(totalSales/sales.length)}</td>` : ''}
          </tr>
      </table>`;
      
      document.getElementById("content").innerHTML = tableTemplate;

#sales,
#sales td,
#sales th{
  border: 1px solid #000;
  border-collapse: collapse;
}
#sales td,
#sales th{
  padding: 5px;
}
#sales td{
  text-align:center;
}