Ejemplos de tabla HTML

¿Te has preguntado cómo organizar la información de manera efectiva en tu sitio web? Las tablas HTML son una herramienta poderosa que te permite presentar datos de forma clara y estructurada. En este artículo, descubrirás ejemplos de tabla HTML que no solo mejoran la estética de tus páginas, sino que también facilitan la comprensión del contenido.

A lo largo del texto, explorarás diferentes tipos de tablas y sus aplicaciones prácticas. Desde tablas simples hasta las más complejas, cada ejemplo está diseñado para inspirarte a implementar estas estructuras en tus proyectos. Conocerás los elementos clave y las mejores prácticas para crear tablas atractivas y funcionales. ¡No te quedes atrás! Aprende a transformar tu contenido con estos ejemplos útiles y efectivos que harán que tu web destaque entre la multitud.

Ejemplos De Tabla HTML

Crear tablas HTML es más fácil de lo que piensas. Aquí te muestro algunos ejemplos básicos y cómo puedes implementarlos en tus proyectos.

Tabla Simple

<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Ana</td>
<td>25</td>
</tr>
<tr>
<td>Pablo</td>
<td>30</td>
</tr>
</table>

Esta tabla simple muestra los nombres y edades de las personas.

Tabla Con Estilos

<table style="border:1px solid black;">
<tr style="background-color:lightgray;">
<th>Producto</th>
<th>Precio</th>
</tr>
<tr style="background-color:white;">
<td>Lápiz</td>
<td>$1.00</td>
</tr>
<tr style="background-color:lightblue;">
<td>Borrador</td>
<td>$0.50</td>
</tr>
</table>

Add styles to your tables to make them stand out.

Tabla Completa Con Más Datos

<table border="1">
<tr><th>ID</th><th>NOMBRE DEL EMPLEADO</th><th>PUESTO DE TRABAJO</th></tr>
<tr><td>1</td><td>Carmen García<td>Auxiliar Administrativa<td></tr>
<tr>< td >2< / td >< td >Luis Pérez< / td >< td >Gerente< / td ></ tr >
<tr>< td >3< / td >< td >María López< / td >< td >Diseñadora Gráfica< / td ></ tr >


<!-- Asegúrate de cerrar correctamente las etiquetas -->

<table/>

Mira cómo se organiza la información sobre empleados con esta tabla completa.

Tabla Interactiva (Ejemplo Básico)

<table id="miTabla">
<!-- Cuerpo de la tabla aquí -->
<script>
// Código JavaScript para hacerla interactiva.
document.getElementById("miTabla").addEventListener("click", function() {
alert("¡Has hecho clic en la tabla!");
});
<\/script>

{Esta tabla permite interacción, ofreciendo una experiencia más dinámica al usuario}.

Ejemplos De Tabla HTML Para Datos Básicos

Aquí encontrarás ejemplos prácticos de tablas HTML que son ideales para organizar datos básicos. Estas tablas son fáciles de implementar y pueden mejorar la claridad de tu contenido.

Ejemplo De Tabla Con Encabezados

Este es un ejemplo simple de una tabla con encabezados. Puedes usarlo para mostrar información relevante, como nombres y edades:

<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Ana</td>
<td>25</td>
</tr>
<tr>
<td>Pablo</td>
<td>30</td>
</tr>
<tr>
<td>Carmen</td>
<td>22</td>
</tr>
</table>

Nótese cómo los encabezados permiten identificar rápidamente el contenido.

Ejemplo De Tabla Con Datos Numéricos

Mira este ejemplo donde se muestran datos numéricos en una tabla. Es útil para presentar información cuantitativa, como ventas mensuales:

<table border="1">
<tr>
<th>Mes</th>
<th>Total Ventas ($)</th>
</tr>
<tr>
<td>Enero</td>
<td>1500</td>
</tr>
<tr>
<td>Febrero</td>
<td>2000</td></
tr>>
tr><
td>M marzo<td/>
2500<td/>
/t/r
<r/t/a/b/l/e/

Ejemplos De Tabla HTML Para Comparaciones

Las tablas son herramientas útiles para comparar información de manera clara. Aquí tienes ejemplos que facilitan la comparación de productos y precios.

Ejemplo De Tabla Comparativa De Productos

Una tabla comparativa de productos te ayuda a visualizar las diferencias clave entre ellos. Por ejemplo, puedes listar características como nombre del producto, descripción y calificación. Así es más fácil decidir cuál elegir. Aquí tienes un ejemplo:

Producto	Descripción	Calificación
Smartphone A	Pantalla 6.5″, 128GB	★★★★☆
Smartphone B	Pantalla 6.1″, 64GB	★★★☆☆
Smartphone C	Pantalla 6.7″, 256GB	★★★★★

Ejemplo De Tabla Comparativa De Precios

Una tabla comparativa de precios permite ver rápidamente las opciones más económicas. Puedes incluir columnas para el producto, precio y tienda donde lo encuentras. Así, ahorras tiempo al buscar la mejor oferta. Observa este formato:

Producto	Precio	Tienda
Laptop D	$800	Tienda X
Laptop E	$750	Tienda Y
Laptop F	$900	Tienda Z

Estas tablas no solo organizan la información, sino que también hacen que el proceso de comparación sea mucho más sencillo y eficiente para ti.

Ejemplos De Tabla HTML Con Estilos

Las tablas HTML pueden ser mucho más que simples datos en un formato rígido. Con estilos CSS, puedes transformar su apariencia y hacerlas más atractivas. A continuación, se presentan ejemplos prácticos que ilustran cómo aplicar estilos a tus tablas.

Ejemplo De Tabla Con Estilos CSS

Puedes crear una tabla con un diseño moderno utilizando CSS. Por ejemplo:

<table style="width:100%; border-collapse:collapse;">
<thead>
<tr style="background-color:#4CAF50; color:white;">
<th>Nombre</th>
<th>Edad</th>
</tr>
</thead>
<tbody>
<tr style="background-color:#f2f2f2;">
<td>Ana</td>
<td>28</td>
</tr>
<tr style="background-color:white;">
<td>Pablo</td>
<td>34</td>
</tr>
</tbody>
</table>

Este ejemplo usa colores contrastantes y alterna el fondo de las filas. Así, la información se vuelve más fácil de leer y visualmente agradable.

Ejemplo De Tabla Con Bordes Personalizados

Los bordes personalizados también pueden mejorar la estética de tu tabla. Considera este código:

<table style="border:1px solid #000; width:100%; border-collapse:collapse;">
<thead style="background-color:#ddd;">
<tr>
<th style="border:1px solid #000;">Producto</th>
<th style="border:1px solid #000;">Precio</th>
</tr>
</thead>
<tbody>
<tr><td style="border:1px solid #000;">Laptop</td><td style="border:1px solid #000;">$800</td></tr>
<tr><td style="border:1px solid #000;">Tablet</td><td style="border:1px solid #000;">$300</td></tr>
</tbody>
</table>

Aquí, cada celda tiene un borde definido, lo que le da estructura a los datos. Además, esto ayuda a separar visualmente la información para una comprensión rápida.

Ejemplos De Tabla HTML Responsivas

Las tablas responsivas son esenciales para que tu sitio web se vea bien en cualquier dispositivo. Aquí te mostramos dos ejemplos prácticos de cómo implementarlas.

Ejemplo De Tabla Responsiva Para Dispositivos Móviles

Este ejemplo muestra una tabla que se adapta a pantallas más pequeñas, como las de los teléfonos móviles. Utiliza CSS para hacer que la tabla colapse y muestre cada fila como un bloque vertical. Así puedes usar el siguiente código:

<table class="responsive">
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ana</td>
<td>28</td>
<td>ana@example.com</td>
</tr>
<tr>
<td>Carlos</td>
<td>32</td>
<td>carlos@example.com</td>
</tr>
</tbody>
</table>

<style>
.responsive {
width: 100%;
}
@media (max-width: 600px) {
.responsive thead {
display: none;
}

.responsive tr {
display: block;
margin-bottom: 15px;
}

.responsive td {
display: block;
text-align: right;

&:before {
content: attr(data-label);
float: left;
font-weight: bold;
}
}
}
</style>

En este diseño, el encabezado no se muestra en dispositivos pequeños, lo que simplifica la visualización.

Ejemplo De Tabla Responsiva Con Scroll

A veces es necesario mostrar datos extensos sin perder la funcionalidad. Aquí tienes un ejemplo de cómo implementar una tabla con scroll horizontal. Utiliza CSS para permitir desplazarse por la tabla:

<div class="table-responsive">
<table class="scrollable">
<thead>
<tr><th>ID</th><th>Producto</th><th>Precio</th></tr></thead><tbody><tr><td>1</td><td>Laptop X1</td><td>$1200</td></tr><tr><td>2</td><td>Móvil Y2</td><td>$800</td></tr><!-- más filas aquí --></tbody></table></div>

<style>.table-responsive { overflow-x:auto; } .scrollable { width:100%; }</style>

Con esta estructura, los usuarios pueden desplazar la tabla horizontalmente en pantallas pequeñas, mejorando así la experiencia de navegación.