Creación de tablas en HTML

Para la creación de tablas, HTML dispone de varias etiquetas y atributos que pasamos a ver a continuación.

La etiqueta table

Para crear una tabla la primera etiqueta que no encontramos, es la etiqueta <table> de apertura y cierre. Esta solo sirve para indicarle al navegador que vamos a crear una tabla, dentro de esta nos encontramos tres posibles etiquetas de las cuales dos siempre son obligatorias.

La etiqueta tr

Las primeras que nos encontraremos son las etiqueta <tr>, estas crean el comienzo de una fila y entre ellas se encuentran las etiquetas <td>.

La etiqueta td

La etiquetas <td> añaden una celda a cada fila por cada par de etiquetas <td> que añadamos dentro de las etiquetas tr, en el ejemplo de código puedes ver como se crean varias tablas.

Una fila y tres columnas

<table>
   <tr>
     <td>Celda 1</td><td>Celda 2</td><td>Celda 3</td>
  </tr>
</table>

Tres fila y tres columnas

<table>
   <tr>
     <td>Celda 1</td><td>Celda 2</td><td>Celda 3</td>
   </tr>
   <tr>
     <td>Celda 1</td><td>Celda 2</td><td>Celda 3</td>
   </tr>
   <tr>     
     <td>Celda 1</td><td>Celda 2</td><td>Celda 3</td>
   </tr>
</table>

Cinco fila y cinco columnas

<table>
   <tr>
     <td>Celda 1</td><td>Celda 2</td><td>Celda 3</td><td>Celda 4</td><td>Celda 5</td>
   </tr>
   <tr>
     <td>Celda 1</td><td>Celda 2</td><td>Celda 3</td><td>Celda 4</td><td>Celda 5</td>
   </tr>
   <tr>     
     <td>Celda 1</td><td>Celda 2</td><td>Celda 3</td><td>Celda 4</td><td>Celda 5</td>
   </tr>
   <tr>
     <td>Celda 1</td><td>Celda 2</td><td>Celda 3</td><td>Celda 4</td><td>Celda 5</td>
   </tr>
   <tr>     
     <td>Celda 1</td><td>Celda 2</td><td>Celda 3</td><td>Celda 4</td><td>Celda 5</td>
   </tr>
</table>

La etiqueta th

Con la etiqueta <th> podemos añadir encabezados a la tabla, estos quedan centrados y en negrita en su celda.

<table>
   <tr>
     <th>Encabezado 1</th><th>Encabezado 2</th><th>Encabezado 3</th>
   </tr>
   <tr>
     <td>Celda 1</td><td>Celda 2</td><td>Celda 3</td>
  </tr>
</table>

El atributo border

En los ejemplos anteriores las tablas se mostraban con un borde de un pixel, si quieres que se muestre el borde en las celdas y la tabla, necesitas aplicarle el atributo border a la etiqueta <table> y añadirle un valor en pixels,

<table border="1px">
   <tr>
     <td>Celda 1</td><td>Celda 2</td><td>Celda 3</td>
   </tr>
</table>

El atributo rowspan

En HTML también se pueden agrupar celdas ya sean por columnas o por filas, si queremos agrupar o anexar varias celdas de distintas filas de una columna concreta, utilizaremos el atributo rowspan. Vamos a ver este código.

<table border="1px">
   <tr>
     <td rowspan="3">Celda</td><td>Celda</td><td>Celda</td>
   </tr>
   <tr>
     <td>Celda</td><td>Celda</td>
   </tr>
   <tr>
     <td>Celda</td><td>Celda</td>
   </tr>
</table>

En la primera fila, vemos tres celdas, la primera lleva el atributo rowspan con un valor de 3, lo que le estamos diciendo es que agrupe 3 celdas de la columna en la que se encuentra, la primera es la que lleva el atributo rowspan, y las dos restantes son las que irán debajo de esta, si te fijas las dos filas siguientes solo llevan 2 celdas, esto es porque al agruparlas ya no hace falta escribir las celdas que ha agrupado.

El atributo colspan

Si queremos agrupar o anexar varias celdas de distintas columnas de una fila concreta, utilizaremos el atributo colspan. Vamos a ver este código.

<table border="1px">
   <tr>
     <td colspan="3">Celda</td>
   </tr>
   <tr>
     <td>Celda</td><td>Celda</td><td>Celda</td>
   </tr>
   <tr>
     <td>Celda</td><td>Celda</td><td>Celda</td>
   </tr>
</table>

Aqui lo que le estamos diciendo es que agrupe las 3 celdas de la fila en la que se encuentra el atributo colspan, y como en el caso anterior, las celdas agrupadas ya no se escriben. las otras dos filas son tres celdas normales.

Daniel Fernández Velázquez

Me encanta aprender y practicar la programación web, Autodidacta y apasionado de la tecnología.