Generate styled HTML tables with CSS
Table Style
Colors
Spacing & Borders
Options
Preview
| Name | Role | Status | |
|---|---|---|---|
| John Doe | john@example.com | Developer | Active |
| Jane Smith | jane@example.com | Designer | Active |
| Bob Johnson | bob@example.com | Manager | Inactive |
| Alice Brown | alice@example.com | Developer | Active |
| Charlie Wilson | charlie@example.com | Designer | Active |
CSS
.table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.table th {
background-color: #f3f4f6;
color: #111827;
padding: 12px;
text-align: left;
font-weight: 600;
border-bottom: 1px solid #e5e7eb;
}
.table td {
padding: 12px;
color: #374151;
}
.table tbody tr {
background-color: #ffffff;
transition: background-color 150ms ease;
}
.table tbody tr:nth-child(even) {
background-color: #f9fafb;
}
.table tbody tr:hover {
background-color: #f3f4f6;
}HTML Structure
<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
</table>