The generator emits plain semantic markup with no inline styles. Pair it with your framework of choice by passing the appropriate class string into the optional CSS class field.
Tailwind CSS
<!-- CSS class: "min-w-full divide-y divide-gray-200" -->
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase">Name</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium uppercase">Email</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
<tr><td class="px-6 py-4">Ada</td><td class="px-6 py-4">ada@example.com</td></tr>
</tbody>
</table>
Bootstrap 5
<!-- CSS class: "table table-striped table-hover" -->
<table class="table table-striped table-hover">
<thead><tr><th scope="col">Name</th><th scope="col">Email</th></tr></thead>
<tbody><tr><td>Ada</td><td>ada@example.com</td></tr></tbody>
</table>
Plain CSS (no framework)
/* CSS class: "data-table" — drop in your stylesheet */
.data-table { border-collapse: collapse; width: 100%; }
.data-table th, .data-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #e5e7eb; }
.data-table thead { background: #f9fafb; }
.data-table tbody tr:nth-child(even) { background: #fafafa; }