html-test/04-table-basic.html at main · brianwestphal/html-test · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>04 — Basic table</title>
<style>
  body { font-family: sans-serif; margin: 2em; }
  table { border-collapse: collapse; min-width: 32em; }
  th, td { border: 1px solid #475569; padding: 6px 10px; text-align: left; }
  thead th { background: #0f172a; color: white; }
  tbody tr:nth-child(even) td { background: #f1f5f9; }
  tfoot td { background: #fef3c7; font-weight: bold; }
  caption { caption-side: top; font-style: italic; margin-bottom: 6px; text-align: left; }
</style>
</head>
<body>
<h1>Basic table — thead / tbody / tfoot / caption / scope</h1>
<table>
  <caption>Quarterly revenue by region (USD, millions)</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
      <th scope="col">Q3</th>
      <th scope="col">Q4</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">North</th><td>120</td><td>135</td><td>140</td><td>160</td></tr>
    <tr><th scope="row">South</th><td>88</td><td>95</td><td>102</td><td>115</td></tr>
    <tr><th scope="row">East</th><td>74</td><td>72</td><td>88</td><td>95</td></tr>
    <tr><th scope="row">West</th><td>110</td><td>118</td><td>125</td><td>140</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td>392</td><td>420</td><td>455</td><td>510</td></tr>
  </tfoot>
</table>
</body>
</html>