ASCII World

HTML Table Generator

Build properly structured HTML tables by choosing the number of rows and columns, toggling header rows and captions, and selecting from four styling presets. The tool generates clean, semantic markup using thead, tbody, th with scope attributes, and proper nesting.

Preview

Header 1Header 2Header 3
Row 1, Col 1Row 1, Col 2Row 1, Col 3
Row 2, Col 1Row 2, Col 2Row 2, Col 3
Row 3, Col 1Row 3, Col 2Row 3, Col 3

Generated HTML

<table style="border-collapse: collapse; width: 100%;">
  <thead>
    <tr>
      <th scope="col" style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #f2f2f2;">Header 1</th>
      <th scope="col" style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #f2f2f2;">Header 2</th>
      <th scope="col" style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #f2f2f2;">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Row 1, Col 1</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Row 1, Col 2</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Row 1, Col 3</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Row 2, Col 1</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Row 2, Col 2</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Row 2, Col 3</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Row 3, Col 1</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Row 3, Col 2</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Row 3, Col 3</td>
    </tr>
  </tbody>
</table>

Statistics

Total cells: 9Characters: 1391Lines: 26

Frequently Asked Questions

What HTML elements make up a well-structured table?
A proper HTML table uses the <table> element as the container, <thead> for the header section, <tbody> for the data rows, <tr> for each row, <th> with scope="col" for header cells, and <td> for data cells. Adding a <caption> element provides an accessible title that screen readers announce before reading the table contents.
When should you use an HTML table instead of CSS grid or flexbox?
HTML tables are the correct choice for displaying tabular data where rows and columns have a meaningful relationship, such as spreadsheets, comparison charts, schedules, or statistical reports. CSS grid and flexbox should be used for page layout and visual arrangement. Using tables for layout is considered a legacy practice that harms accessibility because screen readers announce table structures differently than regular content.
How do you make HTML tables accessible?
Accessible tables include a <caption> describing the table purpose, <th> elements with scope attributes (scope="col" for column headers, scope="row" for row headers), and a logical reading order. For complex tables with multi-level headers, use the headers attribute on <td> elements to associate each cell with its relevant headers. Avoid using empty cells for spacing and ensure sufficient color contrast in styled tables.