La Propiedad CAPTION-SIDE

La propiedad caption-side se utiliza para posicionar el título CAPTION de una tabla HTML. Controla si el título aparece arriba o abajo de la tabla.

Introducción

La propiedad caption-side se utiliza para posicionar el título (<caption>) de una tabla HTML. Controla si el título aparece arriba o abajo de la tabla.

Sintaxis Básica

caption-side: top | bottom | block-start | block-end | inline-start | inline-end;

Valores Disponibles

Valores principales:

  • top (valor por defecto): Coloca el título en la parte superior de la tabla.

  • bottom: Coloca el título en la parte inferior de la tabla.

Valores lógicos (CSS Logical Properties):

  • block-start: Arriba en escritura horizontal, derecha en vertical.

  • block-end: Abajo en escritura horizontal, izquierda en vertical.

  • inline-start: Izquierda en escritura horizontal, arriba en vertical.

  • inline-end: Derecha en escritura horizontal, abajo en vertical.

Estructura HTML Requerida

Para usar caption-side, necesitas una tabla con el elemento <caption>:

<table>
  <caption>Título de mi tabla</caption>
  <thead>
    <tr>
      <th>Encabezado 1</th>
      <th>Encabezado 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dato 1</td>
      <td>Dato 2</td>
    </tr>
  </tbody>
</table>

Ejemplos Prácticos

Ejemplo 1: Título superior (por defecto)

table {
  width: 100%;
  border-collapse: collapse;
}

caption {
  caption-side: top;
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 10px;
  color: #333;
}

Ejemplo 2: Título inferior

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

caption {
  caption-side: bottom;
  font-style: italic;
  margin-top: 10px;
  color: #666;
}

Ejemplo 3: Tabla con estilos completos

<!DOCTYPE html>
<html>
<head>
<style>
.table-container {
  margin: 20px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.data-table caption {
  caption-side: top;
  font-size: 1.5em;
  font-weight: bold;
  padding: 15px;
  background: #2c3e50;
  color: white;
  border-radius: 8px 8px 0 0;
}

.data-table th,
.data-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

.data-table th {
  background-color: #34495e;
  color: white;
}

.data-table tr:nth-child(even) {
  background-color: #f8f9fa;
}
</style>
</head>
<body>

<div class="table-container">
  <table class="data-table">
    <caption>Reporte de Ventas Mensual</caption>
    <thead>
      <tr>
        <th>Mes</th>
        <th>Producto A</th>
        <th>Producto B</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Enero</td>
        <td>$1,200</td>
        <td>$800</td>
        <td>$2,000</td>
      </tr>
      <tr>
        <td>Febrero</td>
        <td>$1,500</td>
        <td>$900</td>
        <td>$2,400</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Personalización Avanzada

Ejemplo con diseño moderno:

.modern-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: white;
  border-radius: 10px;
  overflow: hidden;
}

.modern-table caption {
  caption-side: bottom;
  padding: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 1.1em;
  font-weight: 600;
  margin-top: -1px; /* Elimina espacio entre tabla y caption */
}

.modern-table th {
  background: #4a5568;
  color: white;
  padding: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.modern-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #e2e8f0;
}

Compatibilidad entre Navegadores

Navegador Soporte Notas
Chrome ✅ Completo Versiones antiguas solo soportan top/bottom
Firefox ✅ Completo Buen soporte para valores lógicos
Safari ✅ Completo -
Edge ✅ Completo -
IE ⚠️ Parcial Solo top/bottom

Mejores Prácticas

1. Accesibilidad:

/* Mejorar legibilidad para lectores de pantalla */
caption {
  caption-side: top;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
}

2. Diseño responsivo:

/* Para móviles */
@media (max-width: 768px) {
  table caption {
    caption-side: top;
    font-size: 1em;
    padding: 10px;
  }
}

3. Contraste adecuado:

caption {
  caption-side: top;
  background-color: #2c3e50;
  color: #ecf0f1;
  padding: 12px;
}

Ejemplo con Cambio Dinámico

<!DOCTYPE html>
<html>
<head>
<style>
.table-dynamic {
  width: 100%;
  border-collapse: collapse;
}

.table-dynamic caption {
  padding: 15px;
  background: #3498db;
  color: white;
  font-weight: bold;
  transition: all 0.3s ease;
}

.table-dynamic th,
.table-dynamic td {
  border: 1px solid #bdc3c7;
  padding: 10px;
}

.controls {
  margin: 20px 0;
}

button {
  padding: 10px 15px;
  margin: 5px;
  border: none;
  background: #3498db;
  color: white;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background: #2980b9;
}
</style>
</head>
<body>

<div class="controls">
  <button onclick="changeCaptionSide('top')">Título Arriba</button>
  <button onclick="changeCaptionSide('bottom')">Título Abajo</button>
</div>

<table class="table-dynamic" id="dynamicTable">
  <caption id="tableCaption">Tabla con Título Dinámico</caption>
  <thead>
    <tr>
      <th>Columna 1</th>
      <th>Columna 2</th>
      <th>Columna 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dato 1</td>
      <td>Dato 2</td>
      <td>Dato 3</td>
    </tr>
    <tr>
      <td>Dato 4</td>
      <td>Dato 5</td>
      <td>Dato 6</td>
    </tr>
  </tbody>
</table>

<script>
function changeCaptionSide(side) {
  const caption = document.getElementById('tableCaption');
  caption.style.captionSide = side;
  
  // Cambiar color según posición
  if (side === 'top') {
    caption.style.background = '#27ae60'; // Verde
  } else {
    caption.style.background = '#e74c3c'; // Rojo
  }
}
</script>

</body>
</html>

Consideraciones Importantes

  1. El elemento <caption> debe ser el primer hijo directo de <table>

  2. Solo puede haber un <caption> por tabla

  3. Los estilos se aplican al elemento <caption>, no a la tabla

  4. Funciona con display: table-caption (valor por defecto del elemento)

Resumen

La propiedad caption-side es una herramienta simple pero poderosa para:

  • Organizar la estructura visual de las tablas

  • Mejorar la experiencia de usuario

  • Mantener la accesibilidad

  • Crear diseños más limpios y profesionales