Tables
Documentation and examples for opt-in styling of tables.
Default Tables
| Title |
Author |
Views |
| Intro to CSS |
Adam |
858 |
| A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design |
Adam |
112 |
| Intro to JavaScript |
Chris |
1,280 |
<!-- table -->
<table class="table-auto">
<thead class="bg-gray-100 border-t border-l border-r dark:bg-gray-900 dark:bg-opacity-40 dark:border-gray-700">
<tr>
<th class="px-4 py-3">Title</th>
<th class="px-4 py-3">Author</th>
<th class="px-4 py-3">Views</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">Intro to CSS</td>
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">Adam</td>
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">858</td>
</tr>
<tr>
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design</td>
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">Adam</td>
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">112</td>
</tr>
<tr>
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">Intro to JavaScript</td>
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">Chris</td>
<td class="border border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">1,280</td>
</tr>
</tbody>
</table>
Tables Hover
| Title |
Author |
Views |
| Intro to CSS |
Adam |
858 |
| A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design |
Adam |
112 |
| Intro to JavaScript |
Chris |
1,280 |
<!-- table hover -->
<table class="table-auto">
<thead class="border-b border-gray-400 dark:border-gray-600">
<tr>
<th class="px-4 py-3">Title</th>
<th class="px-4 py-3">Author</th>
<th class="px-4 py-3">Views</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-900 dark:hover:bg-opacity-40">
<td class="border-b border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">Intro to CSS</td>
<td class="border-b border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">Adam</td>
<td class="border-b border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">858</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-900 dark:hover:bg-opacity-40">
<td class="border-b border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design</td>
<td class="border-b border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">Adam</td>
<td class="border-b border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">112</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-900 dark:hover:bg-opacity-40">
<td class="border-b border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">Intro to JavaScript</td>
<td class="border-b border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">Chris</td>
<td class="border-b border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">1,280</td>
</tr>
</tbody>
</table>
Tables stripe
| Title |
Author |
Views |
| Intro to CSS |
Adam |
858 |
| A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design |
Adam |
112 |
| Intro to JavaScript |
Chris |
1,280 |
<!-- table stripe -->
<table class="table-auto">
<thead class="border-b border-gray-400 dark:border-gray-600">
<tr>
<th class="px-4 py-3">Title</th>
<th class="px-4 py-3">Author</th>
<th class="px-4 py-3">Views</th>
</tr>
</thead>
<tbody>
<tr class="bg-gray-100 dark:bg-gray-900 dark:bg-opacity-40">
<td class="border-b border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">Intro to CSS</td>
<td class="border-b border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">Adam</td>
<td class="border-b border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">858</td>
</tr>
<tr>
<td class="border-b border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design</td>
<td class="border-b border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">Adam</td>
<td class="border-b border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">112</td>
</tr>
<tr class="bg-gray-100 dark:bg-gray-900 dark:bg-opacity-40">
<td class="border-b border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">Intro to JavaScript</td>
<td class="border-b border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">Chris</td>
<td class="border-b border-gray-200 dark:border-gray-700 px-4 py-3 font-medium">1,280</td>
</tr>
</tbody>
</table>