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
Temas tratados en esta entrada
- Tabla con anchura de 100% del documento
- Tabla con borde rojo
- Tabla con borde rojo redondo
- Tabla con borde inferior
- Tabla con fondo alternado en las filas
- Tabla con color en las columnas alternadas
- Combine las rayas verticales y horizontales de Zebra
- Tabla solo con líneas horizontales
- Tabla con color en la línea que se encuentra el ratón
- Tabla responsive
Tabla con anchura de 100% del documento
Para crear una tabla que ocupe el 100% del ancho del contenedor, debes seguir estos pasos:
- Agregar la Tabla: Inserta la etiqueta <table> dentro del contenedor.
-
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. -
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. -
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:
- Agregar la Tabla: Inserta la etiqueta <table> dentro del contenedor.
-
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. -
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. -
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:
- Agregar la Tabla: Inserta la etiqueta <table> dentro del contenedor.
-
Establecer el Ancho: Asegúrate de que la tabla ocupe el 100% del ancho del
contenedor aplicando
style="width: 100%;". -
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. -
Definir Bordes Rojos: Aplica
style="border: 2px solid red;"en la etiqueta <table> para que tenga bordes rojos. -
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. -
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:
- Agregar la Tabla: Inserta la etiqueta <table> dentro del contenedor.
-
Establecer el Ancho: Asegúrate de que la tabla ocupe el 100% del ancho del
contenedor aplicando
style="width: 100%;". -
Colapso de Bordes: Utiliza
style="border-collapse: collapse;"en la tabla para combinar los bordes de celdas adyacentes. -
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. -
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:
- Agregar la Tabla: Inserta la etiqueta <table> dentro del contenedor.
-
Establecer el Ancho: Asegúrate de que la tabla ocupe el 100% del ancho del
contenedor aplicando
style="width: 100%;". -
Colapso de Bordes: Utiliza
style="border-collapse: collapse;"en la tabla para combinar los bordes de las celdas adyacentes. -
Definir Estilos de Filas Alternadas: Para crear un fondo alternado, puedes usar
la pseudo-clase
:nth-childen CSS, pero si no estás utilizando CSS externo, puedes aplicar estilos directamente en las filas. -
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 ystyle="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:
- Agregar la Tabla: Inserta la etiqueta <table> dentro del contenedor.
-
Establecer el Ancho: Asegúrate de que la tabla ocupe el 100% del ancho del
contenedor aplicando
style="width: 100%;". -
Colapso de Bordes: Utiliza
style="border-collapse: collapse;"en la tabla para combinar los bordes de las celdas adyacentes. -
Definir Estilos de Columnas Alternadas: Para crear un color alternado en las
columnas, puedes usar la pseudo-clase
:nth-childen CSS. Sin embargo, si no estás utilizando CSS externo, puedes aplicar estilos directamente en las celdas. -
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 paresstyle="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:
- Agregar la Tabla: Inserta la etiqueta <table> dentro del contenedor.
-
Establecer el Ancho: Asegúrate de que la tabla ocupe el 100% del ancho del
contenedor aplicando
style="width: 100%;". -
Colapso de Bordes: Utiliza
style="border-collapse: collapse;"en la tabla para combinar los bordes de las celdas adyacentes. -
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 usandostyle="background-color: #f2f2f2;". -
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. - 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:
- Agregar la Tabla: Inserta la etiqueta <table> dentro del contenedor.
-
Establecer el Ancho: Asegúrate de que la tabla ocupe el 100% del ancho del
contenedor aplicando
style="width: 100%;". -
Colapso de Bordes: Utiliza
style="border-collapse: collapse;"en la tabla para combinar los bordes de las celdas adyacentes. -
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. -
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:
- Agregar la Tabla: Inserta la etiqueta <table> dentro del contenedor.
-
Establecer el Ancho: Asegúrate de que la tabla ocupe el 100% del ancho del
contenedor aplicando
style="width: 100%;". -
Colapso de Bordes: Utiliza
style="border-collapse: collapse;"en la tabla para combinar los bordes de las celdas adyacentes. -
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. -
Agregar Estilo al Pasar el Ratón: Utiliza la pseudo-clase
:hoveren las filas de la tabla (<tr>) para cambiar el color de fondo al pasar el ratón. Por ejemplo, puedes usarstyle="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:
- Agregar la Tabla: Inserta la etiqueta <table> dentro del contenedor.
-
Establecer el Ancho: Asegúrate de que la tabla ocupe el 100% del ancho del
contenedor aplicando
style="width: 100%;". -
Colapso de Bordes: Utiliza
style="border-collapse: collapse;"en la tabla para combinar los bordes de las celdas adyacentes. -
Agregar Estilos CSS: Define estilos CSS para las celdas y filas de la tabla
para
mejorar su apariencia. Por ejemplo, puedes aplicar
paddingytext-align. -
Contenedor Responsive: Envolver la tabla en un contenedor adicional con la
clase
.table-responsivede 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>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias