Cómo hacer tablas en HTML - Desarrolladores web

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!

Ir a contenido:

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.

filas y columnas de una tabla html — Diferencia entre las filas y columnas de una tabla en HTML

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.

Te recomendamos leer: Elementos Inline y Block en HTML

Resultado:

Tabla por defecto sin estilo — Tabla de una fila y tres columnas sin estilo

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:

Como poner borde a una tabla HTML — Tabla html con borde de 1px

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:

Tabla de 4 filas y 5 columnas HTML ejemplo — Imagen de una tabla normal hecha en HTML

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:

Tabla con encabezado etiqueta th en html — Imagen con tabla html con encabezado en sus columnas.

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:

Te recomendamos leer: Introducción a HTML y al desarrollo web

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:

Atributo rowspan para combinar filas en HTML — Imagen de tabla HTML con filas combinadas

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:

Atributo colspan combinar columnas en HTML — Imagen con atributo COLSPAN aplicado a tablas

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:

Te recomendamos leer: Maquetación web en HTML

Estructura de tabla encabezado cuerpo y pie en html — Imagen de una tabla HTML con sus tres componentes

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.