html | Space Howen

Cómo crear una tabla en HTML para mostrar datos (paso a paso)

Marzo 24, 2025 Tiempo de lectura: 12 minutos

Si estás aprendiendo HTML y necesitas mostrar información como listas, productos, notas o cualquier otro tipo de datos organizados, las tablas son una herramienta esencial.

Hoy te muestro cómo crear una tabla en HTML, qué etiquetas se usan, y cómo darle un poco de estilo para que se vea bonita.

🔧 ¿Qué es una tabla en HTML?

Una tabla en HTML se compone de filas y columnas. Cada celda se define con etiquetas específicas que te permiten organizar y mostrar información estructurada.

✍️ Estructura básica de una tabla

Aquí tienes el código mínimo para una tabla:

🧩 Explicación rápida

<table>: Contenedor de toda la tabla.
<tr>: "Table row", define una fila.
<th>: "Table header", es una celda de encabezado (en negrita).
<td>: "Table data", celda normal con datos.

🎨 Agregando estilo con CSS

Ahora vamos a mejorar su apariencia con un poco de estilo:

Y lo aplicas al mismo <table> de antes.

🧠 ¿Para qué puedes usar tablas?

Mostrar usuarios registrados
Listar productos o precios
Boletas de calificaciones
Informes y estadísticas

Cómo crear un mensaje de amor en HTML (detallito romántico con código)

Marzo 21, 2025 Tiempo de lectura: 8 minutos

¿Quieres sorprender a alguien especial con un mensaje hecho con tus propias manos… o mejor dicho, ¡con tu código!? 😍
Con solo HTML (y un poquito de CSS), puedes crear una página web romántica que diga mucho más que un simple mensaje de texto.

Hoy te enseño cómo crear una tarjeta digital de amor con HTML, paso a paso, sin complicaciones.

💻 Paso 1: Crea un archivo HTML

Abre tu editor de texto favorito (Visual Studio Code, Sublime, Notepad, etc.) y crea un archivo llamado mensaje.html.

✍️ Paso 2: Escribe el código básico

Copia y pega este código en tu archivo:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Para Ti ❤️</title>
  <style>
    body {
      background-color: #fff0f5;
      font-family: 'Georgia', serif;
      text-align: center;
      padding: 50px;
      color: #c71585;
    }
    .carta {
      background: white;
      border-radius: 10px;
      box-shadow: 0 0 10px #ccc;
      padding: 30px;
      display: inline-block;
      max-width: 500px;
    }
    h1 {
      font-size: 2.5em;
      margin-bottom: 10px;
    }
    p {
      font-size: 1.2em;
      line-height: 1.5em;
    }
  </style>
</head>
<body>
  <div class="carta">
    <h1>Te amo ❤️</h1>
    <p>
      Cada línea de este código lleva un pedacito de lo que siento por ti.<br>
      No importa cuántas etiquetas tenga la vida, tú siempre serás mi contenido favorito.<br>
      Gracias por existir. 💖
    </p>
  </div>
</body>
</html>

🖥️ Paso 3: Abre el mensaje en tu navegador

Guarda el archivo.
Haz doble clic sobre mensaje.html.
Verás una linda tarjeta romántica en tu navegador 🥰

🎁 Extra: ¿Y si lo quiero enviar?

Puedes subirlo a tu servidor web si tienes uno.
O simplemente comprimir el archivo .html y enviarlo por correo o WhatsApp con una nota tipo: "Abre este archivo. Tengo algo para ti 🥺❤️".

Crear un gesto digital como este no toma más de 10 minutos, y puede dejar una sonrisa que dure todo el día.

¿Qué es la etiqueta <div> en HTML y para qué sirve?

Marzo 10, 2025 Tiempo de lectura: 9 minutos

Si estás empezando con HTML y CSS, seguramente ya te cruzaste con la etiqueta <div>. Aunque al principio parezca que no hace nada, la verdad es que es uno de los elementos más usados en diseño web.

En este artículo te explico qué es un <div>, cómo se usa, y por qué es tan importante cuando se trata de estructurar tu sitio web.

🧱 ¿Qué es un `<div>`?

La palabra "div" viene de "division". En términos simples, un <div> es un contenedor genérico que te permite agrupar elementos HTML.

No tiene estilo propio ni significado semántico. Pero te da el control para aplicar estilos, scripts, organizar contenido y crear estructuras personalizadas.

🔧 ¿Cómo se usa?

Aquí tienes un ejemplo básico:

Esto simplemente agrupa el título y el párrafo dentro de un bloque. A simple vista, no pasa nada… ¡hasta que le agregas CSS!

🎨 Aplicando estilo con CSS

El <div> no se ve si no le pones estilo, pero en cuanto le agregas color, márgenes o bordes, empieza a cumplir su función como contenedor visual.

🔄 ¿Por qué es útil?

Organiza contenido: puedes agrupar secciones de la página (como encabezado, menú, pie de página, etc.).
Aplicar estilos de forma eficiente: en vez de aplicar estilo a cada elemento por separado, lo haces al div.
Manipular con JavaScript: puedes usar div como objetivo de interacciones dinámicas.

🧠 ¿Cuándo usar `<div>` y cuándo no?

Usa <div> cuando no haya una etiqueta semántica más específica. Por ejemplo:

✅ Correcto:

❌ Evita usarlo así:

Mejor usar etiquetas como <p>, <section>, <article>, <header>, etc., cuando apliquen.