HeatmapTable

<section class="hm-card" aria-labelledby="hmTitle">
  <header class="hm-head">
    <div class="hm-heading">
      <h2 id="hmTitle" class="hm-title">Traffic heatmap</h2>
      <p class="hm-subtitle">Requests by hour and weekday</p>
    </div>
    <span class="hm-meta">last 7 days</span>
  </header>
  <div class="hm-shell" role="region" aria-label="Heatmap table, scroll horizontally on small screens" tabindex="0">
    <table class="hm-table">
      <caption class="hm-caption">Intensity map where darker cells indicate higher request volume.</caption>
      <thead id="hmHead"></thead>
      <tbody id="hmBody"></tbody>
    </table>
  </div>
  <ul class="hm-legend" aria-label="Heat intensity scale">
    <li><span class="hm-key hm-l1"></span>Low</li>
    <li><span class="hm-key hm-l3"></span>Medium</li>
    <li><span class="hm-key hm-l5"></span>High</li>
  </ul>
</section>