HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Revenue by region</title>
    <style>
      body { font: 16px/1.6 system-ui, sans-serif; margin: 2rem; }
      table { border-collapse: collapse; }
      caption { text-align: left; font-weight: 600; padding-block: .5rem; }
      th, td { border: 1px solid #d0d5dd; padding: .5rem .75rem; }
      thead th { background: #f2f4f7; }
      .numeric { text-align: right; font-variant-numeric: tabular-nums; }
    </style>
  </head>
  <body>
    <table>
      <caption>Revenue by region, FY2026 (GBP thousands)</caption>
      <thead>
        <tr>
          <th scope="col">Region</th>
          <th scope="col" class="numeric">Q1</th>
          <th scope="col" class="numeric">Q2</th>
        </tr>
      </thead>
      <tbody>
        <tr><th scope="row">North</th><td class="numeric">412</td><td class="numeric">455</td></tr>
        <tr><th scope="row">South</th><td class="numeric">690</td><td class="numeric">712</td></tr>
      </tbody>
    </table>
  </body>
</html>

Output

Rendered by your browser