1. Etiqueta para Tablas

Una tabla en HTML nos permite organizar los datos en una estructura formada por filas horizontales y columnas verticales, la intersección entre fila y columnas es lo que llamaremos celdas.

Se observa una tabla de 4 fila y 3 columnas.

Veamoslas etiquetas básicas para crear una tabla de la forma más sencilla posible:

Etiqueta	Descripción	Tipo
<table>	Etiqueta contenedora que tendrá en su interior toda la tabla	Bloque
<tr>	Indica una fila de la tabla	Bloque
<td>	Indica una celda de la tabla	Bloque
<th>	Indica una celdas de cabecera de la tabla	Bloque

2. Estructura Sencilla de una Tabla

Para crear una tabla sencilla se ha de utilizar en primer lugar la etiqueta <table>, la cual define la tabla. Y dentro de ella se han de situar por cada fila una etiqueta <tr>, mientras que por cada celda dentro de la fila, se puede utilizar una etiqueta <th> o <td>, dependiendo de que sea una celda de cabecera o normal.

Ejemplo de una tabla con 1 fila y 3 columnas con border 1px :

Columna 1

Columna 2

Columna 3

<!--Tabla de 1 fila con 3 columnas con border de 1px  -->
<table border="1" > <!--Crea la tabla con el border de 1px  -->
   <tr> <!--Crea una fila  -->
      <td >Columna 1</td> <!--Crea una columna y en ella una celda  -->
      <td >Columna 2</td>
      <td >Columna 3</td>
   </tr>
</table>

Ejemplo de una tabla con 2 fila y 3 columnas con borde de 1px:

Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6

<!--Tabla de 2 fila con 3 columnas con borde de 1px  -->
<table border="1" > <!--Crea la tabla con el border de 1px  -->
  <tr> <!--Crea la primera fila -->
     <td >Celda 1</td> <!--Crea una columna y en ella una celda -->
     <td >Celda 2</td>
     <td >Celda 3</td>
  </tr>
  <tr> <!--Crea la segunda fila -->
     <td >Celda 4</td> <!--Crea una columna y en ella una celda -->
     <td >Celda 5</td>
     <td >Celda 6</td>
  </tr>
</table>

Ejemplo de una tabla con encabezado 3 fila y 3 columnas con borde de 1px:

Producto	Marca	Precio
Tapabocas N95	3M	$ 20.000
Alcohol 70%	MK	$ 7.000

<!--Tabla de 3 fila con 3 columnas con un borde de 1px -->
<table border="1" > <!--Crea la tabla con el borde de 1px  -->
  <tr> <!--Crea la primera fila -->
     <th >Producto</th> <!--Crea una columna y en ella una celda de cabecera-->
     <th >Marca</th>
     <th >Precio</th>
  </tr>
  <tr> <!--Crea la segunda fila -->
     <td >Tapabocas N95</td> <!--Crea una columna y en ella una celda -->
     <td >3M</td>
     <td >$ 20.000</td>
  </tr>
  <tr> <!--Crea la tercera fila -->
     <td >Alcohol 70%</td> <!--Crea una columna y en ella una celda -->
     <td >MK</td>
     <td >$ 7.000</td>
  </tr>
</table>

3. Tabla con combinación de columnas

Uno de los atributos que se pueden aplicar a las etiquetas de celda, independientemente que sean de encabezado o celdas normales:

Atributo	Valor	Descripción
colspan	número	Número de columnas que la celda abarcará

Ejemplo de una tabla con columna combinada 2 fila y 3 columnas con borde de 1px:

Como se puede observar en el ejemplo, se ha realizado la combinación de las columnas 1 y 2, de la primera fila

Nombre Completo		Sexo
Maria Camila	Lara Noguera	Femenino

<!--Tabla de 2 fila con 3 columnas con borde de 1px  -->
<table border="1" > <!--Crea la tabla con el border de 1px  -->
  <tr> <!--Crea la primera fila -->
     <td colspan="2" >Nombre Completo</td> <!--Crea una columna combinada -->
     <td >Sexo</td>
  </tr>
  <tr> <!--Crea la segunda fila -->
     <td >Maria Camila</td> <!--Crea una columna y en ella una celda -->
     <td >Lara Noguera</td>
     <td >Femenino</td>
  </tr>
</table>

4. Tabla con combinación de filas

Al igual que se puede realizar la combinación de columnas, también se puede realizar la combinación de filas, mediante el atributo rowspan:

Atributo	Valor	Descripción
rowspan	número	Número de filas que la celda abarcará.

Ejemplo de una tabla con 3 fila combinadas y 2 columnas con borde de 1px:

Como se puede observar en el ejemplo, se ha realizado la combinación de las filas 1,2 y 3, fusionando asi toda la primera columna

Cursos	HTML5
	CSS3
	JS

<!--Tabla de 2 fila con 3 columnas con borde de 1px  -->
<table border="1" > <!--Crea la tabla con el border de 1px  -->
 <tr> <!--Crea la primera fila -->
    <td rowspan="3" >Cursos</td> <!--Crea las 3 filas combinada -->
    <td >HTML5</td>
 </tr>
 <tr> <!--Crea la segunda fila -->
    <td >CSS3 </td> <!--Crea la segunda columna y en ella una celda -->
 </tr>
 <tr> <!--Crea la tercera fila -->
    <td >JS</td> <!--Crea la segunda columna y en ella una celda -->
 </tr>
</table>

5. Estructura Avanzada de una Tabla

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 dandole significado para los motores de busqueda.

Etiquetas Semanticas:

Etiqueta	Descripción	Tipo
<caption>	Indica un título de la tabla	Bloque
<thead>	Etiqueta contenedora de la cabecera de la tabla	Bloque
<tbody>	Etiqueta contenedora del cuerpo de la tabla	Bloque
<tfoot>	Etiqueta contenedora del pie de la tabla	Bloque

Ejemplo de una tabla avanzada, primera fila con encabezado, segunda y tercera fila cuerpo y cuarta fila el pie de la tabla:

Producto	Marca	Precio
Tapabocas N95	3M	$ 20.000
Alcohol 70%	MK	$ 7.000
Total:		$ 27.000 pesos

<!--Tabla de 4 fila con 3 columnas con un borde de 1px -->
<table border="1" > <!--Crea la tabla con el borde de 1px  -->
<thead>
  <tr> <!--Crea la primera fila -->
     <th >Producto</th> <!--Crea una columna y en ella una celda de cabecera-->
     <th >Marca</th>
     <th >Precio</th>
  </tr>
</thead>
<tbody>
  <tr> <!--Crea la segunda fila -->
     <td >Tapabocas N95</td> <!--Crea una columna y en ella una celda -->
     <td >3M</td>
     <td >$ 20.000</td>
  </tr>
  <tr> <!--Crea la tercera fila -->
     <td >Alcohol 70%</td> <!--Crea una columna y en ella una celda -->
     <td >MK</td>
     <td >$ 7.000</td>
  </tr>
</tbody>
<tfoot>
   <tr> <!--Crea la cuarta fila -->
     <td colspan="2" >Total:</td> <!--Crea una columna y en ella una celda -->
     <td >$ 27.000 pesos</td>
  </tr>
  </tfoot>
</table>

Ejemplo Practico: Pagina web de Peliculas

Utilizaremos un nuevo ejercicio de tablas y le añadimremos una imagen a cada celda:

FLIX EJEMPLO

Peliculas Infantiles

Peliculas de Acción

      
<!DOCTYPE html>
<html lang="es">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>adsi</title>
</head>
<body>
                           
<h1>FLIX EJEMPLO<h1>

<hr>
<h2>Peliculas Infantiles</h2>
<table > <!--Crea la tabla -->
  <tr> <!--Crea una fila con 4 columnas, en cada celda una imagen -->
     <td >
     <img height="224px" src="imgh/peliculas/infantil/sonic-the-hedgehog-4k.jpg" >
     </td>
     <td >
     <img height="224px" src="imgh/peliculas/infantil/playing-with-fire.jpg" >
     </td>
     <td >
     <img height="224px" src="imgh/peliculas/infantil/dora-y-la-ciudad-perdida.jpg" >
     </td>
     <td >
     <img height="224px" src="imgh/peliculas/infantil/dolittle-4k.jpg" >
     </td>
  </tr>
</table>

<h2>Peliculas de Acción</h2>
<table > <!--Crea la segunda tabla -->
  <tr> <!--Crea una fila con 4 columnas, en cada celda una imagen -->
     <td >
     <img height="224px" src="imgh/peliculas/accion/aves-de-presa-y-la-fantabulosa-emancipacion-de-harley-quinn-4k.jpg" >
     </td>
     <td >
     <img height="224px" src="imgh/peliculas/accion/bloodshot-4k.jpg" >
     </td>
     <td >
     <img height="224px" src="imgh/peliculas/accion/mision-de-rescate-4k.jpg" >
     </td>
     <td >
     <img height="224px" src="imgh/peliculas/accion/the-courier.jpg" >
     </td>
  </tr>
</table>

</body>
</html>

Actividad #8. HTML5: ETIQUETAS PARA TABLAS

Ahora que ya sabes insertar tablas en HTML es el momento de que empieces a practicar, aunque no es nada difícil, practica para desarrollar la habilidad en el aprendizaje.

Te ha resultado util esta guia de aprendizaje ?

Que tal el contenido?

Etiquetas para Tablas