HTML Table Generator: Create Tables Easily

HTML tables are fundamental for displaying tabular data on the web.

HTML Table Structure

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Footer</td>
    </tr>
  </tfoot>
</table>

Table Elements

Element	Purpose
table	Container
thead	Header section
tbody	Body section
tfoot	Footer section
tr	Table row
th	Header cell
td	Data cell

Table Attributes

Spanning Cells

<td colspan="2">Spans 2 columns</td>
<td rowspan="3">Spans 3 rows</td>

Accessibility

<table>
  <caption>Employee Directory</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">John</th>
      <td>Developer</td>
    </tr>
  </tbody>
</table>

CSS Styling

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

th {
  background-color: #4CAF50;
  color: white;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #ddd;
}

Responsive Tables

.table-container {
  overflow-x: auto;
}

@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  td {
    padding-left: 50%;
    position: relative;
  }

  td:before {
    content: attr(data-label);
    position: absolute;
    left: 6px;
    font-weight: bold;
  }
}

Best Practices

• Use semantic table elements (thead, tbody, tfoot)
• Add scope attributes for accessibility
• Include a caption for context
• Make tables responsive
• Use CSS for styling

Try Our Table Tools

• HTML Table Generator - Create tables visually
• CSV to JSON - Convert CSV data
• JSON to CSV - Export to CSV

Conclusion

HTML tables remain essential for displaying tabular data. With proper structure and responsive design, tables provide excellent user experience.