▷ TABLAS con HTML y CSS

  

📋 Cómo crear y estilizar tablas con HTML y CSS

Las tablas en HTML son una herramienta fundamental para organizar y mostrar información estructurada, como horarios, reportes o listas de datos. En este artículo aprenderás cómo construir tablas desde cero, aplicarles estilos con CSS y conocerás sus principales características.

---

🧱 ¿Qué es una tabla en HTML?

Una tabla es una estructura que organiza información en filas y columnas. En HTML, se representa con la etiqueta <table>, y se complementa con otras etiquetas como:

• <tr> – Fila (table row)
• <td> – Celda de datos (table data)
• <th> – Encabezado de columna (table header)
• <thead>, <tbody>, <tfoot> – Para organizar la tabla en secciones (opcional pero útil)

---

✅ Ejemplo básico de tabla en HTML

A continuación, un ejemplo simple con encabezados y tres filas de datos:

<table>
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Edad</th>
      <th>País</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana</td>
      <td>25</td>
      <td>México</td>
    </tr>
    <tr>
      <td>Luis</td>
      <td>30</td>
      <td>Argentina</td>
    </tr>
    <tr>
      <td>Sofía</td>
      <td>28</td>
      <td>España</td>
    </tr>
  </tbody>
</table>

---

🎨 Cómo aplicar estilo a las tablas con CSS

Las tablas se ven muy básicas sin estilos. Aquí te muestro cómo mejorar su apariencia con CSS:

<style>
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}

th {
  background-color: #f4f4f4;
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}
</style>

🔸 border-collapse: elimina espacios entre bordes de celdas.
🔸 nth-child(even): alterna el color de filas para mejorar la lectura.

---

📌 Características principales de las tablas en HTML

• Permiten organizar datos de manera clara y estructurada.
• Soportan secciones como thead, tbody y tfoot para organización lógica.
• Pueden combinar celdas con colspan (columnas) o rowspan (filas).
• Son totalmente personalizables con CSS.
• Son útiles en sitios web, paneles administrativos, reportes, dashboards, etc.

---

🛠️ Bonus: combinar celdas con colspan y rowspan

Ejemplo de celda combinada en dos columnas:

<tr>
  <td colspan="2">Combinado en dos columnas</td>
</tr>

Y en dos filas:

<tr>
  <td rowspan="2">Celda vertical</td>
  <td>Fila 1</td>
</tr>
<tr>
  <td>Fila 2</td>
</tr>

---

🚀 Conclusión

Las tablas en HTML son una herramienta clásica pero poderosa. Bien estructuradas y estilizadas, permiten mostrar información con claridad y profesionalismo. Si las combinas con CSS, puedes lograr presentaciones visuales agradables y fáciles de leer.

Recuerda: siempre organiza bien tus datos y mantén tu código limpio y comprensible. 💡

En el siguiente video te muestro como empezar a codificar tablas en tus proyectos web con HTML5 y CSS. 

🗨️ ¿Qué opinas?
Me encantaría saber tu opinión sobre este tema. Déjame un comentario aquí abajo 💬 y, si te gustó el contenido, ¡no olvides seguir el blog para no perderte las próximas publicaciones! 📚✨