Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Table Component

CSS-only Tailwind CSS table with zebra striping, compact and default sizes, pinned columns, and row hover states. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Các thành phần bảng sắp xếp và hiển thị dữ liệu có cấu trúc theo hàng và cột. Được xây dựng bằng các thành phần bảng HTML ngữ nghĩa và kiểu CSS Tailwind, các bảng hỗ trợ sắp xếp, hàng sọc, hiệu ứng di chuột và xử lý tràn phản hồi. Hệ thống bảng Frutjam có thể truy cập được bằng các liên kết tiêu đề phù hợp và hoạt động liền mạch với các khung trực quan hóa dữ liệu.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Lớp học Kiểu Sự miêu tả
tableCăn cứBảng HTML được tạo kiểu với khoảng cách nhất quán
table-zebraPhong cáchMàu nền hàng xen kẽ
table-zebra-rowsPhong cáchNền hàng xen kẽ chỉ trên các hàng tbody
table-zebra-colsPhong cáchMàu nền cột xen kẽ
table-hoverPhong cáchĐánh dấu các hàng khi di chuột
table-pin-rowsCông cụ sửa đổiDán các hàng đầu trang và chân trang trong khi cuộn
table-pin-colsCông cụ sửa đổiDán cột đầu tiên và cuối cùng trong khi cuộn
table-xsKích cỡKhoảng đệm hàng cực nhỏ
table-smKích cỡĐệm hàng nhỏ
table-mdKích cỡKhoảng đệm hàng trung bình (mặc định)
table-lgKích cỡĐệm hàng lớn
table-xlKích cỡKhoảng đệm hàng cực lớn

Bàn

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>

Kích thước bàn

Bảng cực nhỏ (table-xs)

Trong ví dụ về kích thước bảng bên dưới, chúng tôi sử dụng table-xs (cực nhỏ). Bạn có thể điều chỉnh kích thước bảng bằng cách sử dụng các lớp tiện ích table-{size}, bao gồm table-xs, table-sm, table-md, table-lg và table-xl, từ các bố cục siêu nhỏ gọn đến các bảng rộng rãi hơn, dễ đọc hơn.

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>

Bảng ngựa vằn (sọc) hàng

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>

Bảng cột ngựa vằn (sọc)

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>

Hàng đánh dấu bảng khi di chuột

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>

Bảng có các hàng tiêu đề dính (được ghim)

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>

Bảng cố định (được ghim) cột cuộn ngang

# 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>

Các hàng cột được ghim trong bảng

# 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>

Bảng có lựa chọn Hộp kiểm

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>