Título tabla HTML inferior

03/Jun/2015 CSS

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


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D