CSS: Modelo tabular

CSS permite modificar el comportamiento de los elementos HTML para que se comporten de forma similar a una tabla de datos. A la vez, es posible indicar que los elementos contenidos en la tabla actúen como si fueran celdas. Una tabla se crea con la propiedad display y los valores table o inline-table.

Este método de diseño permite organizar elementos de manera tabular, también conocido como modelo tabular. Puede ser usado para representar datos tabulares y diseñar formularios web, ya que facilita la alineación vertical. El resultado es similar al de las cajas flexibles (flex) o las cuadrículas (grid).

Para diseños más complejos es recomendable usar las cuadrículas.

La época de la maquetación web mediante tablas HTML ya forma parte del pasado, y el uso de las tablas quedó para presentar datos de forma tabulada. Sin embargo, el modelo tabular que proporciona CSS puede ser útil para crear estructuras tabulares a partir de otros elementos HTML, respetando su semántica.

Es importante recalcar que esta característica fue introducida en CSS 2.1, lo que significa que su soporte en los navegadores web es mucho mayor que los métodos de diseño referentes a las cajas flexibles y las cuadrículas.

Conceptos básicos

A partir de una serie de valores de la propiedad display es posible recrear todos los elementos HTML que componen un tabla de datos. Por eso, antes de empezar a trabajar con el modelo tabular es importante tener clara la estructura de una tabla HTML. En general, el contenido se distribuye en filas y columnas.

Esta es la estructura mínima de una tabla HTML:

<table>
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
    <td>Celda 3</td>
  </tr>
  <tr>
    <td>Celda 4</td>
    <td>Celda 5</td>
    <td>Celda 6</td>
  </tr>
</table>

Sin embargo, hay muchos más elementos que pueden formar parte de una tabla. Por ejemplo, se puede dividir en tres partes: cabecera (<thead>), cuerpo (<tbody>) y pie (<tfoot>). También se puede incluir un título (<caption>).

Mientras que en HTML, una tabla se crea con el elemento <table>, en CSS se usa la propiedad display con el valor table. Para crear una fila, en HTML se usa el elemento <tr>, pero en CSS se emplea el valor table-row. A continuación se muestra una tabla con todas las equivalencias entre HTML y CSS.

Tipos de contenedores de tabla

Existe dos tipos de contenedores tabulares en CSS: los que son de bloque y los que son de línea. Los dos tipos de contenedores se definen a través de los dos valores comentados para la propiedad de visualización display:

Usando el valor table, el contenedor se comportará como si fuera una tabla, ocupando el ancho completo disponible. Esto significa que se ubicará en una nueva línea y la ocupará hasta el final; como si fuera un elemento <div>.

En cambio, el valor inline-table permite crear un contenedor tabular en el que la tabla se comportará como si fuera un elemento de línea, ocupando en este caso el mínimo espacio horizontal, como si fuera un elemento <span>.

Definir filas y celdas

Cuando ya tenemos un elemento contenedor (padre) que está definido como tabla (table), el siguiente paso es anidar elementos HTML para que se comporten como filas y como columnas (celdas). Visualmente, hay que pensar en la estructura de una tabla HTML y tratar de recrearla de forma lógica y coherente.

Esto implica que las filas serán elementos hijos directos del contenedor tabular. Estos elementos deben tener el valor table-row para que se comporten como filas (<tr>). Siguiendo esta estructura, las columnas (celda) serán elementos hijos directos de las filas y por tanto deben tener el valor table-cell. Las celda se comportarán como si fueran los elementos <th> o <td>.

Del mismo modo que en una tabla HTML se puede introducir celdas de forma directa (sin filas), con el modelo tabular también se puede hacer.

Vamos a crear una estructura tabular con elementos HTML semánticos. Por ejemplo: usaremos <section>, <article> y <div>.

Código HTML:

<section class="contenedor">
  <article>
    <div>Celda 1</div>
    <div>Celda 2</div>
    <div>Celda 3</div>
  </article>
  <article>
    <div>Celda 4</div>
    <div>Celda 5</div>
    <div>Celda 6</div>
  </article>
</section>

En el código CSS vamos indicamos que el elemento <section> debe comportarse como una tabla, que los elementos <article> sean filas y, finalmente, que los elementos <div> se comporten como si fueran las celdas.

Código CSS:

.contenedor {
  border: 1px solid #ff7f2a;
  border-spacing: 4px;
  display: inline-table;
}

.contenedor article {
  display: table-row;
}

.contenedor div {
  border: 1px solid #ff7f2a;
  display: table-cell;
  padding: 5px 10px;
}

Resultado:

En las tablas HTML no es posible aplicar márgenes a las celdas. Por lo tanto, el modelo tabular tampoco lo admite. En su lugar, se debe indicar la separación entre celdas mediante la propiedad border-spacing en el elemento contenedor. Se explica en el artículo para aplicar estilos CSS a las tablas.

Para que la propiedad border-spacing funcione, los bordes de las celdas no deben estar fusionados con la propiedad border-collapse.

Crear tablas más complejas

Más allá de las filas y las columnas (celdas), puede crearse tablas usando una estructura más compleja, en la que se agrupe las filas en cabecera, cuerpo y pie de tabla. También añadiremos un título de tabla. En este caso usaremos elementos <div> para estructurar todo el código HTML de la tabla.

Vamos a crear un inventario de líneas de código.

Código HTML:

<div class="super-tabla">
  <div class="titular">Líneas de código</div>
  <div class="cabecera">
    <div class="celda">Id</div>
    <div class="celda">Lenguaje</div>
    <div class="celda">Líneas</div>
  </div>
  <div class="cuerpo">
    <div class="fila">
      <div class="celda">1</div>
      <div class="celda">HTML</div>
      <div class="celda">115</div>
    </div>
    <div class="fila">
      <div class="celda">2</div>
      <div class="celda">CSS</div>
      <div class="celda">82</div>
    </div>
    <div class="fila">
      <div class="celda">3</div>
      <div class="celda">JS</div>
      <div class="celda">44</div>
    </div>
  </div>
  <div class="pie">
    <div class="celda">Total</div>
    <div class="celda"></div>
    <div class="celda">241</div>
  </div>
</div>

Código CSS:

.super-tabla {
  border-radius: 8px;
  border: 3px double #ff7f2a;
  box-shadow: 4px 4px 12px rgb(0 0 0 / 34%);
  box-sizing: border-box;
  display: table;
  margin-bottom: 1.625em;
  width: 100%;
}

.titular {
  color: teal;
  display: table-caption;
  font-weight: bold;
  text-align: center;
  padding-bottom: 8px;
}

.cabecera {
  background: rgba(0, 128, 128, .25);
  display: table-header-group;
  font-weight: bold;
}

.cuerpo {
  display: table-row-group;
}

.pie {
  background: rgba(255, 127, 42, .25);
  display: table-footer-group;
  font-weight: bold;
}

.fila {
  display: table-row;
}

.celda {
  display: table-cell;
  padding: 5px 8px;
}

Dando como resultado la tabla siguiente:

Tal y como se puede observar en este ejemplo, por encima de la tabla hay un título como si fuera un elemento <caption>. La primera fila de datos de la tabla es una cabecera, mientras que la última es un pie de tabla. Los datos se encuentran en el cuerpo, ubicado al centro.