tableforge/test-page.html at main · lastref/tableforge · 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Table Extractor - test fixtures</title>
    <style>
      body { font-family: system-ui, sans-serif; margin: 24px; color: #1a2231; }
      h2 { margin-top: 32px; }
      table.styled {
        border-collapse: collapse;
        width: 100%;
        font-size: 14px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
      }
      table.styled caption {
        caption-side: top;
        text-align: left;
        font-weight: 700;
        padding: 8px 0;
      }
      table.styled thead th {
        background: #2563eb;
        color: #fff;
        padding: 10px 12px;
        text-align: left;
      }
      table.styled tbody td,
      table.styled tbody th {
        border-bottom: 1px solid #e4e7ec;
        padding: 8px 12px;
      }
      table.styled tbody tr:nth-child(even) {
        background: #f6f7f9;
      }
      .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border: 1px solid #d0d5dd;
      }
      .grid [role="columnheader"],
      .grid [role="cell"] {
        padding: 8px 12px;
        border-bottom: 1px solid #e4e7ec;
      }
      .grid [role="columnheader"] {
        font-weight: 700;
        background: #eef2ff;
      }
    </style>
  </head>
  <body>
    <h1>Table Extractor test fixtures</h1>

    <h2>1. Simple table with header</h2>
    <table class="styled">
      <caption>Quarterly revenue</caption>
      <thead>
        <tr><th>Region</th><th>Q1</th><th>Q2</th></tr>
      </thead>
      <tbody>
        <tr><td>North</td><td>1200</td><td>1500</td></tr>
        <tr><td>South</td><td>980</td><td>1100</td></tr>
      </tbody>
    </table>

    <h2>2. Merged cells (rowspan / colspan)</h2>
    <table class="styled" id="merged">
      <thead>
        <tr>
          <th rowspan="2">Product</th>
          <th colspan="2">2024</th>
          <th colspan="2">2025</th>
        </tr>
        <tr>
          <th>H1</th><th>H2</th><th>H1</th><th>H2</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>Widget</td><td>10</td><td>20</td><td>30</td><td>40</td></tr>
        <tr><td>Gadget</td><td>5</td><td>15</td><td>25</td><td>35</td></tr>
      </tbody>
    </table>

    <h2>3. Nested table inside a cell</h2>
    <table class="styled" id="outer">
      <tr><th>Outer A</th><th>Outer B</th></tr>
      <tr>
        <td>cell 1</td>
        <td>
          <table id="inner">
            <tr><td>inner x</td><td>inner y</td></tr>
          </table>
        </td>
      </tr>
    </table>

    <h2>4. ARIA grid (div based)</h2>
    <div class="grid" role="table" aria-label="Team roster">
      <div role="row">
        <div role="columnheader">Name</div>
        <div role="columnheader">Role</div>
        <div role="columnheader">City</div>
      </div>
      <div role="row">
        <div role="cell">Ada</div>
        <div role="cell">Engineer</div>
        <div role="cell">London</div>
      </div>
      <div role="row">
        <div role="cell">Grace</div>
        <div role="cell">Scientist</div>
        <div role="cell">New York</div>
      </div>
    </div>
  </body>
</html>