En esta lección aprenderemos a crear tabla en html correctamente, conoceremos las etiquetas que definen su estructura y además los atributos correspondientes a tablas html, sin más preámbulo ¡Empecemos!

Crear Tablas en HTML

Como sabemos una tabla es una estructura formada por filas y columnas, las filas son las distribuciones horizontales y las columnas son las distribuciones verticales.

En HTML la estructura de una tabla tiene que ver con etiquetas, una etiqueta <table> indica que es un elemento de tabla, dentro de ella va otra etiqueta <tr> y esta señala las filas de una tabla y finalmente, dentro de cada fila expresada con etiqueta <tr> va otra etiqueta <td> y es básicamente un cuadrito de la tabla contenida en una fila y dentro de ella ira el contenido deseado; si no lograste captar la idea, no hay problema ¡Lo harás con los ejemplos! sigamos.

Etiqueta <table>

Para definir una tabla en HTML empleamos la etiqueta <table>

<table>
  
</table>

Etiqueta <tr>

Para crear una fila dentro de una tabla empleamos la etiqueta <tr> si deseamos varias filas, entonces crearemos varias etiquetas <tr> con su respectiva etiqueta de cierre. Veamos un ejemplo de una tabla con 3 filas.

<table>
  <tr>
  </tr>
  
  <tr>
  </tr>
  
  <tr>
  </tr>
</table> 

Etiqueta <td>

Esta etiqueta definirá una columna y está dentro de <tr>.

<td> Prácticamente serán los contenedores, dentro irán los contenidos de tabla, puede ir texto, imágenes, e incluso más tablas y otros elementos HTML, ¡pruébalos!

Veamos el ejemplo:

<table> 
  <tr> 
    <td> Primero </td>
    <td> Segundo </td>
    <td> Tercero </td>
  </tr>
</table>

Para que entiendas, capta esto: dentro de las tablas <table> van las filas <tr> y dentro de las filas van las columnas <td>, además, dentro de las tablas pueden varias filas y dentro de las filas pueden ir varias columnas como veremos más adelante.

Resultado:

Como podemos observar en la imagen, el resultado es una tabla de una fila y tres columnas, sin embargo no parece y para mejorar el aspecto emplearemos a continuación el atributo border.

Atributo border

Cuando creamos una tabla, por defecto no tiene ningún borde, más parece una lista sin estilo.

Para ponerle borde a la tabla utilizamos el atributo border y en su valor la dimensión de ese borde.

Como ejemplo veamos la misma tabla anterior pero en este caso le ponemos borde de 1px:

<table border="1px"> 
  <tr> 
    <td> Primero </td>
    <td> Segundo </td>
    <td> Tercero </td>
  </tr>
</table>

Resultado:

Ejemplo de tablas en HTML

El ejemplo a continuación es una tabla de 4 filas y 5 columnas con un borde de 1px:

<table border="1px">

<tr>

<td> elemento a </td>
<td> elemento b </td>
<td> elemento c </td>
<td> elemento d </td>
<td> elemento e </td>

</tr>

<tr>

<td> lemento A </td>
<td> lemento B </td>
<td> lemento C </td>
<td> lemento D </td>
<td> lemento E </td>

</tr>

<tr>

<td> emento AA </td>
<td> emento BB </td>
<td> emento CC </td>
<td> emento DD </td>
<td> emento EE </td>

</tr>

<tr>

<td> mento AAA </td>
<td> mento BBB </td>
<td> mento CCC </td>
<td> mento DDD </td>
<td> mento EEE </td>

</tr>

</table>

Resultado:

Etiqueta <th>

Utilizaremos <th> para poner encabezado a la tabla en su primera fila.

Cada elemento <th> será el encabezado de una columna, veamos un ejemplo y como se ve:

<table border="1px">
<tr>
<th> Lunes </th>
<th> Martes </th>
<th> Miércoles </th>
<th> Jueves </th>
<th> Viernes </th>
</tr>

<tr>
<td> Matemática  </td>
<td> Ciencias </td>
<td> Matemática </td>
<td> Sociales </td>
<td> Arte </td>
</tr>

<tr>
<td> Inglés </td>
<td> Comunicación </td>
<td> Biologia </td>
<td> Historia </td>
<td> Física </td>
</tr>

<tr>
<td> Computación </td>
<td> Historia </td>
<td> Economia </td>
<td> Química </td>
<td> Redacción </td>
</tr>

</table>

Resultado:

Como podemos notar, los elementos dentro de las etiquetas de encabezado de tabla <th> se resaltan, de tal manera que poseen un significado semántico.

A continuación aprenderemos a combinar filas y columnas, algo que será de mucha utilidad ¡Ya lo verás!

Atributo colspan y rowspan

En muchas ocasiones es necesario combinar celdas de una tabla, como verás, algunas veces es necesario combinar celdas de una misma fila y en otras celdas de una misma columna y todo ello aprenderemos a continuación, es muy sencillo:

Combinar filas en tablas HTML

Para combinar celdas de distintas filas en una tabla HTML emplearemos el atributo rowspan dentro del elemento <td> desde donde se extenderá la combinación y en su valor colocaremos el número de filas que serán combinadas, veamos un ejemplo:

<table border="1">
<tr>
<td rowspan="2"> Oso </td>
<td> León </td>
<td> Tigre </td>
</tr>
  
<tr>
<td> Cebra </td>
<td rowspan="3"> Panda </td>
</tr>
 
<tr>
<td> Loro </td>
<td> Pato </td>
</tr>
  
<tr>
<td> Buo </td>
<td> Águila </td>
</tr>

</table> 

Resultado:

Observa como la celda oso desplaza una fila más, es decir ocupa dos celdas en la misma columna, esto ocurre por el valor de 2 colocada para la propiedad ROWSPAN. Por otro lado, la celda Panda ocupa 3 celdas por su valor 3.

En fin, ROWSPAN sirve para combinar celdas en filas distintas y en la misma columna.

Combinar columnas de tablas en HTML

Ahora aprenderemos a combinar elementos de la misma fila y de diferentes columnas, es bastante sencillo, simplemente emplearemos el atributo COLSPAN en el elemento desde donde se hará la combinación, a partir de ahí se combinará el número de celdas especificada en el valor del atributo colspan; veamos el ejemplo:

<table border="1">
<tr>
<td > Rojo </td>
<td colspan="2"> Verde </td>
</tr>
  
<tr>
<td> Café </td>
<td> Marrón </td>
<td> Tinto </td>
</tr>
 
<tr>
<td colspan="3"> Naranja </td>
</tr>
  
<tr>
<td colspan="2"> Blanco </td>
<td> Negro </td>
</tr>

</table> 

Resultado:

Como podemos observar, en la primera fila se combinan dos celdas a partir de la celda verde; en la tercera fila se combina tres celdas a partir de la celda naranja y en la cuarta fila se combina dos filas a partir de la celda blanco.

A continuación conozcamos las algunas etiquetas que definen la estructura de una tabla en HTML.

Etiquetas <thead>, <tbody> y <tfood> para tablas

Estas etiquetas sirven para identificar la cabecera, el cuerpo y el pie de la tabla, en algunas ocasiones necesitamos definir cuál será la cabecera de nuestra tabla, el cuerpo y el pie de tabla.

A demás de brindar a los elementos de un significado para los navegadores, estas etiquetas pueden ser útiles para dar estilo a nuestras tablas, veamos un ejemplo:

<table border="1px">
  <thead bgcolor="red">
<tr>
<td> PAQUETES </td>
<td> Paquete 1  </td>
<td> Paquete 2 </td>
<td> Paquete 3 </td>
<td> Paquete 4 </td>
<td> Paquete 5 </td>
</tr>
  </thead>
  
  <tbody bgcolor="yellow">
<tr>
<td rowspan="3"> CURSOS  </td>
<td> Matemática  </td>
<td> Ciencias </td>
<td> Matemática </td>
<td> Sociales </td>
<td> Arte </td>
</tr>

<tr>
<td> Inglés </td>
<td> Comunicación </td>
<td> Biologia </td>
<td> Historia </td>
<td> Física </td>
</tr>

<tr>
<td> Computación </td>
<td> Historia </td>
<td> Economia </td>
<td> Química </td>
<td> Redacción </td>
</tr>
  </tbody>
  <tfoot bgcolor="blue">
    <tr>
<td> PRECIOS  </td>
<td> 10 $ </td>
<td> 20 $ </td>
<td> 30 $ </td>
<td> 40 $ </td>
<td> 50 $ </td>
</tr>
  </tfoot>

</table>

Resultado:

Atributo bgcolor para color de tabla

Se puede utilizar el atributo bgcolor como lo hicimos en el ejemplo anterior para colocar un color de fondo a un elemento, de esa manera podemos poner color a cada elemento de una tabla html.

Por ahora es suficiente, aprendimos a crear tablas en HTML ahora practica para volverte en un experto de tablas.