Machinetix

Generador de Tablas HTML

Crea tablas HTML responsive con estilos personalizables y obtén el código listo para usar.

Configuración

Vista Previa

Header 1Header 2Header 3
Cell 1-1Cell 1-2Cell 1-3
Cell 2-1Cell 2-2Cell 2-3
Cell 3-1Cell 3-2Cell 3-3

HTML

<div class="table-responsive">
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell 1-1</td>
        <td>Cell 1-2</td>
        <td>Cell 1-3</td>
      </tr>
      <tr>
        <td>Cell 2-1</td>
        <td>Cell 2-2</td>
        <td>Cell 2-3</td>
      </tr>
      <tr>
        <td>Cell 3-1</td>
        <td>Cell 3-2</td>
        <td>Cell 3-3</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.table th,
.table td {
  padding: 0.75rem;
  text-align: left;
}

.table-bordered {
  border: 1px solid #dee2e6;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #dee2e6;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

.table-hover tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .table-responsive {
    width: 100%;
  }
}