26-estilos de tablas en html

Jorge Catalao octubre 15, 2024
HTML


Hay veces que queremos personalizar nuestras tablas, para llamar la atencion

Como cualquier elemento en html tanbien las tablas pueden tener, por ejemplo bordes, tener colores en las filas o columnas etc

vamos a ver algunas ejemplos



Tabla con anchura de 100% del documento

Para crear una tabla que ocupe el 100% del ancho del contenedor, debes seguir estos pasos:

  1. Agregar la Tabla: Inserta la etiqueta <table> dentro del contenedor.
  2. Establecer el Ancho: Aplica la propiedad CSS style="width: 100%;" a la tabla. Esto asegura que la tabla se expanda para ocupar todo el ancho del contenedor.
  3. Colapso de Bordes: Para un diseño más limpio, utiliza style="border-collapse: collapse;" en la tabla. Esto combina los bordes de celdas adyacentes.
  4. Definir Bordes en las Celdas: Aplica bordes a las celdas de la tabla utilizando style="border: 1px solid #000;" en las etiquetas <th> y <td>.

Con estos pasos, la tabla estará configurada para ocupar el 100% del ancho del contenedor, mejorando su apariencia y legibilidad.


Ejemplo

Esta es una tabla que ocupa el 100% del ancho del contenedor. Hemos utilizado las propiedades CSS adecuadas para lograrlo.

Encabezado 1 Encabezado 2 Encabezado 3
Dato 1 Dato 2 Dato 3
Dato 4 Dato 5 Dato 6

Código del ejemplo 

                <!-- Tabla con ancho 100% -->
                <table style="width: 100%; border-collapse: collapse;">
                    <thead>
                        <tr>
                            <th style="border: 1px solid #000;">Encabezado 1</th>
                            <th style="border: 1px solid #000;">Encabezado 2</th>
                            <th style="border: 1px solid #000;">Encabezado 3</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="border: 1px solid #000;">Dato 1</td>
                            <td style="border: 1px solid #000;">Dato 2</td>
                            <td style="border: 1px solid #000;">Dato 3</td>
                        </tr>
                        <tr>
                            <td style="border: 1px solid #000;">Dato 4</td>
                            <td style="border: 1px solid #000;">Dato 5</td>
                            <td style="border: 1px solid #000;">Dato 6</td>
                        </tr>
                    </tbody>
                </table>


...
Tabla con borde rojo

Para crear una tabla con bordes rojos y que ocupe el 100% del ancho del contenedor, sigue estos pasos:

  1. Agregar la Tabla: Inserta la etiqueta <table> dentro del contenedor.
  2. Establecer el Ancho: Aplica la propiedad CSS style="width: 100%;" a la tabla. Esto asegurará que la tabla se expanda para ocupar todo el ancho del contenedor.
  3. Colapso de Bordes: Para un diseño más limpio, utiliza style="border-collapse: collapse;" en la tabla. Esto combina los bordes de celdas adyacentes.
  4. Definir Bordes Rojos: Para obtener bordes rojos, aplica style="border: 2px solid red;" en la etiqueta <table> y también en las celdas <th> y <td>. Esto asegurará que tanto la tabla como sus celdas tengan bordes rojos.

Con estos pasos, tu tabla no solo ocupará el 100% del ancho del contenedor, sino que también tendrá bordes rojos, mejorando su visibilidad.


Ejemplo

Esta es una tabla que ocupa el 100% del ancho del contenedor y tiene bordes rojos.

Encabezado 1 Encabezado 2 Encabezado 3
Dato 1 Dato 2 Dato 3
Dato 4 Dato 5 Dato 6

Código del ejemplo 

                <!-- Tabla con bordes rojos y ancho 100% -->
                <table style="width: 100%; border-collapse: collapse; border: 2px solid red;">
                    <thead>
                        <tr>
                            <th style="border: 2px solid red;">Encabezado 1</th>
                            <th style="border: 2px solid red;">Encabezado 2</th>
                            <th style="border: 2px solid red;">Encabezado 3</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="border: 2px solid red;">Dato 1</td>
                            <td style="border: 2px solid red;">Dato 2</td>
                            <td style="border: 2px solid red;">Dato 3</td>
                        </tr>
                        <tr>
                            <td style="border: 2px solid red;">Dato 4</td>
                            <td style="border: 2px solid red;">Dato 5</td>
                            <td style="border: 2px solid red;">Dato 6</td>
                        </tr>
                    </tbody>
                </table>


Tabla con Borde Rojo Redondo

Para crear una tabla que tenga bordes rojos y redondeados, puedes seguir estos pasos:

  1. Agregar la Tabla: Inserta la etiqueta <table> dentro del contenedor.
  2. Establecer el Ancho: Asegúrate de que la tabla ocupe el 100% del ancho del contenedor aplicando style="width: 100%;".
  3. Colapso de Bordes: Para un diseño más limpio, utiliza style="border-collapse: collapse;" en la tabla, lo que combina los bordes de las celdas adyacentes.
  4. Definir Bordes Rojos: Aplica style="border: 2px solid red;" en la etiqueta <table> para que tenga bordes rojos.
  5. Bordes Redondeados: Para conseguir bordes redondeados, añade style="border-radius: 8px;" a la etiqueta <table>. Esto hará que los bordes de la tabla sean redondeados en las esquinas.
  6. Definir Bordes de las Celdas: Aplica bordes a las celdas de la tabla utilizando style="border: 1px solid red;" en las etiquetas <th> y <td>. Esto asegurará que los bordes de las celdas también sean rojos.

Siguiendo estos pasos, tu tabla tendrá bordes rojos y redondeados, lo que mejorará su presentación visual.


Ejemplo

Esta tabla tiene bordes rojos y esquinas redondeadas visibles en el contorno externo.

Encabezado 1 Encabezado 2 Encabezado 3
Dato 1 Dato 2 Dato 3
Dato 4 Dato 5 Dato 6

Código del ejemplo 

                <!-- Tabla con bordes rojos y redondeados -->
                <table
                    style="width: 100%; border: 2px solid red; border-radius: 8px; border-collapse: separate; border-spacing: 0;">
                    <thead>
                        <tr>
                            <th style="border: 1px solid red;">Encabezado 1</th>
                            <th style="border: 1px solid red;">Encabezado 2</th>
                            <th style="border: 1px solid red;">Encabezado 3</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="border: 1px solid red;">Dato 1</td>
                            <td style="border: 1px solid red;">Dato 2</td>
                            <td style="border: 1px solid red;">Dato 3</td>
                        </tr>
                        <tr>
                            <td style="border: 1px solid red;">Dato 4</td>
                            <td style="border: 1px solid red;">Dato 5</td>
                            <td style="border: 1px solid red;">Dato 6</td>
                        </tr>
                    </tbody>
                </table>


Tabla con Borde Inferior

Para crear una tabla que tenga un borde solo en la parte inferior, puedes seguir estos pasos:

  1. Agregar la Tabla: Inserta la etiqueta <table> dentro del contenedor.
  2. Establecer el Ancho: Asegúrate de que la tabla ocupe el 100% del ancho del contenedor aplicando style="width: 100%;".
  3. Colapso de Bordes: Utiliza style="border-collapse: collapse;" en la tabla para combinar los bordes de celdas adyacentes.
  4. Definir el Borde Inferior: Para aplicar un borde solo en la parte inferior de la tabla, utiliza style="border-bottom: 2px solid red;" en la etiqueta <table>. Esto añadirá un borde inferior rojo, mientras que los otros bordes no tendrán ningún estilo.
  5. Opcional - Borde Inferior en Celdas: Si deseas que las celdas también tengan un borde inferior, puedes aplicar style="border-bottom: 1px solid red;" en las etiquetas <th> y <td>. Esto hará que cada celda tenga su propio borde inferior.

Siguiendo estos pasos, tu tabla tendrá un borde solo en la parte inferior, lo que puede ser útil para resaltar encabezados o secciones específicas.


Ejemplo

Esta tabla tiene un borde rojo solo en la parte inferior.

Encabezado 1 Encabezado 2 Encabezado 3
Dato 1 Dato 2 Dato 3
Dato 4 Dato 5 Dato 6

Código del ejemplo 

                <!-- Tabla con borde inferior -->
                <table style="width: 100%; border-collapse: collapse; border-bottom: 2px solid red;">
                    <thead>
                        <tr>
                            <th style="border-bottom: 1px solid red;">Encabezado 1</th>
                            <th style="border-bottom: 1px solid red;">Encabezado 2</th>
                            <th style="border-bottom: 1px solid red;">Encabezado 3</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="border-bottom: 1px solid red;">Dato 1</td>
                            <td style="border-bottom: 1px solid red;">Dato 2</td>
                            <td style="border-bottom: 1px solid red;">Dato 3</td>
                        </tr>
                        <tr>
                            <td style="border-bottom: 1px solid red;">Dato 4</td>
                            <td style="border-bottom: 1px solid red;">Dato 5</td>
                            <td style="border-bottom: 1px solid red;">Dato 6</td>
                        </tr>
                    </tbody>
                </table>


Tabla con Fondo Alternado en las Filas

Para crear una tabla que tenga un fondo alternado en las filas, puedes seguir estos pasos:

  1. Agregar la Tabla: Inserta la etiqueta <table> dentro del contenedor.
  2. Establecer el Ancho: Asegúrate de que la tabla ocupe el 100% del ancho del contenedor aplicando style="width: 100%;".
  3. Colapso de Bordes: Utiliza style="border-collapse: collapse;" en la tabla para combinar los bordes de las celdas adyacentes.
  4. Definir Estilos de Filas Alternadas: Para crear un fondo alternado, puedes usar la pseudo-clase :nth-child en CSS, pero si no estás utilizando CSS externo, puedes aplicar estilos directamente en las filas.
  5. Ejemplo de Alternancia: Aplica un color de fondo diferente en las filas. Por ejemplo, puedes establecer el color de fondo de las filas impares utilizando style="background-color: #f2f2f2;" en las filas impares y style="background-color: #ffffff;" en las filas pares.

Siguiendo estos pasos, tu tabla tendrá un fondo alternado en las filas, lo que mejora la legibilidad y el aspecto visual de los datos presentados.


Ejemplo

Esta tabla tiene un fondo alternado en las filas para mejorar la legibilidad.

Encabezado 1 Encabezado 2 Encabezado 3
Dato 1 Dato 2 Dato 3
Dato 4 Dato 5 Dato 6
Dato 7 Dato 8 Dato 9

Código del ejemplo 

                <!-- Tabla con filas alternadas -->
                <table style="width: 100%; border-collapse: collapse;">
                    <thead>
                        <tr>
                            <th style="border: 1px solid #000;">Encabezado 1</th>
                            <th style="border: 1px solid #000;">Encabezado 2</th>
                            <th style="border: 1px solid #000;">Encabezado 3</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr style="background-color: #37689f;">
                            <td style="border: 1px solid #000;">Dato 1</td>
                            <td style="border: 1px solid #000;">Dato 2</td>
                            <td style="border: 1px solid #000;">Dato 3</td>
                        </tr>
                        <tr style="background-color: #ffffff;">
                            <td style="border: 1px solid #000;">Dato 4</td>
                            <td style="border: 1px solid #000;">Dato 5</td>
                            <td style="border: 1px solid #000;">Dato 6</td>
                        </tr>
                        <tr style="background-color: #37689f;">
                            <td style="border: 1px solid #000;">Dato 7</td>
                            <td style="border: 1px solid #000;">Dato 8</td>
                            <td style="border: 1px solid #000;">Dato 9</td>
                        </tr>
                    </tbody>
                </table>


Tabla con Color en las Columnas Alternadas

Para crear una tabla que tenga un color alternado en las columnas, puedes seguir estos pasos:

  1. Agregar la Tabla: Inserta la etiqueta <table> dentro del contenedor.
  2. Establecer el Ancho: Asegúrate de que la tabla ocupe el 100% del ancho del contenedor aplicando style="width: 100%;".
  3. Colapso de Bordes: Utiliza style="border-collapse: collapse;" en la tabla para combinar los bordes de las celdas adyacentes.
  4. Definir Estilos de Columnas Alternadas: Para crear un color alternado en las columnas, puedes usar la pseudo-clase :nth-child en CSS. Sin embargo, si no estás utilizando CSS externo, puedes aplicar estilos directamente en las celdas.
  5. Ejemplo de Alternancia: Aplica un color de fondo diferente en las celdas de las columnas impares y pares. Por ejemplo, puedes establecer el color de fondo de las celdas en columnas impares utilizando style="background-color: #f2f2f2;" y en columnas pares style="background-color: #ffffff;".

Siguiendo estos pasos, tu tabla tendrá colores alternados en las columnas, lo que ayudará a diferenciar visualmente los datos presentados y mejorar la legibilidad.


Ejemplo

Esta tabla tiene un color alternado en las columnas para mejorar la legibilidad.

Encabezado 1 Encabezado 2 Encabezado 3
Dato 1 Dato 2 Dato 3
Dato 4 Dato 5 Dato 6
Dato 7 Dato 8 Dato 9

Código del ejemplo 

                <!-- Tabla con columnas alternadas -->
                <table style="width: 100%; border-collapse: collapse;">
                    <thead>
                        <tr>
                            <th style="border: 1px solid #000; background-color: #37689f; color: white;">Encabezado
                                1</th>
                            <th style="border: 1px solid #000; background-color: #ffffff;">Encabezado 2</th>
                            <th style="border: 1px solid #000; background-color: #37689f; color: white;">Encabezado
                                3</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="border: 1px solid #000; background-color: #37689f; color: white;">Dato 1</td>
                            <td style="border: 1px solid #000; background-color: #ffffff;">Dato 2</td>
                            <td style="border: 1px solid #000; background-color: #37689f; color: white;">Dato 3</td>
                        </tr>
                        <tr>
                            <td style="border: 1px solid #000; background-color: #37689f; color: white;">Dato 4</td>
                            <td style="border: 1px solid #000; background-color: #ffffff;">Dato 5</td>
                            <td style="border: 1px solid #000; background-color: #37689f; color: white;">Dato 6</td>
                        </tr>
                        <tr>
                            <td style="border: 1px solid #000; background-color: #37689f; color: white;">Dato 7</td>
                            <td style="border: 1px solid #000; background-color: #ffffff;">Dato 8</td>
                            <td style="border: 1px solid #000; background-color: #37689f; color: white;">Dato 9</td>
                        </tr>
                    </tbody>
                </table>


Combinar las Rayas Verticales y Horizontales de Zebra

Para crear una tabla que combine rayas verticales y horizontales al estilo zebra, puedes seguir estos pasos:

  1. Agregar la Tabla: Inserta la etiqueta <table> dentro del contenedor.
  2. Establecer el Ancho: Asegúrate de que la tabla ocupe el 100% del ancho del contenedor aplicando style="width: 100%;".
  3. Colapso de Bordes: Utiliza style="border-collapse: collapse;" en la tabla para combinar los bordes de las celdas adyacentes.
  4. Definir Rayas Horizontales Alternadas: Para aplicar rayas horizontales, utiliza la pseudo-clase :nth-child(odd) para dar color de fondo a las filas impares. Por ejemplo, establece el color de fondo de las filas impares usando style="background-color: #f2f2f2;".
  5. Definir Rayas Verticales Alternadas: Para aplicar rayas verticales, puedes aplicar un color de fondo diferente a las celdas de las columnas impares. Utiliza style="background-color: #e0e0e0;" en las celdas impares de cada fila.
  6. Ejemplo de Combinación: Al aplicar ambos estilos, las celdas de las filas impares tendrán un color de fondo claro, y las celdas de las columnas impares dentro de esas filas tendrán un color alternado, creando un efecto de rayas zebra tanto horizontal como vertical.

Siguiendo estos pasos, tu tabla tendrá un diseño atractivo que facilita la lectura de los datos al combinar rayas verticales y horizontales.


Ejemplo

Esta tabla combina rayas verticales y horizontales utilizando Bootstrap:

Nombre Edad Ciudad País Profesión Hobbies
Juan 25 Madrid España Ingeniero Fútbol, Lectura
Ana 30 Barcelona España Diseñadora Arte, Viajes
Pedro 22 Valencia España Estudiante Música, Cine
Lucía 28 Sevilla España Abogada Deportes, Cocina
David 35 Bilbao España Médico Senderismo, Fotografía

Código del ejemplo 

                <table class="table table-striped" style="width: 100%;">
                <thead>
                    <tr>
                        <th>Nombre</th>
                        <th class="bg-info">Edad</th>
                        <th>Ciudad</th>
                        <th class="bg-info">País</th>
                        <th>Profesión</th>
                        <th class="bg-info">Hobbies</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Juan</td>
                        <td class="bg-info">25</td>
                        <td>Madrid</td>
                        <td class="bg-info">España</td>
                        <td>Ingeniero</td>
                        <td class="bg-info">Fútbol, Lectura</td>
                    </tr>
                    <tr>
                        <td>Ana</td>
                        <td class="bg-info">30</td>
                        <td>Barcelona</td>
                        <td class="bg-info">España</td>
                        <td>Diseñadora</td>
                        <td class="bg-info">Arte, Viajes</td>
                    </tr>
                    <tr>
                        <td>Pedro</td>
                        <td class="bg-info">22</td>
                        <td>Valencia</td>
                        <td class="bg-info">España</td>
                        <td>Estudiante</td>
                        <td class="bg-info">Música, Cine</td>
                    </tr>
                    <tr>
                        <td>Lucía</td>
                        <td class="bg-info">28</td>
                        <td>Sevilla</td>
                        <td class="bg-info">España</td>
                        <td>Abogada</td>
                        <td class="bg-info">Deportes, Cocina</td>
                    </tr>
                    <tr>
                        <td>David</td>
                        <td class="bg-info">35</td>
                        <td>Bilbao</td>
                        <td class="bg-info">España</td>
                        <td>Médico</td>
                        <td class="bg-info">Senderismo, Fotografía</td>
                    </tr>
                </tbody>
            </table>


Tabla Solo con Líneas Horizontales

Para crear una tabla que solo tenga líneas horizontales, puedes seguir estos pasos:

  1. Agregar la Tabla: Inserta la etiqueta <table> dentro del contenedor.
  2. Establecer el Ancho: Asegúrate de que la tabla ocupe el 100% del ancho del contenedor aplicando style="width: 100%;".
  3. Colapso de Bordes: Utiliza style="border-collapse: collapse;" en la tabla para combinar los bordes de las celdas adyacentes.
  4. Agregar Bordes Horizontales: Aplica bordes solo a las filas de la tabla. Esto se puede lograr utilizando style="border-bottom: 1px solid #ccc;" en las celdas de las filas, asegurando que se muestren líneas solo entre las filas.
  5. Eliminar Bordes Verticales: Para que no aparezcan líneas verticales, asegúrate de que las celdas no tengan bordes laterales. Esto se puede conseguir dejando el borde lateral de las celdas en blanco o con style="border-left: none; border-right: none;".

Siguiendo estos pasos, tu tabla tendrá un diseño limpio y sencillo, con líneas visibles solo entre las filas, lo que facilita la visualización de los datos sin distracciones verticales.


Ejemplo

Tabla con Líneas Horizontales

Nombre Edad País Hobbies
Juan 30 Argentina Futbol
María 25 Chile Cocinar
Luis 35 México Leer

Código del ejemplo 

                <table class="table" style="border-collapse: collapse; width: 100%;">
                <thead>
                    <tr>
                        <th>Nombre</th>
                        <th>Edad</th>
                        <th>País</th>
                        <th>Hobbies</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="border-bottom: 1px solid #ccc;">Juan</td>
                        <td style="border-bottom: 1px solid #ccc;">30</td>
                        <td style="border-bottom: 1px solid #ccc;">Argentina</td>
                        <td style="border-bottom: 1px solid #ccc;">Futbol</td>
                    </tr>
                    <tr>
                        <td style="border-bottom: 1px solid #ccc;">María</td>
                        <td style="border-bottom: 1px solid #ccc;">25</td>
                        <td style="border-bottom: 1px solid #ccc;">Chile</td>
                        <td style="border-bottom: 1px solid #ccc;">Cocinar</td>
                    </tr>
                    <tr>
                        <td style="border-bottom: 1px solid #ccc;">Luis</td>
                        <td style="border-bottom: 1px solid #ccc;">35</td>
                        <td style="border-bottom: 1px solid #ccc;">México</td>
                        <td style="border-bottom: 1px solid #ccc;">Leer</td>
                    </tr>
                </tbody>
            </table>


Tabla con Color en la Línea que se Encuentra el Ratón

Para crear una tabla que cambie el color de la fila al pasar el ratón sobre ella, puedes seguir estos pasos:

  1. Agregar la Tabla: Inserta la etiqueta <table> dentro del contenedor.
  2. Establecer el Ancho: Asegúrate de que la tabla ocupe el 100% del ancho del contenedor aplicando style="width: 100%;".
  3. Colapso de Bordes: Utiliza style="border-collapse: collapse;" en la tabla para combinar los bordes de las celdas adyacentes.
  4. Estilo por Defecto de las Filas: Define un color de fondo por defecto para las filas de la tabla utilizando la propiedad CSS background-color.
  5. Agregar Estilo al Pasar el Ratón: Utiliza la pseudo-clase :hover en las filas de la tabla (<tr>) para cambiar el color de fondo al pasar el ratón. Por ejemplo, puedes usar style="background-color: #e0e0e0;" para el efecto hover.

Siguiendo estos pasos, tu tabla permitirá a los usuarios identificar fácilmente la fila en la que se encuentran, mejorando la usabilidad y la experiencia visual.


Ejemplo

Tabla con Efecto Hover

Nombre Edad País Hobbies
Juan 25 España Fútbol, Cine
Maria 30 Argentina Leer, Viajar
Pedro 22 Chile Música, Deportes
Ana 28 Colombia Cocina, Artes

Código del ejemplo 

                <table class="table table-hover" style="width: 100%;">
                <thead>
                    <tr>
                        <th>Nombre</th>
                        <th>Edad</th>
                        <th>País</th>
                        <th>Hobbies</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Juan</td>
                        <td>25</td>
                        <td>España</td>
                        <td>Fútbol, Cine</td>
                    </tr>
                    <tr>
                        <td>Maria</td>
                        <td>30</td>
                        <td>Argentina</td>
                        <td>Leer, Viajar</td>
                    </tr>
                    <tr>
                        <td>Pedro</td>
                        <td>22</td>
                        <td>Chile</td>
                        <td>Música, Deportes</td>
                    </tr>
                    <tr>
                        <td>Ana</td>
                        <td>28</td>
                        <td>Colombia</td>
                        <td>Cocina, Artes</td>
                    </tr>
                </tbody>
            </table>


Tabla Responsive

Para crear una tabla que sea responsive y se adapte a diferentes tamaños de pantalla, puedes seguir estos pasos:

  1. Agregar la Tabla: Inserta la etiqueta <table> dentro del contenedor.
  2. Establecer el Ancho: Asegúrate de que la tabla ocupe el 100% del ancho del contenedor aplicando style="width: 100%;".
  3. Colapso de Bordes: Utiliza style="border-collapse: collapse;" en la tabla para combinar los bordes de las celdas adyacentes.
  4. Agregar Estilos CSS: Define estilos CSS para las celdas y filas de la tabla para mejorar su apariencia. Por ejemplo, puedes aplicar padding y text-align.
  5. Contenedor Responsive: Envolver la tabla en un contenedor adicional con la clase .table-responsive de Bootstrap. Esto permitirá que la tabla sea scrollable en dispositivos más pequeños.

Siguiendo estos pasos, tu tabla será más accesible y usable en diferentes dispositivos, permitiendo que los usuarios naveguen fácilmente por los datos sin perder información.


Ejemplo

Tabla Responsive

Nombre Edad País Hobbies
Juan 25 España Fútbol, Cine
Maria 30 Argentina Leer, Viajar
Pedro 22 Chile Música, Deportes
Ana 28 Colombia Cocina, Artes

Código del ejemplo 

                <div class="table-responsive">
                <table class="table" style="width: 100%;">
                    <thead>
                        <tr>
                            <th>Nombre</th>
                            <th>Edad</th>
                            <th>País</th>
                            <th>Hobbies</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Juan</td>
                            <td>25</td>
                            <td>España</td>
                            <td>Fútbol, Cine</td>
                        </tr>
                        <tr>
                            <td>Maria</td>
                            <td>30</td>
                            <td>Argentina</td>
                            <td>Leer, Viajar</td>
                        </tr>
                        <tr>
                            <td>Pedro</td>
                            <td>22</td>
                            <td>Chile</td>
                            <td>Música, Deportes</td>
                        </tr>
                        <tr>
                            <td>Ana</td>
                            <td>28</td>
                            <td>Colombia</td>
                            <td>Cocina, Artes</td>
                        </tr>
                    </tbody>
                </table>
            </div>



Tags:
Jorge Catalao

Posted by: Jorge Catalao

Durante el decorrer de los años y ya desde niño mis gustos preferidos, fue siempre la electrónica y la programación, eso que llevo a que me formase en varias escuelas profesionales, en temas tales como: electrónica Electricidad programación Técnicas de refrigeración etc. Tengo varias carreras profesionales relacionadas a los temas anteriormente descritos, precisamente por ese motivo, me he entusiasmado a crear un blog donde los temas serán los mencionados anteriormente. Espero que a mis visitantes les guste, y se aprovechen de los conocimientos que llevo años recopilando. Si eres estudiante de electricidad, electrónica o programación, aquí vas adquirir los conocimientos básicos, tanto para que continúes tus estudios, como para tu formación profesional. Cursos completos desde cero, los iré recopilando poco a poco, los cuales servirán para consulta tanto de estudiantes como electricistas profesionales, será como un manual o mas bien dicho un resumen donde podremos encontrar lo que necesitamos. Bueno espero que vos guste y me seguis, ya que los temas los ire duplicar tanto nel blog, como en mi canal de youtube.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias