Tecnología Electrónica

Cómo cambiar color de fuente en tabla HTML (HTML inline, CSS clase, estilos modernos)

Cambiar color de texto en tablas HTML se hace con CSS. El método obsoleto <font color="..."> (HTML 3.2, deprecado 1998, obsoleto HTML5) no debe usarse. Aquí la forma correcta moderna.

1. Estilo en línea (inline style) — Rápido, solo una celda/fila/tabla

<!-- Celda individual -->
<td style="color: #e91e63;">Texto rosa</td>

<!-- Fila completa -->
<tr style="color: #1565c0;">
  <td>Celda 1</td><td>Celda 2</td>
</tr>

<!-- Tabla completa -->
<table style="color: #2e7d32;">
  <tr><td>Todo verde</td></tr>
</table>

Valores de color: Nombre (red, blue), Hex (#ff0000, #f00), RGB/RGBA (rgb(255,0,0), rgba(255,0,0,0.8)), HSL/HSLA (hsl(0,100%,50%)).

2. CSS en <style> (en <head>) — Reutilizable, mantenible

<style>
  /* Clase para celdas destacadas */
  .destacado { color: #d32f2f; font-weight: bold; }

  /* Filas alternadas (zebra striping) solo CSS */
  tabla-zebra tbody tr:nth-child(odd)  { background: #f5f5f5; color: #212121; }
  tabla-zebra tbody tr:nth-child(even) { background: #fff;     color: #212121; }

  /* Cabecera distinta */
  .tabla-pro thead th { color: #fff; background: #1565c0; }

  /* Estado hover fila */
  .tabla-pro tbody tr:hover { color: #fff; background: #1976d2; }
</style>

<table class="tabla-pro tabla-zebra">
  <thead><tr><th>Producto</th><th>Precio</th></tr></thead>
  <tbody>
    <tr><td>Manzana</td><td class="destacado">$1.20</td></tr>
    <tr><td>Pera</td><td>$1.50</td></tr>
  </tbody>
</table>

3. CSS externo (.css) — Profesional, cacheable, separa contenido/presentación

<!-- HTML -->
<link rel="stylesheet" href="estilos.css">
<table class="tabla-factura">...</table>

/* estilos.css */
.tabla-factura { color: #333; font-family: system-ui, sans-serif; border-collapse: collapse; width: 100%; }
.tabla-factura th, .tabla-factura td { padding: 0.75rem; border: 1px solid #ddd; text-align: left; }
.tabla-factura thead th { color: #fff; background: #2c3e50; }
.tabla-factura tbody tr:nth-child(even) { background: #fafafa; }
.tabla-factura .total { color: #c62828; font-weight: 700; }

4. Email HTML (Limitado: solo inline + <style> en head, sin media queries complejos en algunos clientes)

<td style="color: #2c3e50; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.5;">Texto</td>
<!-- Algunos clientes (Outlook Windows) ignoran