Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Tischkomponente

Zuletzt aktualisiert:

Nur CSS-Tailwind-CSS-Tabelle mit Zebrastreifen, kompakten und Standardgrößen, angehefteten Spalten und Zeilen-Hover-Zuständen. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Tabellenkomponenten organisieren und zeigen strukturierte Daten in Zeilen und Spalten an. Tabellen basieren auf semantischen HTML-Tabellenelementen und Tailwind-CSS-Stil und unterstützen Sortierung, gestreifte Zeilen, Hover-Effekte und reaktionsfähige Überlaufbehandlung. Auf das Frutjam-Tabellensystem kann mit geeigneten Header-Zuordnungen zugegriffen werden und es funktioniert nahtlos mit Datenvisualisierungs-Frameworks.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
tableBaseGestaltete HTML-Tabelle mit einheitlichem Abstand
table-zebraStilAbwechselnde Zeilenhintergrundfarben
table-zebra-rowsStilAbwechselnder Zeilenhintergrund nur für Tbody-Zeilen
table-zebra-colsStilAbwechselnde Spaltenhintergrundfarben
table-hoverStilHebt Zeilen beim Schweben hervor
table-pin-rowsModifikatorHält Kopf- und Fußzeilen beim Scrollen fest
table-pin-colsModifikatorBleibt beim Scrollen die erste und letzte Spalte hängen
table-xsGrößeExtra kleine Reihenpolsterung
table-smGrößeKleine Reihenpolsterung
table-mdGrößeMittlerer Zeilenabstand (Standard)
table-lgGrößeGroße Reihenpolsterung
table-xlGrößeExtra große Reihenpolsterung

Tisch

Product Price Category
1 Smartphone $699 Electronics
2 Wireless Headphones $150 Accessories
3 Laptop $1200 Electronics 
 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
<div class="overflow-x-auto w-full">
  <table class="table">
    <!-- head -->
    <thead>
      <tr>
        <th></th>
        <th>Product</th>
        <th>Price</th>
        <th>Category</th>
      </tr>
    </thead>
    <tbody>
      <!-- row 1 -->
      <tr>
        <th>1</th>
        <td>Smartphone</td>
        <td>$699</td>
        <td>Electronics</td>
      </tr>
      <!-- row 2 -->
      <tr>
        <th>2</th>
        <td>Wireless Headphones</td>
        <td>$150</td>
        <td>Accessories</td>
      </tr>
      <!-- row 3 -->
      <tr>
        <th>3</th>
        <td>Laptop</td>
        <td>$1200</td>
        <td>Electronics</td>
      </tr>
    </tbody>
  </table>
</div>

 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
<div className="overflow-x-auto w-full">
  <table className="table">
    {/* head */}
    <thead>
      <tr>
        <th></th>
        <th>Product</th>
        <th>Price</th>
        <th>Category</th>
      </tr>
    </thead>
    <tbody>
      {/* row 1 */}
      <tr>
        <th>1</th>
        <td>Smartphone</td>
        <td>$699</td>
        <td>Electronics</td>
      </tr>
      {/* row 2 */}
      <tr>
        <th>2</th>
        <td>Wireless Headphones</td>
        <td>$150</td>
        <td>Accessories</td>
      </tr>
      {/* row 3 */}
      <tr>
        <th>3</th>
        <td>Laptop</td>
        <td>$1200</td>
        <td>Electronics</td>
      </tr>
    </tbody>
  </table>
</div>

Tischgrößen

Tabelle extra klein (table-xs)

Im folgenden Beispiel für die Tabellengröße verwenden wir table-xs (extra klein). Sie können die Tabellengröße mithilfe der Dienstprogrammklassen table-{size} anpassen, einschließlich table-xs, table-sm, table-md, table-lg und table-xl, die von besonders kompakten Layouts bis hin zu geräumigeren, lesbareren Tabellen reichen.

Framework Creator Core Purpose
1 Next.js Vercel React-based SSR (Server-Side Rendering) & Static Site Generation
2 Vue 3 Evan You Progressive JavaScript Framework for building UIs
3 Svelte Rich Harris Compiles to minimal vanilla JavaScript for fast performance
4 Remix Ryan Florence, Michael Jackson React Framework focused on user experience and performance
5 Astro Fred K. Schott Builds fast websites using components from React, Vue, Svelte, etc.
html 
 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
<div class="overflow-x-auto w-full">
  <table class="table table-xs">
    <!-- head -->
    <thead>
      <tr>
        <th></th>
        <th>Framework</th>
        <th>Creator</th>
        <th>Core Purpose</th>
      </tr>
    </thead>
    <tbody>
      <!-- row 1 -->
      <tr>
        <th>1</th>
        <td>Next.js</td>
        <td>Vercel</td>
        <td>React-based SSR (Server-Side Rendering) & Static Site Generation</td>
      </tr>
      <!-- row 2 -->
      <tr>
        <th>2</th>
        <td>Vue 3</td>
        <td>Evan You</td>
        <td>Progressive JavaScript Framework for building UIs</td>
      </tr>
      <!-- row 3 -->
      <tr>
        <th>3</th>
        <td>Svelte</td>
        <td>Rich Harris</td>
        <td>Compiles to minimal vanilla JavaScript for fast performance</td>
      </tr>
      <!-- row 4 -->
      <tr>
        <th>4</th>
        <td>Remix</td>
        <td>Ryan Florence, Michael Jackson</td>
        <td>React Framework focused on user experience and performance</td>
      </tr>
      <!-- row 5 -->
      <tr>
        <th>5</th>
        <td>Astro</td>
        <td>Fred K. Schott</td>
        <td>Builds fast websites using components from React, Vue, Svelte, etc.</td>
      </tr>
    </tbody>
  </table>
</div>

Tischzebra (gestreift) Reihen

City Country Population
1 Tokyo Japan 37.4 million
2 New York USA 8.4 million
3 Paris France 2.1 million
html 
 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
<div class="overflow-x-auto w-full">
  <table class="table table-zebra">
    <!-- head -->
    <thead>
      <tr>
        <th></th>
        <th>City</th>
        <th>Country</th>
        <th>Population</th>
      </tr>
    </thead>
    <tbody>
      <!-- row 1 -->
      <tr>
        <th>1</th>
        <td>Tokyo</td>
        <td>Japan</td>
        <td>37.4 million</td>
      </tr>
      <!-- row 2 -->
      <tr>
        <th>2</th>
        <td>New York</td>
        <td>USA</td>
        <td>8.4 million</td>
      </tr>
      <!-- row 3 -->
      <tr>
        <th>3</th>
        <td>Paris</td>
        <td>France</td>
        <td>2.1 million</td>
      </tr>
    </tbody>
  </table>
</div>

Tischsäulen in Zebraform (gestreift).

City Country Population
1 Tokyo Japan 37.4 million
2 New York USA 8.4 million
3 Paris France 2.1 million
html 
 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
<div class="overflow-x-auto w-full">
  <table class="table table-zebra-cols">
    <!-- head -->
    <thead>
      <tr>
        <th></th>
        <th>City</th>
        <th>Country</th>
        <th>Population</th>
      </tr>
    </thead>
    <tbody>
      <!-- row 1 -->
      <tr>
        <th>1</th>
        <td>Tokyo</td>
        <td>Japan</td>
        <td>37.4 million</td>
      </tr>
      <!-- row 2 -->
      <tr>
        <th>2</th>
        <td>New York</td>
        <td>USA</td>
        <td>8.4 million</td>
      </tr>
      <!-- row 3 -->
      <tr>
        <th>3</th>
        <td>Paris</td>
        <td>France</td>
        <td>2.1 million</td>
      </tr>
    </tbody>
  </table>
</div>

Die Tabelle hebt die Zeile beim Hover hervor

City Country Population
1 Tokyo Japan 37.4 million
2 New York USA 8.4 million
3 Paris France 2.1 million
3 Paris France 2.1 million
html 
 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
<div class="overflow-x-auto w-full">
  <table class="table table-hover">
    <!-- head -->
    <thead>
      <tr>
        <th></th>
        <th>City</th>
        <th>Country</th>
        <th>Population</th>
      </tr>
    </thead>
    <tbody>
      <!-- row 1 -->
      <tr>
        <th>1</th>
        <td>Tokyo</td>
        <td>Japan</td>
        <td>37.4 million</td>
      </tr>
      <!-- row 2 -->
      <tr>
        <th>2</th>
        <td>New York</td>
        <td>USA</td>
        <td>8.4 million</td>
      </tr>
      <!-- row 3 -->
      <tr>
        <th>3</th>
        <td>Paris</td>
        <td>France</td>
        <td>2.1 million</td>
      </tr>
            <tr>
        <th>3</th>
        <td>Paris</td>
        <td>France</td>
        <td>2.1 million</td>
      </tr>
    </tbody>
  </table>
</div>

Tabelle mit klebrigen (angehefteten) Kopfzeilen

A
Apple
Apricot
Avocado
B
Banana
Blackberry
Blueberry
C
Cherry
Coconut
Cranberry
D
Date
Dragon Fruit
G
Grape
Guava
K
Kiwi
M
Mango
Melon
O
Orange
P
Papaya
Pineapple
Pomegranate
S
Strawberry
W
Watermelon
html 
 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
<div class="h-96 overflow-x-auto">
  <table class="table table-pin-rows">
    <thead>
      <tr><th>A</th></tr>
    </thead>
    <tbody>
      <tr><td>Apple</td></tr>
      <tr><td>Apricot</td></tr>
      <tr><td>Avocado</td></tr>
    </tbody>

    <thead>
      <tr><th>B</th></tr>
    </thead>
    <tbody>
      <tr><td>Banana</td></tr>
      <tr><td>Blackberry</td></tr>
      <tr><td>Blueberry</td></tr>
    </tbody>

    <thead>
      <tr><th>C</th></tr>
    </thead>
    <tbody>
      <tr><td>Cherry</td></tr>
      <tr><td>Coconut</td></tr>
      <tr><td>Cranberry</td></tr>
    </tbody>

    <thead>
      <tr><th>D</th></tr>
    </thead>
    <tbody>
      <tr><td>Date</td></tr>
      <tr><td>Dragon Fruit</td></tr>
    </tbody>

    <thead>
      <tr><th>G</th></tr>
    </thead>
    <tbody>
      <tr><td>Grape</td></tr>
      <tr><td>Guava</td></tr>
    </tbody>

    <thead>
      <tr><th>K</th></tr>
    </thead>
    <tbody>
      <tr><td>Kiwi</td></tr>
    </tbody>

    <thead>
      <tr><th>M</th></tr>
    </thead>
    <tbody>
      <tr><td>Mango</td></tr>
      <tr><td>Melon</td></tr>
    </tbody>

    <thead>
      <tr><th>O</th></tr>
    </thead>
    <tbody>
      <tr><td>Orange</td></tr>
    </tbody>

    <thead>
      <tr><th>P</th></tr>
    </thead>
    <tbody>
      <tr><td>Papaya</td></tr>
      <tr><td>Pineapple</td></tr>
      <tr><td>Pomegranate</td></tr>
    </tbody>

    <thead>
      <tr><th>S</th></tr>
    </thead>
    <tbody>
      <tr><td>Strawberry</td></tr>
    </tbody>

    <thead>
      <tr><th>W</th></tr>
    </thead>
    <tbody>
      <tr><td>Watermelon</td></tr>
    </tbody>
  </table>
</div>

Tabelle mit festen (angehefteten) Spalten, horizontaler Bildlauf

# Framework Type Maintained By Learning Curve First Release Popularity Rank
1 React Library Meta Medium 2013 Very High 1
2 Angular Framework Google High 2016 High 2
3 Vue Framework Open Source Low 2014 High 3
4 Svelte Compiler Open Source Low 2016 Medium 4
5 Next.js Framework Vercel Medium 2016 Very High 5
6 Nuxt Framework Open Source Medium 2016 Medium 6
7 SolidJS Library Open Source Medium 2020 Growing 7
8 Ember Framework Open Source High 2011 Low 8
9 Backbone Library Open Source Medium 2010 Low 9
10 Alpine.js Library Open Source Very Low 2019 Medium 10
11 Preact Library Open Source Low 2015 Medium 11
12 Lit Library Google Low 2018 Growing 12
13 Meteor Framework Open Source Medium 2012 Low 13
14 Aurelia Framework Open Source Medium 2016 Low 14
15 Qwik Framework Builder.io Medium 2022 Growing 15
16 Fresh Framework Deno Low 2022 Growing 16
17 Remix Framework Shopify Medium 2021 High 17
18 Astro Framework Open Source Low 2021 High 18
19 Marko Framework eBay Medium 2014 Low 19
20 Inferno Library Open Source Medium 2016 Low 20
# Framework Type Maintained By Learning Curve First Release Popularity Rank
html 
  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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<div class="overflow-x-auto w-96">
    <table class="table table-xs table-pin-cols">
        <thead>
            <tr>
                <th>#</th>
                <td>Framework</td>
                <td>Type</td>
                <td>Maintained By</td>
                <td>Learning Curve</td>
                <td>First Release</td>
                <td>Popularity</td>
                <th>Rank</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <td>React</td>
                <td>Library</td>
                <td>Meta</td>
                <td>Medium</td>
                <td>2013</td>
                <td>Very High</td>
                <th>1</th>
            </tr>
            <tr>
                <th>2</th>
                <td>Angular</td>
                <td>Framework</td>
                <td>Google</td>
                <td>High</td>
                <td>2016</td>
                <td>High</td>
                <th>2</th>
            </tr>
            <tr>
                <th>3</th>
                <td>Vue</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>Low</td>
                <td>2014</td>
                <td>High</td>
                <th>3</th>
            </tr>
            <tr>
                <th>4</th>
                <td>Svelte</td>
                <td>Compiler</td>
                <td>Open Source</td>
                <td>Low</td>
                <td>2016</td>
                <td>Medium</td>
                <th>4</th>
            </tr>
            <tr>
                <th>5</th>
                <td>Next.js</td>
                <td>Framework</td>
                <td>Vercel</td>
                <td>Medium</td>
                <td>2016</td>
                <td>Very High</td>
                <th>5</th>
            </tr>
            <tr>
                <th>6</th>
                <td>Nuxt</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2016</td>
                <td>Medium</td>
                <th>6</th>
            </tr>
            <tr>
                <th>7</th>
                <td>SolidJS</td>
                <td>Library</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2020</td>
                <td>Growing</td>
                <th>7</th>
            </tr>
            <tr>
                <th>8</th>
                <td>Ember</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>High</td>
                <td>2011</td>
                <td>Low</td>
                <th>8</th>
            </tr>
            <tr>
                <th>9</th>
                <td>Backbone</td>
                <td>Library</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2010</td>
                <td>Low</td>
                <th>9</th>
            </tr>
            <tr>
                <th>10</th>
                <td>Alpine.js</td>
                <td>Library</td>
                <td>Open Source</td>
                <td>Very Low</td>
                <td>2019</td>
                <td>Medium</td>
                <th>10</th>
            </tr>
            <tr>
                <th>11</th>
                <td>Preact</td>
                <td>Library</td>
                <td>Open Source</td>
                <td>Low</td>
                <td>2015</td>
                <td>Medium</td>
                <th>11</th>
            </tr>
            <tr>
                <th>12</th>
                <td>Lit</td>
                <td>Library</td>
                <td>Google</td>
                <td>Low</td>
                <td>2018</td>
                <td>Growing</td>
                <th>12</th>
            </tr>
            <tr>
                <th>13</th>
                <td>Meteor</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2012</td>
                <td>Low</td>
                <th>13</th>
            </tr>
            <tr>
                <th>14</th>
                <td>Aurelia</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2016</td>
                <td>Low</td>
                <th>14</th>
            </tr>
            <tr>
                <th>15</th>
                <td>Qwik</td>
                <td>Framework</td>
                <td>Builder.io</td>
                <td>Medium</td>
                <td>2022</td>
                <td>Growing</td>
                <th>15</th>
            </tr>
            <tr>
                <th>16</th>
                <td>Fresh</td>
                <td>Framework</td>
                <td>Deno</td>
                <td>Low</td>
                <td>2022</td>
                <td>Growing</td>
                <th>16</th>
            </tr>
            <tr>
                <th>17</th>
                <td>Remix</td>
                <td>Framework</td>
                <td>Shopify</td>
                <td>Medium</td>
                <td>2021</td>
                <td>High</td>
                <th>17</th>
            </tr>
            <tr>
                <th>18</th>
                <td>Astro</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>Low</td>
                <td>2021</td>
                <td>High</td>
                <th>18</th>
            </tr>
            <tr>
                <th>19</th>
                <td>Marko</td>
                <td>Framework</td>
                <td>eBay</td>
                <td>Medium</td>
                <td>2014</td>
                <td>Low</td>
                <th>19</th>
            </tr>
            <tr>
                <th>20</th>
                <td>Inferno</td>
                <td>Library</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2016</td>
                <td>Low</td>
                <th>20</th>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>#</th>
                <td>Framework</td>
                <td>Type</td>
                <td>Maintained By</td>
                <td>Learning Curve</td>
                <td>First Release</td>
                <td>Popularity</td>
                <th>Rank</th>
            </tr>
        </tfoot>
    </table>
</div>

Tabelle mit angehefteten Spalten und Zeilen

# Framework Type Maintained By Learning Curve First Release Popularity Rank
1 React Library Meta Medium 2013 Very High 1
2 Angular Framework Google High 2016 High 2
3 Vue Framework Open Source Low 2014 High 3
4 Svelte Compiler Open Source Low 2016 Medium 4
5 Next.js Framework Vercel Medium 2016 Very High 5
6 Nuxt Framework Open Source Medium 2016 Medium 6
7 SolidJS Library Open Source Medium 2020 Growing 7
8 Ember Framework Open Source High 2011 Low 8
9 Backbone Library Open Source Medium 2010 Low 9
10 Alpine.js Library Open Source Very Low 2019 Medium 10
11 Preact Library Open Source Low 2015 Medium 11
12 Lit Library Google Low 2018 Growing 12
13 Meteor Framework Open Source Medium 2012 Low 13
14 Aurelia Framework Open Source Medium 2016 Low 14
15 Qwik Framework Builder.io Medium 2022 Growing 15
16 Fresh Framework Deno Low 2022 Growing 16
17 Remix Framework Shopify Medium 2021 High 17
18 Astro Framework Open Source Low 2021 High 18
19 Marko Framework eBay Medium 2014 Low 19
20 Inferno Library Open Source Medium 2016 Low 20
# Framework Type Maintained By Learning Curve First Release Popularity Rank
html 
  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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<div class="overflow-x-auto h-96 w-96">
    <table class="table table-xs table-pin-rows table-pin-cols">
        <thead>
            <tr>
                <th>#</th>
                <td>Framework</td>
                <td>Type</td>
                <td>Maintained By</td>
                <td>Learning Curve</td>
                <td>First Release</td>
                <td>Popularity</td>
                <th>Rank</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <td>React</td>
                <td>Library</td>
                <td>Meta</td>
                <td>Medium</td>
                <td>2013</td>
                <td>Very High</td>
                <th>1</th>
            </tr>
            <tr>
                <th>2</th>
                <td>Angular</td>
                <td>Framework</td>
                <td>Google</td>
                <td>High</td>
                <td>2016</td>
                <td>High</td>
                <th>2</th>
            </tr>
            <tr>
                <th>3</th>
                <td>Vue</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>Low</td>
                <td>2014</td>
                <td>High</td>
                <th>3</th>
            </tr>
            <tr>
                <th>4</th>
                <td>Svelte</td>
                <td>Compiler</td>
                <td>Open Source</td>
                <td>Low</td>
                <td>2016</td>
                <td>Medium</td>
                <th>4</th>
            </tr>
            <tr>
                <th>5</th>
                <td>Next.js</td>
                <td>Framework</td>
                <td>Vercel</td>
                <td>Medium</td>
                <td>2016</td>
                <td>Very High</td>
                <th>5</th>
            </tr>
            <tr>
                <th>6</th>
                <td>Nuxt</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2016</td>
                <td>Medium</td>
                <th>6</th>
            </tr>
            <tr>
                <th>7</th>
                <td>SolidJS</td>
                <td>Library</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2020</td>
                <td>Growing</td>
                <th>7</th>
            </tr>
            <tr>
                <th>8</th>
                <td>Ember</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>High</td>
                <td>2011</td>
                <td>Low</td>
                <th>8</th>
            </tr>
            <tr>
                <th>9</th>
                <td>Backbone</td>
                <td>Library</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2010</td>
                <td>Low</td>
                <th>9</th>
            </tr>
            <tr>
                <th>10</th>
                <td>Alpine.js</td>
                <td>Library</td>
                <td>Open Source</td>
                <td>Very Low</td>
                <td>2019</td>
                <td>Medium</td>
                <th>10</th>
            </tr>
            <tr>
                <th>11</th>
                <td>Preact</td>
                <td>Library</td>
                <td>Open Source</td>
                <td>Low</td>
                <td>2015</td>
                <td>Medium</td>
                <th>11</th>
            </tr>
            <tr>
                <th>12</th>
                <td>Lit</td>
                <td>Library</td>
                <td>Google</td>
                <td>Low</td>
                <td>2018</td>
                <td>Growing</td>
                <th>12</th>
            </tr>
            <tr>
                <th>13</th>
                <td>Meteor</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2012</td>
                <td>Low</td>
                <th>13</th>
            </tr>
            <tr>
                <th>14</th>
                <td>Aurelia</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2016</td>
                <td>Low</td>
                <th>14</th>
            </tr>
            <tr>
                <th>15</th>
                <td>Qwik</td>
                <td>Framework</td>
                <td>Builder.io</td>
                <td>Medium</td>
                <td>2022</td>
                <td>Growing</td>
                <th>15</th>
            </tr>
            <tr>
                <th>16</th>
                <td>Fresh</td>
                <td>Framework</td>
                <td>Deno</td>
                <td>Low</td>
                <td>2022</td>
                <td>Growing</td>
                <th>16</th>
            </tr>
            <tr>
                <th>17</th>
                <td>Remix</td>
                <td>Framework</td>
                <td>Shopify</td>
                <td>Medium</td>
                <td>2021</td>
                <td>High</td>
                <th>17</th>
            </tr>
            <tr>
                <th>18</th>
                <td>Astro</td>
                <td>Framework</td>
                <td>Open Source</td>
                <td>Low</td>
                <td>2021</td>
                <td>High</td>
                <th>18</th>
            </tr>
            <tr>
                <th>19</th>
                <td>Marko</td>
                <td>Framework</td>
                <td>eBay</td>
                <td>Medium</td>
                <td>2014</td>
                <td>Low</td>
                <th>19</th>
            </tr>
            <tr>
                <th>20</th>
                <td>Inferno</td>
                <td>Library</td>
                <td>Open Source</td>
                <td>Medium</td>
                <td>2016</td>
                <td>Low</td>
                <th>20</th>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>#</th>
                <td>Framework</td>
                <td>Type</td>
                <td>Maintained By</td>
                <td>Learning Curve</td>
                <td>First Release</td>
                <td>Popularity</td>
                <th>Rank</th>
            </tr>
        </tfoot>
    </table>
</div>

Tabelle mit Checkbox-Auswahl

Project Category Primary Tech
Landing Page Redesign
Production
 Frontend UI / UX Tailwind CSS
Auth API Service
Backend
 API Authentication Node.js
E-commerce Dashboard
Internal Tool
 Full Stack Admin Panel Next.js
CI Pipeline
Infrastructure
 DevOps Automation GitHub Actions
Project Category Primary Tech
html 
  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
117
118
119
120
121
122
123
124
125
126
<div class="overflow-x-auto w-full">
  <table class="table">
    <!-- head -->
    <thead>
      <tr>
        <th>
          <label>
            <input type="checkbox" class="checkbox">
          </label>
        </th>
        <th>Project</th>
        <th>Category</th>
        <th>Primary Tech</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <!-- row 1 -->
      <tr>
        <th>
          <label>
            <input type="checkbox" class="checkbox">
          </label>
        </th>
        <td>
          <div>
            <div class="font-bold">Landing Page Redesign</div>
            <div class="text-sm opacity-50">Production</div>
          </div>
        </td>
        <td>
          Frontend
          
          <span class="badge badge-soft badge-sm">UI / UX</span>
        </td>
        <td>Tailwind CSS</td>
        <th>
          <button class="btn btn-primary btn-xs">details</button>
        </th>
      </tr>

      <!-- row 2 -->
      <tr>
        <th>
          <label>
            <input type="checkbox" class="checkbox">
          </label>
        </th>
        <td>
          <div>
            <div class="font-bold">Auth API Service</div>
            <div class="text-sm opacity-50">Backend</div>
          </div>
        </td>
        <td>
          API
          
          <span class="badge badge-soft badge-sm">Authentication</span>
        </td>
        <td>Node.js</td>
        <th>
          <button class="btn btn-primary btn-xs">details</button>
        </th>
      </tr>

      <!-- row 3 -->
      <tr>
        <th>
          <label>
            <input type="checkbox" class="checkbox">
          </label>
        </th>
        <td>
          <div>
            <div class="font-bold">E-commerce Dashboard</div>
            <div class="text-sm opacity-50">Internal Tool</div>
          </div>
        </td>
        <td>
          Full Stack
          
          <span class="badge badge-soft badge-sm">Admin Panel</span>
        </td>
        <td>Next.js</td>
        <th>
          <button class="btn btn-primary btn-xs">details</button>
        </th>
      </tr>

      <!-- row 4 -->
      <tr>
        <th>
          <label>
            <input type="checkbox" class="checkbox">
          </label>
        </th>
        <td>
          <div>
            <div class="font-bold">CI Pipeline</div>
            <div class="text-sm opacity-50">Infrastructure</div>
          </div>
        </td>
        <td>
          DevOps
          
          <span class="badge badge-soft badge-sm">Automation</span>
        </td>
        <td>GitHub Actions</td>
        <th>
          <button class="btn btn-primary btn-xs">details</button>
        </th>
      </tr>
    </tbody>

    <!-- foot -->
    <tfoot>
      <tr>
        <th></th>
        <th>Project</th>
        <th>Category</th>
        <th>Primary Tech</th>
        <th></th>
      </tr>
    </tfoot>
  </table>
</div>

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Tisch-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP