Tailwind CSS Table Components None
Table Product Price Category 1 Smartphone $699 Electronics 2 Wireless Headphones $150 Accessories 3 Laptop $1200 Electronics
Copy Code
<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>
Table sizes In the table size example below, we use table-xs (extra small). You can adjust the table size using the table-{size} utility classes, including table-xs, table-sm, table-md, table-lg, and table-xl, which range from extra-compact layouts to more spacious, readable tables.
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.
Copy Code
<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>
Table zebra (striped) rows City Country Population 1 Tokyo Japan 37.4 million 2 New York USA 8.4 million 3 Paris France 2.1 million
Copy Code
<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>
Table zebra (striped) columns City Country Population 1 Tokyo Japan 37.4 million 2 New York USA 8.4 million 3 Paris France 2.1 million
Copy Code
<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>
Table highlights row on hover 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
Copy Code
<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>
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
Copy Code
<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>
# 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
Copy Code
<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>
Table pinned columns rows # 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
Copy Code
<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>
Table with Checkbox selection Copy Code
<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>