Título en tabla HTML

02/Jun/2015 HTML , Deja un comentario

En este ejemplo vamos a ver cómo podemos poner un título en tabla HTML. Para ello vamos a ver cómo podemos utilizar el elemento caption de HTML.

Lo primero será partir de una tabla. En este caso hemos escogido una tabla con datos demográficos.

  1. <th>País</th>
  2. <th>Capital</th>
  3. <th>Superficie</th>
  4. <th>Habitantes</th>
  5. </tr>
  6. <td>España</td>
  7. <td>Madrid</td>
  8. <td>504.645 km<sup>2</sup></td>
  9. <td>46,6 M</td>
  10. </tr>
  11.  
  12. <td>Italia</td>
  13. <td>Roma</td>
  14. <td>301.338 km<sup>2</sup></td>
  15. <td>60,7 M</td>
  16. </tr>
  17. </table>

Vemos que la estructura de la tabla es la normal, con su elemento table, con sus filas definidas mediante el elemento tr y las celdas ya sean de cabecera th o normales td.

Para poner el título en tabla HTML deberemos de añadir el elemento caption justamente después del elemento table. El elemento caption es un elemento con etiquetas de inicio y cierre que contendrá el texto representativo del título.

Es decir, el código HTML nos quedará de la siguiente forma:

  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>

Visualmente el título en tabla HTML se muestra centrado encima de la tabla. Si bien mediante CSS podremos ponerlo encima o debajo de la tabla (lo veremos en otro artículo) o modificar su representación visual.

En el ejemplo que hemos visto para poner el título en tabla HTML el resultado sería parecido a este:

Datos Demográficos
PaísCapitalSuperficieHabitantes
EspañaMadrid504.645 km246,6 M
ItaliaRoma301.338 km260,7 M
FranciaParís675.417 km266 M
GreciaAtenas131.990 km210,7 M
AlemaniaBerlin357.168 km281,2 M

Vídeos sobre HTML


¿Algo que nos quieras comentar?

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

*

*