Título tabla HTML inferior

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.

...

Datos Demográficos

	
País
	
Capital
	
Superficie
	
Habitantes

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:

caption {
    caption-side: bottom;
}

Publicaciones relacionadas:

Color de una celda en HTML Color de una fila HTML Colapsar bordes en una tabla HTML Color a las columnas de una tabla con CSS Espaciar contenido en una tabla con CSS