Last updated
Basic HTML Table Structure
The HTML Table Generator creates properly structured, accessible tables. Here is the correct semantic markup for a data table:
<table class="data-table">
<caption>Q1 2024 Sales Report</caption>
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Units Sold</th>
<th scope="col">Revenue</th>
<th scope="col">Growth</th>
</tr>
</thead>
<tbody>
<tr>
<td>Widget Pro</td>
<td>1,240</td>
<td>$62,000</td>
<td>+12%</td>
</tr>
<tr>
<td>Widget Lite</td>
<td>3,890</td>
<td>$38,900</td>
<td>+5%</td>
</tr>
<tr>
<td>Widget Max</td>
<td>420</td>
<td>$84,000</td>
<td>+28%</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td>5,550</td>
<td>$184,900</td>
<td>+14%</td>
</tr>
</tfoot>
</table>The scope attribute on th elements tells screen readers whether a header applies to a column or row, which is essential for accessibility.
Striped Table with CSS Styling
The generator produces CSS alongside the HTML for common table styles like striped rows and hover effects:
<table class="data-table">
<!-- table content here -->
</table>Responsive Table for Mobile
Wide tables need special handling on small screens. The generator creates a responsive wrapper with horizontal scrolling:
<!-- Responsive table with scroll container -->
<div class="table-responsive" role="region" aria-label="Sales data" tabindex="0">
<table class="data-table">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Customer</th>
<th scope="col">Product</th>
<th scope="col">Quantity</th>
<th scope="col">Unit Price</th>
<th scope="col">Total</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>2024-01-15</td>
<td>Acme Corp</td>
<td>Widget Pro</td>
<td>50</td>
<td>$50.00</td>
<td>$2,500.00</td>
<td>Shipped</td>
</tr>
</tbody>
</table>
Table with Colspan and Rowspan
Complex tables use merged cells for grouped headers and data. The generator handles colspan and rowspan correctly:
<!-- Comparison table with merged headers -->
<table class="data-table comparison-table">
<caption>Plan Comparison</caption>
<thead>
<tr>
<th scope="col" rowspan="2">Feature</th>
<th scope="colgroup" colspan="3">Plans</th>
</tr>
<tr>
<th scope="col">Basic</th>
<th scope="col">Pro</th>
<th scope="col">Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Storage</th>
<td>5 GB</td>
<td>50 GB</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">Users</th>
<td>1</td>
<td>10</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">Support</th>
<td>Email</td>
<td colspan="2">Priority 24/7</td>
</tr>
<tr>
<th scope="row">Price/month</th>
<td>$9</td>
<td>$29</td>
<td>$99</td>
</tr>
</tbody>
</table>Sortable Table with JavaScript
The generator can produce tables with clickable column headers for client-side sorting:
<table id="sortable-table" class="data-table">
<thead>
<tr>
<th scope="col" data-sort="name" aria-sort="none">
Name <span aria-hidden="true">↕</span>
</th>
<th scope="col" data-sort="age" aria-sort="none">
Age <span aria-hidden="true">↕</span>
</th>
<th scope="col" data-sort="score" aria-sort="none">
Score <span aria-hidden="true">↕</span>
</th>
</tr>
</thead>
<tbody>
<tr><td>Alice</td><td>28</td><td>95</td></tr>
<tr><td>Bob</td><td>34</td><td>82</td></tr>
<tr><td>Carol</td><td>22</td><td>91</td></tr>
</tbody>
</table>
Importing CSV Data into a Table
The generator converts CSV data directly into HTML table markup:
/* CSV input */
Name,Department,Salary,Start Date
Alice Johnson,Engineering,$95000,2021-03-15
Bob Smith,Marketing,$72000,2020-08-01
Carol White,Design,$85000,2022-01-10
/* Generated HTML table */
<table class="data-table">
<caption>Employee Data</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Department</th>
<th scope="col">Salary</th>
<th scope="col">Start Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice Johnson</td>
<td>Engineering</td>
<td>$95,000</td>
<td>2021-03-15</td>
</tr>
<tr>
<td>Bob Smith</td>
<td>Marketing</td>
<td>$72,000</td>
<td>2020-08-01</td>
</tr>
<tr>
<td>Carol White</td>
<td>Design</td>
<td>$85,000</td>
<td>2022-01-10</td>
</tr>
</tbody>
</table>