Grupos de columnas en tablas HTML

Sintaxis y Uso

El elemento <colgroup> en HTML agrupa columnas dentro de una tabla y aplica estilos o formato a esas columnas. Se coloca dentro del elemento <table>, generalmente después del <caption> (si está presente) y antes de cualquier elemento <thead>, <tbody>, o <tfoot>.

<table>
  <colgroup>
    <col>
    <col>
    ...
  </colgroup>
  ...
</table>

Dentro del elemento <colgroup>, puedes usar uno o más elementos <col> para representar cada columna o grupo de columnas. Los elementos <col> están vacíos y no tienen ningún contenido. Sirven como referencia para aplicar estilos o atributos a las columnas correspondientes.

<table>
  <colgroup>
    <col>
    <col span="2">
    <col>
  </colgroup>
  <tr>
    <th>Columna 1</th>
    <th>Columna 2</th>
    <th>Columna 3</th>
    <th>Columna 4</th>
  </tr>
  <tr>
    <td>Dato 1</td>
    <td>Dato 2</td>
    <td>Dato 3</td>
    <td>Dato 4</td>
  </tr>
</table>

El elemento <colgroup> contiene cuatro elementos <col>. El primer y cuarto elementos <col> representan columnas individuales, mientras que el segundo elemento <col> tiene un atributo span establecido en "2", lo que indica que se extiende a lo largo de dos columnas (Columna 2 y Columna 3).

Al usar los elementos <colgroup> y <col>, puedes aplicar estilos o atributos a columnas específicas o grupos de columnas dentro de una tabla. Esto es útil cuando quieres establecer un formato o estilo consistente para ciertas columnas sin tener que repetir los estilos para cada celda en esas columnas.

Atributos

El elemento <colgroup> admite varios atributos que permiten controlar el estilo y el comportamiento de los grupos de columnas dentro de una tabla.

<table>
  <colgroup>
    <col span="2">
    <col>
  </colgroup>
  ...
</table>

<table>
  <colgroup>
    <col style="background-color: #f2f2f2;">
    <col style="width: 200px;">
  </colgroup>
  ...
</table>

<table>
  <colgroup>
    <col class="highlight">
    <col class="data">
  </colgroup>
  ...
</table>

.highlight {
  background-color: yellow;
}

.data {
  text-align: center;
}

Estilizando Columnas

El elemento <colgroup> en HTML ofrece varias formas de estilizar columnas dentro de una tabla. Puedes establecer colores de fondo, ajustar anchos de columna y aplicar bordes y relleno a grupos de columnas.

<table>
  <colgroup>
    <col style="background-color: #f2f2f2;">
    <col span="2" style="background-color: #e6e6e6;">
    <col style="background-color: #d9d9d9;">
  </colgroup>
  ...
</table>

<table>
  <colgroup>
    <col style="width: 30%;">
    <col style="width: 50%;">
    <col style="width: 20%;">
  </colgroup>
  ...
</table>

<table>
  <colgroup>
    <col style="border-right: 1px solid #ccc; padding: 5px;">
    <col style="border-right: 1px solid #ccc; padding: 5px;">
    <col style="padding: 5px;">
  </colgroup>
  ...
</table>

Consideraciones de accesibilidad

Al usar el elemento <colgroup> en tablas HTML, es importante considerar la accesibilidad para usuarios que dependen de tecnologías de asistencia, como los lectores de pantalla. El uso adecuado de <colgroup> puede ayudar a mejorar la accesibilidad de tus tablas.

Una forma de usar <colgroup> para la accesibilidad es asociando grupos de columnas con encabezados de tabla. Esto ayuda a establecer una relación clara entre los encabezados y las celdas de datos correspondientes. Puedes lograr esto usando el atributo scope en los elementos <th> para indicar si son encabezados para filas o columnas.

<table>
  <colgroup>
    <col>
    <col span="2">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Encabezado 1</th>
      <th scope="colgroup" colspan="2">Encabezado 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dato 1</td>
      <td>Dato 2</td>
      <td>Dato 3</td>
    </tr>
  </tbody>
</table>

El primer elemento <th> tiene un atributo scope establecido en "col", indicando que es un encabezado para la primera columna. El segundo elemento <th> tiene un atributo scope establecido en "colgroup" y un atributo colspan establecido en "2", indicando que es un encabezado para la segunda y tercera columnas, que están agrupadas usando <colgroup>.

Al asociar correctamente los encabezados con grupos de columnas, los lectores de pantalla pueden proporcionar información más significativa y contextual a los usuarios. Permite a los usuarios entender la relación entre los encabezados y las celdas de datos dentro de cada grupo de columnas.

Otra consideración de accesibilidad es evitar usar <colgroup> únicamente con fines visuales. Aunque <colgroup> puede usarse para aplicar estilos y formato a las columnas, es importante usarlo de una manera que no dependa exclusivamente de señales visuales. Por ejemplo, si usas colores de fondo para transmitir significado o agrupación, asegúrate de proporcionar texto alternativo o etiquetas que describan el propósito de los grupos de columnas para usuarios que no puedan percibir los colores.

<table>
  <colgroup>
    <col class="categoria">
    <col span="2" class="valores">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Categoría</th>
      <th scope="colgroup" colspan="2">Valores</th>
    </tr>
  </thead>
  ...
</table>

.categoria::before {
  content: "Categoría: ";
}

.valores::before {
  content: "Valores: ";
}

Los elementos <colgroup> tienen nombres de clase "categoria" y "valores". Las reglas CSS correspondientes usan el pseudo-elemento ::before para proporcionar texto alternativo para cada grupo de columnas. Este texto alternativo es accesible para los lectores de pantalla y ayuda a transmitir el propósito de los grupos de columnas a los usuarios que no pueden percibir visualmente el estilo.

Al considerar la accesibilidad al usar <colgroup>, puedes crear tablas que sean más inclusivas y utilizables para una gama más amplia de usuarios. La asociación adecuada de grupos de columnas con encabezados y la provisión de texto alternativo para señales visuales mejoran la accesibilidad de tus tablas.

Compatibilidad con navegadores

El elemento <colgroup> es compatible con los navegadores web modernos, incluyendo Chrome, Firefox, Safari, Opera e Internet Explorer. La mayoría de los navegadores han admitido <colgroup> durante mucho tiempo, por lo que puede usarlo en sus tablas HTML sin preocuparse por problemas de compatibilidad.

Sin embargo, si necesita dar soporte a navegadores más antiguos o manejar casos excepcionales, hay algunas estrategias alternativas que puede considerar.

Un enfoque es usar CSS para estilizar las columnas de la tabla directamente, sin depender de <colgroup>. Puede dirigirse a columnas específicas usando selectores CSS como :nth-child() o :nth-of-type() y aplicar estilos en consecuencia.

<table>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
    <th>Encabezado 3</th>
  </tr>
  <tr>
    <td>Dato 1</td>
    <td>Dato 2</td>
    <td>Dato 3</td>
  </tr>
</table>

table th:nth-child(1),
table td:nth-child(1) {
  background-color: #f2f2f2;
}

table th:nth-child(2),
table td:nth-child(2) {
  background-color: #e6e6e6;
}

table th:nth-child(3),
table td:nth-child(3) {
  background-color: #d9d9d9;
}

Otra estrategia alternativa es usar estilos en línea en celdas individuales de la tabla. En lugar de aplicar estilos a elementos <colgroup> o <col>, puede agregar el atributo style a cada elemento <th> o <td> en las columnas que desea estilizar.

<table>
  <tr>
    <th style="background-color: #f2f2f2;">Encabezado 1</th>
    <th style="background-color: #e6e6e6;">Encabezado 2</th>
    <th style="background-color: #d9d9d9;">Encabezado 3</th>
  </tr>
  <tr>
    <td style="background-color: #f2f2f2;">Dato 1</td>
    <td style="background-color: #e6e6e6;">Dato 2</td>
    <td style="background-color: #d9d9d9;">Dato 3</td>
  </tr>
</table>

Aunque este enfoque funciona, puede ser menos eficiente y más difícil de mantener en comparación con el uso de <colgroup> o CSS externo. Sin embargo, puede servir como alternativa para navegadores que no admiten <colgroup>.

Estas estrategias alternativas pueden no ser necesarias en la mayoría de los casos, ya que <colgroup> tiene un excelente soporte en navegadores. A menos que tenga requisitos específicos para admitir navegadores muy antiguos, puede usar <colgroup> en sus tablas HTML.

Si encuentra problemas con la compatibilidad de navegadores, puede consultar recursos en línea como Can I Use (https://caniuse.com/) o MDN Web Docs (https://developer.mozilla.org/) para verificar la compatibilidad de <colgroup> con diferentes versiones de navegadores y tomar decisiones basadas en su público objetivo y requisitos de soporte de navegadores.

Ejemplos

En esta sección, veremos ejemplos de uso del elemento <colgroup> en tablas HTML. Comenzaremos con un ejemplo básico, luego pasaremos a estilos más avanzados y diseño de tablas responsivas.

<table>
  <colgroup>
    <col style="background-color: #f2f2f2;">
    <col span="2" style="background-color: #e6e6e6;">
  </colgroup>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
    <th>Encabezado 3</th>
  </tr>
  <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>
</table>

<table>
  <colgroup>
    <col class="destacado">
    <col class="datos" span="2">
  </colgroup>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
    <th>Encabezado 3</th>
  </tr>
  <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>
</table>

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

th, td {
  padding: 8px;
  text-align: left;
}

.destacado {
  background-color: #f2f2f2;
  font-weight: bold;
}

.datos {
  background-color: #e6e6e6;
}

<table>
  <colgroup>
    <col class="columna1">
    <col class="columna2">
    <col class="columna3">
  </colgroup>
  <thead>
    <tr>
      <th>Encabezado 1</th>
      <th>Encabezado 2</th>
      <th>Encabezado 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>

table {
  width: 100%;
}

.columna1 {
  width: 30%;
}

.columna2 {
  width: 40%;
}

.columna3 {
  width: 30%;
}

@media screen and (max-width: 600px) {
  .columna1,
  .columna2,
  .columna3 {
    width: 100%;
  }
}