Título tabla HTML inferior

03/Jun/2015 CSS Deja un comentario

El otro día veíamos como podía poner un título en tabla HTML mediante el elemento caption. En este ejemplo vamos a ver como tener un título tabla HTML inferior, es decir, que el título se vea después de la tabla.

Lo primero será poner el título tabla HTML mediante el elemento caption.

  1. <caption>Datos Demográficos</caption>
  2. <th>País</th>
  3. <th>Capital</th>
  4. <th>Superficie</th>
  5. <th>Habitantes</th>
  6. </tr>
  7. ...
  8. </table>

Hay que recordar que el elemento caption debe de ir justamente después del elemento table y que el texto corresponderá al título de la tabla.

Ahora vamos a ver cómo poner el título tabla HTML inferior y ello lo haremos mediante un estilo CSS y en concreto mediante el atributo caption-side. Al atributo caption-side podemos darle los valores "bottom" o "top", dependiendo de si lo queremos tener sobre la tabla o debajo de la tabla.

Así si queremos el título tabla HTML inferior deberemos de configurar las CSS de la siguiente forma:

  1. caption {
  2. caption-side: bottom;
  3. }

Vídeos sobre CSS


¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*