¿Cuál es la mejor manera de crear tablas HTML y cuáles son tus alternativas favoritas?

2 Los desafíos de las tablas HTML

Si bien las tablas HTML son fáciles de crear, también pueden plantear algunos desafíos cuando se trata de estilo, accesibilidad y capacidad de respuesta. Por ejemplo, es posible que desee agregar algunos colores, bordes, relleno o alineación a la tabla, pero las propiedades CSS predeterminadas para las tablas son limitadas y, a menudo, incoherentes entre los exploradores. Puede usar algunos trucos de CSS para superar estas limitaciones, como agregar clases, pseudoelementos o propiedades personalizadas a los elementos de la tabla, pero esto también puede hacer que el código sea más complejo y difícil de mantener. Otro desafío es hacer que su tabla sea accesible para los usuarios que dependen de lectores de pantalla u otras tecnologías de asistencia. Puede usar algunos atributos HTML, como scope, summary o aria-label, para proporcionar más información y contexto a la tabla, pero también debe probar la tabla con diferentes dispositivos y herramientas para asegurarse de que sea legible y comprensible. Finalmente, es posible que desee que su tabla responda a diferentes tamaños y orientaciones de pantalla, pero esto también puede ser complicado con las tablas HTML, ya que tienden a desbordarse o reducirse cuando cambia la ventana gráfica. Puede usar algunas técnicas CSS, como consultas multimedia, propiedades de desbordamiento o flexbox, para que su tabla se adapte a diferentes escenarios, pero también debe considerar cómo afecta esto a la usabilidad y el diseño de su tabla.

3 Las alternativas a las tablas HTML

Dados los desafíos de las tablas HTML, es posible que se pregunte si hay alguna alternativa que pueda ofrecer más flexibilidad, simplicidad o funcionalidad. La respuesta es sí, hay algunas opciones que puedes explorar, dependiendo de tus necesidades y preferencias. Una opción es usar un diseño de cuadrícula CSS, que le permite crear una cuadrícula de columnas y filas con más control sobre la alineación, el espaciado y el tamaño de sus elementos. Puede utilizar la propiedad display: grid y otras propiedades relacionadas con la cuadrícula para definir la cuadrícula y colocar los elementos dentro de ella. Este es un ejemplo de un diseño de cuadrícula CSS que imita una tabla:

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-gap: 10px;
  }
  .grid > div {
    padding: 10px;
    border: 1px solid black;
    text-align: center;
  }
  .grid > div:first-child {
    grid-column: span 3;
  }
  .grid > div:nth-child(2),
  .grid > div:nth-child(3),
  .grid > div:nth-child(4) {
    font-weight: bold;
    background-color: lightgray;
  }
</style>
<div class="grid">
  <div>Monthly sales report</div>
  <div>Product</div>
  <div>Quantity</div>
  <div>Price</div>
  <div>Shoes</div>
  <div>20</div>
  <div>$50</div>
  <div>Hats</div>
  <div>15</div>
  <div>$25</div>
  <div>Shirts</div>
  <div>10</div>
  <div>$30</div>
</div>        

<style>
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  li {
    padding: 10px;
    border: 1px solid black;
    text-align: center;
  }
  li > ul {
    display: flex;
    flex-direction: row;
  }
  li > ul > li {
    flex: 1;
  }
  li:first-child {
    font-weight: bold;
    background-color: lightgray;
  }
</style>
<ul>
  <li>Monthly sales report</li>
  <li>
    <ul>
      <li>Product</li>
      <li>Quantity</li>
      <li>Price</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>Shoes</li>
      <li>20</li>
      <li>$50</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>Hats</li>
      <li>15</li>
      <li>$25</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>Shirts</li>
      <li>10</li>
      <li>$30</li>
    </ul>
  </li>
</ul>        

Una tercera opción es usar un div HTML, que le permite crear un contenedor genérico para cualquier contenido. Puede usar las propiedades display: block o display: inline-block para controlar cómo se comportan y apilan los divs en la página, y usar otras propiedades CSS para darles estilo y posicionarlos. Este es un ejemplo de un div HTML que imita una tabla:

<style>
  .container {
    display: block;
    width: 100%;
  }
  .row {
    display: block;
    width: 100%;
  }
  .cell {
    display: inline-block;
    width: 33%;
    padding: 10px;
    border: 1px solid black;
    text-align: center;
  }
  .row:first-child > .cell {
    font-weight: bold;
    background-color: lightgray;
  }
</style>
<div class="container">
  <div class="row">
    <div class="cell">Monthly sales report</div>
  </div>
  <div class="row">
    <div class="cell">Product</div>
    <div class="cell">Quantity</div>
    <div class="cell">Price</div>
  </div>
  <div class="row">
    <div class="cell">Shoes</div>
    <div class="cell">20</div>
    <div class="cell">$50</div>
  </div>
  <div class="row">
    <div class="cell">Hats</div>
    <div class="cell">15</div>
    <div class="cell">$25</div>
  </div>
  <div class="row">
    <div class="cell">Shirts</div>
    <div class="cell">10</div>
    <div class="cell">$30</div>
  </div>
</div>