Aprende a diseñar una tabla atractiva con HTML y CSS en pocos pasos. Descubre cómo personalizar bordes, aplicar colores y sombras, y mejorar la interacción con efectos dinámicos.
Las tablas son elementos esenciales en el desarrollo web, pero su apariencia predeterminada en HTML es bastante básica.
En este tutorial, creado por AsensiDev, aprenderás a darles un estilo atractivo utilizando CSS3, mejorando la visualización de datos en tus proyectos.
Requisitos previos
Antes de comenzar, asegúrate de contar con lo siguiente:
✅ Visual Studio Code instalado.
✅ Live Server activado para previsualizar cambios en tiempo real.
✅ Archivos index.html y styles.css creados en tu carpeta de proyecto.
Paso 1: Crear la estructura básica en HTML
En tu archivo index.html, define la estructura de la tabla con encabezados y filas de datos:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabla con Estilos</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Ciudad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan Pérez</td>
<td>21</td>
<td>Alicante</td>
</tr>
<tr>
<td>Ana Gómez</td>
<td>25</td>
<td>Barcelona</td>
</tr>
<tr>
<td>Pedro López</td>
<td>30</td>
<td>Madrid</td>
</tr>
</tbody>
</table>
</body>
</html>
🔹 Explicación del código:
<table>: Define la tabla.<thead>y<tbody>: Organizan los encabezados y datos.<th>: Encabezados de las columnas.<td>: Celdas con datos de cada fila.
Paso 2: Aplicar estilos con CSS
Para mejorar la apariencia de la tabla, agrega estos estilos en styles.css:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
table {
width: 80%;
border-collapse: collapse;
background-color: #fff;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
th, td {
padding: 12px 16px;
text-align: left;
}
th {
background-color: #6200ea;
color: white;
text-transform: uppercase;
font-size: 14px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #e0e0e0;
transform: scale(1.02);
transition: 0.2s ease-in-out;
}
🎨 ¿Qué mejoras aplicamos?
✅ Bordes colapsados para un diseño más limpio.
✅ Sombreado y bordes redondeados para un efecto más moderno.
✅ Colores alternos en filas para mejorar la legibilidad.
✅ Efecto :hover que resalta filas al pasar el mouse.
Tambien lee:
Mira el tutorial completo
Este contenido forma parte del tutorial creado por AsensiDev. Si prefieres seguir el proceso en video, aquí tienes el enlace para aprender en detalle: 👇
Ahora tienes una tabla con estilos atractivos en CSS y HTML, ideal para mostrar datos de manera organizada y visualmente llamativa. Experimenta con diferentes colores, fuentes y efectos para personalizar aún más tu diseño.
¿Quieres seguir aprendiendo? Explora más tutoriales de AsensiDev y lleva tus habilidades de desarrollo web al siguiente nivel. 🚀
