SpeedDrain
Interactive Editor · Accessible Markup · Instant CSS

HTML Table Generator

Build semantic, responsive HTML tables visually. Tweak row borders, cell spacing, alternating stripes, and copy pristine HTML and CSS directly.

Presets:
Plan Feature Matrix
#
1
2
3
4
5
<style>
.table-responsive {
  overflow-x: auto;
  width: 100%;
}
.custom-table {
  width: 100%;
  border-collapse: collapse;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  text-align: left;
  border: 1px solid #e5e7eb;
}
.custom-table th,
.custom-table td {
  padding: 12px 16px;
  border: 1px solid #e5e7eb;
}
.custom-table thead th {
  background-color: #f9fafb;
  font-weight: 600;
  color: #111827;
}
.custom-table tbody tr:nth-child(even) {
  background-color: #f9fafb;
}
.custom-table tbody tr:hover {
  background-color: #f3f4f6;
}
.custom-table-caption {
  padding-bottom: 8px;
  font-weight: 600;
  text-align: left;
}
</style>

<div class="table-responsive">
<table class="custom-table">
  <caption className="custom-table-caption">Plan Feature Matrix</caption>
  <thead>
    <tr>
    <th>Feature</th>
    <th>Starter</th>
    <th>Professional</th>
    <th>Enterprise</th>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td>Monthly Price</td>
    <td>$0</td>
    <td>$29</td>
    <td>$99</td>
  </tr>
  <tr>
    <td>Active Projects</td>
    <td>3</td>
    <td>Unlimited</td>
    <td>Unlimited</td>
  </tr>
  <tr>
    <td>Storage Limit</td>
    <td>5 GB</td>
    <td>100 GB</td>
    <td>10 TB</td>
  </tr>
  <tr>
    <td>API Rate Limit</td>
    <td>100 req/min</td>
    <td>5,000 req/min</td>
    <td>Dedicated SLA</td>
  </tr>
  <tr>
    <td>Priority Support</td>
    <td>No</td>
    <td>Email</td>
    <td>24/7 Phone & Slack</td>
  </tr>
  </tbody>
</table>
</div>

Semantic & Accessible HTML Tables

Semantic Structure: thead, tbody, and caption

Screen readers and assistive software rely on semantic HTML elements to announce tabular data accurately:

  • <caption> provides an accessible title describing the table content for vision-impaired users.
  • <thead> and <th> associate column descriptors with each row value.
  • Always avoid using tables for page layouts—tables should strictly represent relational structured datasets.

Mobile Responsive Table Strategies

Wide tables often overflow smaller mobile viewports. Standard responsive solutions include:

  • Horizontal Scrolling Container: Wrapping the table in a <div style="overflow-x: auto"> prevents breaking layout bounds.
  • Border Collapse: Using border-collapse: collapse; ensures crisp single-pixel divider lines across modern browsers.