¿Cómo crear tablas?

No hay mejor forma que organizar y mostrar datos que a través de una completa tabla que pueda satisfacer nuestras necesidades, para ello vamos a ver como crear una completa en HTML5.

Vamos a empezar con lo básico, la etiqueta que definirá que a partir de ella empieza una tabla y la cual al cerrarla hace saber al navegador que a partir de aquí no es una tabla, esta etiqueta es <table> </table>. Luego ponemos el título de la tabla con la etiqueta <caption> </caption>.

Vamos a dividir la tabla en 3 partes, el encabezado <thead> (todo lo que este dentro de esa etiqueta será el encabezado), el cuerpo de la tabla <tbody> (todo lo que este dentro de esa etiqueta será el cuerpo de nuestra tabla) y por último el pie de la tabla <tfoot>.

Para crear los rectangulos (celdas) de la tabla lo haremos de la siguiente forma...

La etiqueta <tr> definirá una fila, dentro de esa fila, entre <tr> y </tr> irán las celdas, estas se definen con <td> </td> (Todas las etiquetas relacionadas con las tablas se cierran). Además hay que recordar que para las celdas del encabezado deben ser <th>

Tabla HTML5
1º Celda 2º Celda 3º Celda


Código:

<table border="1">
  <caption>Tabla HTML5</caption>
  <tr>
    <td>1º celda</td>
    <td>2º celda</td>
    <td>3º celda</td>
  </tr>
</table>

Vamos a ver los atributos colspan y rowspan, estos basicamente lo que hacen es aumentar su tamaño una celda más verticalmente (rowspan) u horizontalmente (colspan). Para hacer que esto funcione, la tabla debe tener minimo dos filas (Ya sabes que se ponen con <tr>, para usar cualquiera de los dos atributos que se ponen en la etiqueta <td> o <th>, veamos un ejemplo:

Tabla HTML5 2
Celda ampliada 2º Celda 3º Celda
1º Celda 2º Celda 3º Celda


Código:

<table border="1">

  <caption>Tabla HTML5</caption>

  <tr>
    <td colspan="2">Celda ampliada</td>
    <td>2º Celda</td>
    <td>3º Celda</td>
  </tr>

  <tr>
    <td>1º celda</td>
    <td>2º celda</td>
    <td>3º celda</td>
  </tr>

</table>

Hasta aquí las tablas, ¿qué te pareció? Demasiado fácil seguro! Si quieres ampliar tus conocimientos y ser todo un experto en tablas, no dudes en pasarte por este artículo. Sigamos adelante, ya te estás deborando todas las etiquetas de HTML5 ;)