Diseñar tablas HTML con CSS

Una breve guía para trabajar con tablas en CSS

En el pasado, las tablas se usaban mucho en CSS, ya que eran una de las únicas formas en que podíamos crear un diseño de página elegante.

Hoy en día, con Grid y Flexbox podemos volver a mover las tablas al trabajo para el que estaban destinadas: diseñar tablas.

Empecemos por el HTML. Esta es una tabla básica:

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Flavio</th>
      <td>36</td>
    </tr>
    <tr>
      <th scope="row">Roger</th>
      <td>7</td>
    </tr>
  </tbody>
</table>

Por defecto, no es muy atractivo. El navegador proporciona algunos estilos estándar, y eso es todo:

Podemos usar CSS para diseñar todos los elementos de la tabla, por supuesto.

Empecemos por la frontera. Una bonita frontera puede ser de gran ayuda.

Podemos aplicarlo en eltableelemento, y en los elementos internos también, comothytd:

table, th, td {
  border: 1px solid #333;
}

Si lo emparejamos con algún margen, obtenemos un buen resultado:

Una cosa común con las tablas es la capacidad de agregar un color a una fila y un color diferente a otra fila. Esto es posible usando el:nth-child(odd)o:nth-child(even)selector:

tbody tr:nth-child(odd) {
  background-color: #af47ff;
}

Esto nos da:

Si agregaborder-collapse: collapse;al elemento de la tabla, todos los bordes se contraen en uno:

Descarga mi gratisManual de CSS


Más tutoriales de CSS: