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.

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.
Gracias 😀