Introducción

Las tablas en HTML son una parte crucial en el diseño y desarrollo de una página web. HTML nos facilita enormemente la creación de tablas.

Al pensar en incluir tablas en un sitio web, estamos planeando mostrar datos en filas y columnas de una manera clara y ordenada, lo cual es una ventaja considerable para cualquier desarrollador web, ¿no lo crees?

Manejar la creación de tablas en HTML sigue siendo una habilidad valiosa para cualquier desarrollador web, ya que estas ofrecen un método semántico adecuado para mostrar datos en forma tabular en una página web.

Por esta razón, he creado una guía completa, diseñada para ofrecer un entendimiento avanzado de las tablas en HTML. Comenzaré desde lo más básico, como la estructura básica de una tabla, encabezados, filas, columnas, etc. Hasta abarcar técnicas más avanzadas, como la fusión de celdas, asuntos de accesibilidad, tablas anidadas y mucho más.

Esta guía está dirigida tanto a principiantes que están iniciando su camino en el desarrollo web como a desarrolladores experimentados que desean profundizar en aspectos específicos de las tablas en HTML.

Conceptos básicos de las tablas en HTML

Antes de conocer mas acerca de las tablas en HTML, es importante familiarizarse con algunos términos clave.

1. Tabla: Es donde se organiza la información en filas y columnas y utilizada para mostrar datos de manera ordenada y estructurada.
2. Fila: Esta compuesta por una serie de celdas que representan los elementos de esa fila.
3. Celda: Es el espacio donde se muestra el contenido, como texto, imágenes, enlaces o botones.
4. Encabezado: Se utiliza para etiquetar o dar información sobre el contenido de una columna específica, estos encabezados se definen en la primera fila de la tabla..
5. Borde: El borde de tabla se refiere a la línea que rodea la tabla. Puede ajustarse mediante el atributo border en la etiqueta <table>, esto se hace de forma temporal, ya que no es la mejor manera de hacerlo

Como se crea una tabla simple

Una tabla en HTML se crea con la etiqueta <table>. Dentro de esta, utilizamos <tr> para definir las filas, y <td> para definir las celdas.

Tal y como se muestra en este ejemplo:

<table>
  <tr>
    <td>Col 1 fila 1</td>
    <td>Col 2 fila 1</td>
  </tr>
  <tr>
    <td>Col 1 fila 2</td>
    <td>Col 2 fila 2</td>
  </tr>
</table>

En este ejemplo he creado una tabla muy básica, empecé definiendo la tabla con las etiquetas <table></table>, luego, incluí la primera fila, definida por la etiqueta <tr></tr>, por último, incluí dos columnas definidas por la etiqueta <td></td>. De esta forma agregas tantas filas y columnas como necesites, en este caso, he creado una tabla de 2×2, dos filas y dos columnas.

El código anterior lo puedes visualizar mejor aquí:

Encabezados

Para los encabezados de las tablas, usamos la etiqueta <th>, de esta forma las celdas en donde aparezca un encabezado resaltarán en negrita el contenido de la columna. Esto ayuda a diferenciar los encabezados del resto de las celdas. Entonces, al ejemplo anterior le agreguaremos una fila más para poder definir los encabezados de las columnas.

<table>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
  </tr>
  <tr>
    <td>Columna 1 fila 1</td>
    <td>Columna 2 fila 1</td>
  </tr>
  <tr>
    <td>Columna 1 fila 2</td>
    <td>Columna 2 fila 2</td>
  </tr>
</table>

El resultado sería el siguiente:

Atributos

Los atributos de una tabla HTML, al igual que en cualquier otro elemento, proporcionan información adicional, de esta forma, podemos agregar más características así como alterar o cambiar el comportamiento de un elemento.

Por ejemplo, el atributo id se utiliza para aplicar un identificador único a un elemento que luego puede ser manipulado mediante CSS para dar nuevos estilos o definir algún evento por medio de JavaScript.

Es importante mencionar que los atributos anteriores (no todos), puedes, pero no debes incorporarlos de forma directa en una tabla, esto se debe a que en el desarrollo web moderno, se utiliza CSS para manipular la apariencia de una tabla HTML, por tanto, no tiene sentido que utilice alguno como ejemplo, ya que es algo que ya no se practica. Sin embargo, es importantes que los conozcas.

Veamos algunos atributos importantes que puedes incorporar en una tabla:

• id – Especifica un identificador único para la tabla. Esto se puede usar para acceder a la tabla con JavaScript o CSS.
• class – Permite aplicar estilos CSS o JavaScript. Es posible especificar una o más clases para una tabla.
• style – Permite especificar estilos CSS directamente en la tabla. A estos se les llaman estilos en línea.
• border – Especifica de forma temporal un borde a la tabla. Temporal porque hay técnicas más modernas, como CSS, para aplicar bordes a una tabla. Su valor por defecto es 0.
• cellpadding – Define el espacio entre el contenido de la celda y sus bordes en píxeles.
• summary – Proporciona un resumen de la tabla para lectores de pantalla.
• colspan – Hace que una celda abarque varias columnas.
• rowspan – Hace que una celda abarque varias filas.
• headers – Asocia una celda de encabezado con una celda de datos para lectores de pantalla.

Fusionar celdas

Un par de atributos que se utilizan en una tabla, pero no directamente en ella, sino en sus elementos td (columnas), son los atributos «colspan» y «rowspan«. Estos atributos se utilizan para expandir tanto filas como columnas dentro de una tabla.

colspan

Con el atributo colspan podemos hacer que una columna abarque más de una celda, definiendo el atributo en el elemento que queremos que se extienda. Con colspan se trabaja de forma horizontal, de izquierda a derecha, veamos el siguiente ejemplo:

<table>
  <tr>
    <th>Nombre equipo</th>
    <th colspan="2">Detalles</th>
  </tr>
  <tr>
    <td>Real Madrid</td>
    <td>Detalles 1</td>
    <td>Detalles 2</td>
  </tr>
    <tr>
    <td>Liverpool</td>
    <td>Detalles 1</td>
    <td>Detalles 2</td>
  </tr>
</table>

En este ejemplo he definido el atributo colspan al segundo elemento th, con un valor de 2, lo que significa que esa columna tomará (se extenderá) dos columnas. Y el resultado será el siguiente:

Se ha definido un borde a la tabla para poder ver mejor el resultado. Puedes ver cómo se agregó el borde en la pestaña CSS de CodePen.

rowspan

Con el atributo rowspan hacemos que una celda abarque dos o mas filas, con rowspan se trabaja de arriba hacia abajo.

Veamos un segundo ejemplo, supongamos que deseamos que la segunda fila «Liberpool» se extienda dos filas hacia abajo, de esta manera, lograremos que la fila «Liberpool» abarque dos filas en lugar de una. Veamos como hacerlo:

<table>
  <tr>
    <th>Nombre equipo</th>
    <th colspan="2">Detalles</th>
  </tr>
  <tr>
    <td>Real Madrid</td>
    <td>Detalles 1</td>
    <td>Detalles 2</td>
  </tr>
  <tr>
    <td rowspan="2">Liverpool</td>
    <td>Detalles 1</td>
    <td>Detalles 2</td>
  </tr>
  <tr>
    <td>Cuarta fila</td>
    <td>tercera columna</td>
  </tr>
</table>

Simplemente he definido el valor de 2 al atributo rowspan (rowspan="2"). Y asi se obtiene el siguiente resultado:

En el editor CodePen puedes ver la diferencia cuando defines un atributo, ya sea colspan o rowspan. Si no agregas las filas o columnas necesarias, no obtendrás los resultados esperados.

Esto quiere decir que tienes que jugar con ambos hasta que logres el diseño de tabla que buscas. Por esa razón he añadido las celdas «Cuarta fila» y «Tercera columna» como puedes ver en el primer ejemplo en el editor CodePen.

Aspectos semánticos de una tabla

Cuando hablamos de temas de accesibilidad, significa que están involucrados términos como el de la semántica web. Esto no es una excepción en el caso de las tablas, ya que las tablas también tienen su propia estructura semántica, la cual ya está presente de forma implícita aun que no podamos verla.

Ahora, el tema de accesibilidad web parece no beneficiarse de esto, pero sin ninguna duda, esto nos da un mayor control y por tanto, se nos facilita la vida a la hora de aplicar estilos y manipular la apariencia de una tabla mediante el uso de CSS.

hay una serie de elementos que puede contener una tabla para que sea verdaderamente semántica, veamos cuáles son:

• Tenemos los elementos para seccionar una tabla, como <thead> para los encabezados, <tbody> para el cuerpo de la tabla y <tfoot> para el pie de la tabla.
• Algo que ya conocemos son los elementos básicos con los cuales se crea una tabla: <table> para crear la tabla, <th> para definir un encabezado, <tr> para definir una columna, <td> para definir una fila.
• También tenemos el elemento <caption> para agregar un título descriptivo a la tabla.
• También hay atributos como scope para definir cuándo un encabezado es de fila y cuándo de columna.
• Hay atributos para abarcar varias filas y columnas, como rowspan y colspan, respectivamente.
• También podemos agregar un resumen a la tabla a través del elemento <summary>. Esto se hace por asuntos de accesibilidad.
• De igual forma, es posible usar el atributo role como un identificador de la tabla, principalmente útil para las tecnologías asistivas.

Ahora veamos un ejemplo de cada uno de los aspectos mencionados anteriormente.

Estructura de una tabla

Veamos cómo es la estructura de una tabla semántica. Podemos dividir las tablas en <thead>, <tbody>, y <tfoot>. Esto no solo mejora la legibilidad, sino también la accesibilidad.

<table>
  <thead>
    <tr>
      <th>Nombre equipo</th>
      <th>Detalles</th>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td>Real Madrid</td>
    <td>Detalles 1</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td>Liverpool</td>
    <td>Detalles 1</td>
  </tr>
  <tr>
    <td>Bayer Munich</td>
    <td>Detalles 3</td>
  </tr>
  </tfoot>
</table>

Este código se vería así:

Recuerda que aunque parezca que nada cambió, nos estamos enfocando en el valor semántico que esto conlleva. Tú no ves nada aparente, sin embargo, las personas con discapacidades visuales que utilizan lectores de pantalla agradecen esto.

Agregando título a la tabla

Para agregar un título a la tabla, basta con incluir el elemento <caption> después de la etiqueta <table>, como en el siguiente ejemplo:

<table>
  <caption>Tabla de posiciones</caption>
  <tr>
    <th>Nombre equipo</th>
    <th>Detalles</th>
  </tr>
  <tr>
    <td>Real Madrid</td>
    <td>Detalles 1</td>
  </tr>
  <tr>
    <td>Liverpool</td>
    <td>Detalles 1</td>
  </tr>
  <tr>
    <td>Bayer Munich</td>
    <td>Detalles 3</td>
  </tr>
</table>

Y así, ya tendríamos una tabla con un título descriptivo

Definiendo filas y columnas con scope

Para definir filas y columnas utilizamos el atribtuo scope, el cual define si un elemento de encabezado pertenece a una fila o a una columna. El atributo scope puede tener los siguientes valores:

• scope = "row", define el encabezado como la fila.
• scope = "col", define el encabezado como la columna.
• scope = "colgroup". define un grupo de columnas.
• scope = "rowgroup". define un grupo de filas.

Ejemplo usando scope="col".

<table>
  <caption>Tabla de posiciones</caption>
  <tr>
    <th scope="col">Nombre equipo</th>
    <th scope="col">Detalles</th>
  </tr>
  <tr>
    <td>Real Madrid</td>
    <td>Detalles 1</td>
  </tr>
  <tr>
    <td>Liverpool</td>
    <td>Detalles 1</td>
  </tr>
  <tr>
    <td>Bayer Munich</td>
    <td>Detalles 3</td>
  </tr>
</table>

Este código daría como salida:

En este caso, he definido scope="col" a los encabezados «Nombre equipo» y «Detalles«. Aquí indico que el resto de contenido de esa columna pertenecerá a ese encabezado. De igual forma se puede definir un encabezado en modo de fila, y será prácticamente lo mismo, solo que ahora sería un scope="row".

Ejemplo usando scope="row"

<table>
  <caption>Horario de clases</caption>
  
  <thead>
    <tr>
      <th>Hora</th>
      <th>Lunes</th>
      <th>Martes</th> 
      <th>Miércoles</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">8:00 - 9:00</th>
      <td>Matemáticas</td>
      <td>Lenguaje</td>
      <td>Inglés</td>
    </tr>
    
    <tr>
       <th scope="row">9:00 - 10:00</th>
       <td>Física</td>
       <td>Química</td>
       <td>Educación física</td>
    </tr>
    
    <tr>
       <th scope="row">10:00 - 11:00</th>
       <td>Historia</td>
       <td>Programación</td>
       <td>Arte</td>
    </tr>
  </tbody>
  
</table>

El resultado seria el siguiente:

En este ejemplo, ya no son las columnas las que tienen el ámbito, sino las filas. En este caso, en la columna «Hora«, las filas como 8:00 – 9:00 y demás, tienen un valor de scope=row.

Ejemplo usando scope="colgroup"

Esta tabla muestra los resultados de un partido de fútbol. Las columnas las he dividido en dos grupos: los resultados del equipo local y los resultados del equipo visitante.

Al encabezado de la primera columna, «Resultados«, le definí el atributo scope="colgroup" para indicar que se trata de un encabezado de grupo de columnas. Solo he definido algunos datos a modo de ejemplo, pero si agregas más datos de tu parte, la tabla se verá con una mejor estructura.

<table>
  <thead>
    <tr>
      <th scope="colgroup">Resultados</th>
      <th scope="col">Local</th>
      <th scope="col">Visitante</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Goles</td>
      <td>2</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Tiradas a puerta</td>
      <td>10</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Posesión del balón</td>
      <td>55%</td>
      <td>45%</td>
    </tr>
  </tbody>
</table>

El resultado sería el siguiente:

Ejemplo usando scope="rowgroup"

En este segundo ejemplo, la tabla muestra los datos de una persona. Dividí las filas en dos grupos: los «datos personales» y los «datos de contacto«, luego definí al encabezado de la primera fila, «Datos«, con el atributo scope="rowgroup" para indicar que se trata de un encabezado de grupo de filas.

<table>
  <thead>
    <tr>
      <th scope="rowgroup">Datos</th>
      <th>Nombre</th>
      <th>Apellidos</th>
      <th>Fecha de nacimiento</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Personales</td>
      <td>Franco</td>
      <td>Roman</td>
      <td>198-08-01</td>
    </tr>
    <tr>
      <td>Edad</td>
      <td>35</td>
      <td></td>
    </tr>
    <tr>
      <td rowspan="2">Contacto</td>
      <td>Teléfono</td>
      <td>666 666 666</td>
      <td></td>
    </tr>
    <tr>
      <td>Correo electrónico</td>
      <td>francoroman@gmail.com</td>
      <td></td>
    </tr>
  </tbody>
</table>

Al haber definido a la fila «Datos» en scope="rowgroup" logramos que el lector de pantalla pueda entender que la fila «Datos» es un encabezado para las dos filas siguientes, osea, datos personales y datos de contacto.

Esto ayuda a las personas con discapacidades visuales a comprender la estructura de la tabla y a encontrar la información que buscan.

Sin el atributo scope, el lector de pantalla interpretaría la tabla como una sola fila, con cuatro columnas. Esto podría dificultar la comprensión de la información, especialmente para las personas con discapacidades visuales graves.

Por ejemplo, si el usuario está buscando el nombre de la persona, tendría que recorrer las cuatro columnas de la primera fila. Sin embargo, con el atributo scope, el lector de pantalla solo tendría que recorrer la primera columna de la primera fila.

Como salida tendríamos el siguiente resultado:

Tablas anidadas

HTML permite el anidamiento de tablas, es decir, insertar una tabla dentro de otra tabla. Esto puede parecer incluso hasta absurdo, sin embargo, algunas veces es necesario. Un ejemplo de ello podría ser cuando queremos traernos información de otra tabla a la tabla actual.

Podemos hacerlo anidando la o las tablas que contienen la información dentro de la tabla en la que estamos trabajando.

Veamos un ejemplo de cómo se anida una tabla básica en HTML:

<table id="tabla1">
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
    <th>Encabezado 3</th>
  </tr>
  <tr>
    <!-- agregamos la otra tabla dentro de la primer columna y segunda fila -->
    <td id="anidada">
      <table id="tabla2"><!-- tabla anidada-->
        <tr>
          <td>celda1 tabla 2</td>
          <td>celda2 tabla 2</td>
          <td>celda3 tabla 2</td>
        </tr>
      </table><!-- Fin tabla anidada-->
    </td>
    <td>celda 2</td>
    <td>celda 3</td>
  </tr>
  <tr>
    <td>celda 4</td>
    <td>celda 5</td>
    <td>celda 6</td>
  </tr>
</table>

El resultado de este código sería el siguiente:

En este ejemplo he creado una tabla muy simple con tres filas y tres columnas e inserté una segunda tabla después de la primera fila, o sea la de los encabezados th. Esta segunda tabla solo cuenta con una fila y una columna. Como puedes ver, este es un ejemplo sencillo sobre el funcionamiento de las tablas anidadas.

Sin embargo, esto se puede volver más complejo en la medida en que necesites importar más información, pues esto podría incluso destruir la estructura de tu tabla principal.

Accesibilidad

Como desarrollador web, es muy importante tomar en cuenta el término «accesibilidad«, un término que es tan fundamental en la creación de páginas web. Sería un error grave dejar por fuera los asuntos de accesibilidad, y en este aspecto, las tablas no se quedan atrás. Al optimizar las tablas, se estaría alcanzando a más usuarios, especialmente a aquellos con discapacidades ya sea motoras o visuales.

Hay una serie de aspectos importantes a tomar en cuenta al momento de iniciar un proyecto:

• Estructura semántica: Es importante crear tablas con una correcta estructura semántica y cuidar que todos los elementos de la tabla cuenten cada uno con su respectiva etiqueta de apertura y cierre.
• Utilizar atributos scope y header: Para la correcta identificación de los encabezados tanto de celdas como de filas, así facilitaremos el trabajo a los lectores de pantalla para leer los datos de la tabla.
• Utilizar el elemento caption: Siempre al crear una tabla definir el título mediante el elemento <caption>, de esta forma le proporcionamos a la tabla la capacidad de autodefinir de qué trata la información a mostrar.
• Contraste y fuentes que sean faciles de visualizar: Crear tablas que sean cómodamente legibles es algo invaluable para personas con discapacidades visuales, de aquí la importancia de definir colores y fuentes que sean fáciles de leer y que no interfieran con la correcta visualización de la información.
• Navegación por teclado: Tomar en cuenta a usuarios con discapacidades motoras, es importante, esto también es algo a considerar para crear tablas que sean capaces de aceptar la interacción mediante el uso del teclado.
• Pruebas y validación: Probar si realmente una tabla es accesible es fundamental. Una forma de hacerlo es utilizando sitios como Web Accessibility Evaluation Tool, donde le ingresas la URL de tu sitio y enseguida te mostrará una serie de aspectos a tener en cuenta si no se detecta la accesibilidad incluso en las tablas.
• Diseño responsive y móvil: Es importante incorporar caractisticas avanzadas de CSS como las media queries, CSS Grid, incluso Flexbox, ya que las mismas permiten la creacion de tablas fluidas capaces de adaptars a cualquioer pantalla.
• Utilice encabezados de columna y fila: Los encabezados de columna y fila ayudan a los usuarios a comprender la estructura de la tabla.
• Evite las celdas vacías: Las celdas vacías pueden confundir a los lectores de pantalla.
• Etiquete las celdas de encabezado: Las celdas de encabezado deben etiquetarse claramente para que los lectores de pantalla puedan identificarlas.
• Utilice el atributo alt: El atributo alt se utiliza para definir texto alternativo para las imágenes. Lo cual de utilidad para las personas que utilizan tecnologías asistivas para poder reconocer las imágenes.

Estilos con CSS aplicando estilos básicos

El aspecto de las tablas se puede mejorar significativamente con CSS. Esto incluye estilos para bordes, espaciado entre celdas, colores, hover effects, paddings, etc. Veamos cómo se aplican algunos estilos básicos a una tabla HTML.

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

En este ejemplo, he indicado mediante CSS que el borde de la tabla será fino y no grueso como viene por defecto en una tabla. Esto lo he definido con la propiedad border-collapse y su valor collapse.

Luego definí un borde de 1px (píxel) de tipo solid (continuo) para los encabezados. También he definido un padding (espaciado del contenido respecto a su contenedor) de 8px. Por último, he alineado el texto de la tabla a la izquierda utilizando la regla text-align: left.

Por mencionar algo importante, si te diste cuenta, para definir estilos a los encabezados th, he utilizado la sintaxis tr, td { estilos }. Esta es una forma de aplicar estilos a elementos HTML y se les denomina selectores.

Estos términos quizás te parezcan en chino por ahora, pero tranquilo, ya llegarás allí y verás lo simple que es, y dichos términos ya no serán tan desconocidos para ti. Por ahora, solo analiza y familiarízate con el ejemplo.

Por último, en la regla tr:nth-child(even) lo que hago es aplicar un color de fondo gris claro a las filas que sean pares. Esto lo definí con la propiedad background-color y su valor #f2f2f2. De igual forma, por ahora no te preocupes si no entiendes nada de esto, mejor veamos cómo quedó el ejemplo.

Como observas, he reutilizado un ejemplo de los que ya vimos, en donde indicamos a CSS que solo aplique estilos a las filas pares, en este caso, la fila de «Edad» y «Correo electrónico» respectivamente.

Sin duda alguna, al utilizar CSS en las tablas HTML las posibilidades son infinitas, ya que existen mil formas de personalizar una tabla a través de CSS.

De la misma manera, es posible crear tablas HTML que tengan cierto comportamiento. Esto se logra mediante un lenguaje de programación puro llamado JavaScript.

Sin embargo, no considero pertinente ni adecuado adentrarme en esos temas asumiendo que estás comenzando. Por tanto, por ahora nos saltaremos ese paso.

Ya llegará un post indicado para ese momento y para explicar lo que implica el uso de JavaScript para dotar a una tabla de características increíbles, ya que al ser un lenguaje de programación, eso nos permite hacer infinidad de cosas.

Pero, si te gana la curiosidad de conocer las tecnologías mencionadas, te sugiero los siguientes sitios:

• JavaScript primeros pasos: Un lugar referente del desarrollo web como MDN para adentrarte profundamente en JavaScript, CSS y HTML.
• CSS primeros pasos: De igual forma, es una guía muy completa sobre CSS.
• Conceptos básicos de las tablas HTML: Por si quieres seguir aprendiendo sobre tablas en HTML, además de muchas otras áreas del lenguaje

Conclusión

Las tablas en HTML son un elemento fundamental que, cuando se utilizan adecuadamente, pueden mejorar significativamente la presentación de datos en la web. en esta Guía completa sobre tablas en HTML lo que necesitas saber, he intentado cubrir justamnete eso, todo lo necesario para que aprendes a dominar la tablas a un nivel avanzado, Comenzamos conociendo la estructura basica de una tabla, luego aprendimos a crear encabezados para que una tabla se vea con una estructura mas profesional al momento de presentar los datos.

También conocimos los elementos semánticos de una tabla y su importancia en la semántica web. Conocimos los atributos que ya no se recomienda utilizar de forma directa dentro de una tabla. Aprendimos a fusionar celdas a través de los atributos rowspan y colspan. De igual forma, aprendimos a definir filas y columnas mediante el atributo scope.

Aprendimos a anidar tablas. Vimos ejemplos de cómo una tabla anidada dentro de otra puede entorpecer el diseño de la tabla actual. También vimos algunos conceptos relacionados con la accesibilidad web y la importancia de incorporar este concepto incluso antes de pensar en presentar una tabla en una página web.

Finalmente, aplicamos algunos estilos de ejemplo a una tabla, pero a su vez evitamos profundizar mucho, ya que no es conveniente en este punto de nuestro conocimiento.

Espero que esta guía te haya sido de utilidad y, si consideras que te aportó algún valor, te invito a que dejes tu comentario o tu sugerencia. Estoy abierto a tus peticiones o aportaciones, siempre y cuando sean constructivas.

Si deseas saber sobre algún tema, no dudes en pedirlo en la caja de comentarios. Estaré encantado de que el próximo post sea el tema que sugeriste. ¡Hasta la próxima y no olvides compartir el blog con tus contactos! ¡Hasta luego!