26A-tablas Colgroup

---

Temas tratados en esta entrada

• Tabla <colgroup>
• Propiedades CSS legales
• Elementos de <col>
• Colgroups vacíos
• Ocultar columnas

---

Tabla <colgroup>

El elemento <colgroup> se utiliza para agrupar una o más columnas en una tabla HTML, lo que permite aplicar estilos y atributos de manera uniforme a las columnas del grupo. Esto es útil cuando se quiere aplicar un formato específico a un conjunto de columnas sin tener que repetir los estilos para cada una de ellas.

Para utilizar <colgroup>, primero se define dentro de la etiqueta <table>. Luego, se pueden incluir etiquetas <col> para especificar las columnas que forman parte del grupo. Cada etiqueta <col> puede tener atributos como width para definir el ancho de la columna.

Por ejemplo, si se desea que las dos primeras columnas de una tabla tengan un ancho específico y un color de fondo, se puede hacer de la siguiente manera:

Es importante recordar que el uso de <colgroup> puede mejorar la accesibilidad, ya que algunos lectores de pantalla pueden interpretar la estructura de la tabla de manera más eficiente, facilitando la navegación a los usuarios.

Ejemplo

MON	TUE	WED	THU	FRI	SAT	SUN
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

Código del ejemplo

                <table class="table table-bordered" style="width: 100%;">
                <colgroup>
                    <col>
                    <col>
                    <col>
                    <col>
                    <col>
                    <col>
                    <col>
                </colgroup>
                <thead>
                    <tr>
                        <th class="bg-info">MON</th>
                        <th class="bg-info">TUE</th>
                        <th>WED</th>
                        <th>THU</th>
                        <th>FRI</th>
                        <th>SAT</th>
                        <th>SUN</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="bg-info">1</td>
                        <td class="bg-info">2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <td class="bg-info">8</td>
                        <td class="bg-info">9</td>
                        <td>10</td>
                        <td>11</td>
                        <td>12</td>
                        <td>13</td>
                        <td>14</td>
                    </tr>
                    <tr>
                        <td class="bg-info">15</td>
                        <td class="bg-info">16</td>
                        <td>17</td>
                        <td>18</td>
                        <td>19</td>
                        <td>20</td>
                        <td>21</td>
                    </tr>
                    <tr>
                        <td class="bg-info">22</td>
                        <td class="bg-info">23</td>
                        <td>24</td>
                        <td>25</td>
                        <td>26</td>
                        <td>27</td>
                        <td>28</td>
                    </tr>
                </tbody>
            </table>
            

---

...

Propiedades CSS legales

Al utilizar el elemento <colgroup> y sus columnas <col>, solo hay una selección muy limitada de las propiedades CSS que se permite aplicar. Estas propiedades son:

• width: Para definir el ancho de las columnas.
• visibility: Para controlar la visibilidad de las columnas.
• background: Para establecer el color de fondo de las columnas.
• border: Para agregar bordes a las columnas.

Es importante destacar que todas las demás propiedades CSS no tendrán ningún efecto en las tablas. Por lo tanto, al diseñar tablas con <colgroup>, es fundamental limitarse a estas propiedades legales para asegurar que los estilos se apliquen correctamente.

Ejemplo

Día	Actividad	Duración	Estado
Lunes	Reunión	1 hora	Completada
Martes	Desarrollo	4 horas	En progreso
Miércoles	Pruebas	2 horas	Completada
Jueves	Despliegue	1 hora	Programada

Código del ejemplo

                <table class="table table-bordered" style="width: 100%;">
                <colgroup>
                    <col style="width: 20%; background-color: #D6EEEE;">
                    <col style="width: 30%; background-color: #D6EEEE;">
                    <col style="width: 25%;">
                    <col style="width: 25%;">
                </colgroup>
                <thead>
                    <tr>
                        <th>Día</th>
                        <th>Actividad</th>
                        <th>Duración</th>
                        <th>Estado</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Lunes</td>
                        <td>Reunión</td>
                        <td>1 hora</td>
                        <td>Completada</td>
                    </tr>
                    <tr>
                        <td>Martes</td>
                        <td>Desarrollo</td>
                        <td>4 horas</td>
                        <td>En progreso</td>
                    </tr>
                    <tr>
                        <td>Miércoles</td>
                        <td>Pruebas</td>
                        <td>2 horas</td>
                        <td>Completada</td>
                    </tr>
                    <tr>
                        <td>Jueves</td>
                        <td>Despliegue</td>
                        <td>1 hora</td>
                        <td>Programada</td>
                    </tr>
                </tbody>
            </table>
            

---

Elementos de <col>

El elemento <col> se utiliza dentro de un <colgroup> para definir características específicas de una o más columnas en una tabla HTML. Esto permite aplicar estilos de forma más granular a cada columna.

Si deseas estilar más columnas con diferentes estilos, puedes usar múltiples elementos <col> dentro del <colgroup>. Esto es útil para aplicar distintos anchos, colores de fondo u otras propiedades CSS a cada columna de forma individual.

Las características más comunes que se pueden especificar para el elemento <col> incluyen:

• span: Indica el número de columnas que abarca el <col>. Por ejemplo, <col span="2"> abarca dos columnas consecutivas.
• width: Define el ancho de la columna. Por ejemplo, <col width="100"> establece un ancho de 100 píxeles.
• style: Permite aplicar estilos CSS directamente al elemento <col>, aunque se debe recordar que solo se permiten propiedades CSS legales como background y border.

Al utilizar múltiples elementos <col>, se facilita el diseño de tablas complejas, permitiendo un control más preciso sobre la presentación de cada columna.

Ejemplo

MON	TUE	WED	THU	FRI	SAT	SUN
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

Código del ejemplo

                <table style="width: 100%; border: 1px solid black; border-collapse: collapse;">
                <colgroup>
                    <col span="2" style="background-color: #D6EEEE">
                    <col span="3" style="background-color: pink">
                </colgroup>
                <tr>
                    <th style="border: 1px solid black;">MON</th>
                    <th style="border: 1px solid black;">TUE</th>
                    <th style="border: 1px solid black;">WED</th>
                    <th style="border: 1px solid black;">THU</th>
                    <th style="border: 1px solid black;">FRI</th>
                    <th style="border: 1px solid black;">SAT</th>
                    <th style="border: 1px solid black;">SUN</th>
                </tr>
                <tr>
                    <td style="border: 1px solid black;">1</td>
                    <td style="border: 1px solid black;">2</td>
                    <td style="border: 1px solid black;">3</td>
                    <td style="border: 1px solid black;">4</td>
                    <td style="border: 1px solid black;">5</td>
                    <td style="border: 1px solid black;">6</td>
                    <td style="border: 1px solid black;">7</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black;">8</td>
                    <td style="border: 1px solid black;">9</td>
                    <td style="border: 1px solid black;">10</td>
                    <td style="border: 1px solid black;">11</td>
                    <td style="border: 1px solid black;">12</td>
                    <td style="border: 1px solid black;">13</td>
                    <td style="border: 1px solid black;">14</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black;">15</td>
                    <td style="border: 1px solid black;">16</td>
                    <td style="border: 1px solid black;">17</td>
                    <td style="border: 1px solid black;">18</td>
                    <td style="border: 1px solid black;">19</td>
                    <td style="border: 1px solid black;">20</td>
                    <td style="border: 1px solid black;">21</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black;">22</td>
                    <td style="border: 1px solid black;">23</td>
                    <td style="border: 1px solid black;">24</td>
                    <td style="border: 1px solid black;">25</td>
                    <td style="border: 1px solid black;">26</td>
                    <td style="border: 1px solid black;">27</td>
                    <td style="border: 1px solid black;">28</td>
                </tr>
            </table>
            

---

Colgroups vacíos

Un <colgroup> se considera vacío cuando no contiene ningún elemento <col> dentro de él. Aunque puede parecer que no tiene utilidad, los colgroups vacíos pueden ser utilizados en ciertas situaciones para mejorar la legibilidad y la estructura de la tabla.

Por ejemplo, se puede definir un <colgroup> vacío como un marcador de posición para futuras modificaciones, o para indicar que una sección de columnas está destinada a ser estilizada o manipulada mediante JavaScript o CSS en un momento posterior.

Sin embargo, es importante tener en cuenta que un <colgroup> vacío no tendrá ningún efecto en el diseño de la tabla hasta que se le agreguen columnas. Por esta razón, es recomendable utilizarlo con precaución y asegurarse de que su inclusión tenga un propósito claro en el contexto de la tabla.

Ejemplo

MON	TUE	WED	THU	FRI	SAT	SUN
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

Código del ejemplo

                <table style="width: 100%; border: 1px solid black; border-collapse: collapse;">
                <colgroup>
                    <colgroup> <!-- Colgroup vacío como marcador de posición -->
                        <col span="3" style="background-color: lightblue;"> <!-- Colgroup con columnas -->
                    </colgroup>
                <tr>
                    <th style="border: 1px solid black;">MON</th>
                    <th style="border: 1px solid black;">TUE</th>
                    <th style="border: 1px solid black;">WED</th>
                    <th style="border: 1px solid black;">THU</th>
                    <th style="border: 1px solid black;">FRI</th>
                    <th style="border: 1px solid black;">SAT</th>
                    <th style="border: 1px solid black;">SUN</th>
                </tr>
                <tr>
                    <td style="border: 1px solid black;">1</td>
                    <td style="border: 1px solid black;">2</td>
                    <td style="border: 1px solid black;">3</td>
                    <td style="border: 1px solid black;">4</td>
                    <td style="border: 1px solid black;">5</td>
                    <td style="border: 1px solid black;">6</td>
                    <td style="border: 1px solid black;">7</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black;">8</td>
                    <td style="border: 1px solid black;">9</td>
                    <td style="border: 1px solid black;">10</td>
                    <td style="border: 1px solid black;">11</td>
                    <td style="border: 1px solid black;">12</td>
                    <td style="border: 1px solid black;">13</td>
                    <td style="border: 1px solid black;">14</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black;">15</td>
                    <td style="border: 1px solid black;">16</td>
                    <td style="border: 1px solid black;">17</td>
                    <td style="border: 1px solid black;">18</td>
                    <td style="border: 1px solid black;">19</td>
                    <td style="border: 1px solid black;">20</td>
                    <td style="border: 1px solid black;">21</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black;">22</td>
                    <td style="border: 1px solid black;">23</td>
                    <td style="border: 1px solid black;">24</td>
                    <td style="border: 1px solid black;">25</td>
                    <td style="border: 1px solid black;">26</td>
                    <td style="border: 1px solid black;">27</td>
                    <td style="border: 1px solid black;">28</td>
                </tr>
            </table>
            

---

Ocultar columnas

Ocultar columnas en una tabla HTML se puede realizar mediante el uso de CSS. Aunque no hay un elemento específico para ocultar columnas, puedes aplicar estilos utilizando el atributo style o clases CSS para lograr este efecto.

Para ocultar una columna, se puede usar la propiedad visibility: collapse; en el elemento <col> correspondiente dentro del <colgroup>. Esta propiedad oculta la columna y colapsa su espacio en la tabla, permitiendo que las demás columnas se ajusten adecuadamente.

Alternativamente, también se puede utilizar display: none;, que oculta la columna pero elimina su espacio en el flujo del documento, lo que puede afectar la disposición de la tabla.

Es importante tener en cuenta que ocultar columnas de esta manera no elimina los datos de la tabla; simplemente los hace invisibles. Los lectores de pantalla aún pueden acceder a la información, lo que puede ser beneficioso para la accesibilidad.

Ejemplo

Columna Oculta: La tercera columna (WED) está oculta usando display: none;. Esto elimina la columna y las demás columnas se ajustan adecuadamente en la tabla.

MON	TUE	WED	THU	FRI	SAT	SUN
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

Código del ejemplo

                <table style="width: 100%; border: 1px solid black; border-collapse: collapse;">
                <colgroup>
                    <col style="background-color: lightblue;">
                    <col style="background-color: lightblue;">
                    <col style="display: none;"> <!-- Columna oculta -->
                    <col style="background-color: pink;">
                    <col style="background-color: pink;">
                    <col style="background-color: lightgreen;">
                    <col style="background-color: lightgreen;">
                </colgroup>
                <tr>
                    <th style="border: 1px solid black;">MON</th>
                    <th style="border: 1px solid black;">TUE</th>
                    <th style="border: 1px solid black; display: none;">WED</th>
                    <th style="border: 1px solid black;">THU</th>
                    <th style="border: 1px solid black;">FRI</th>
                    <th style="border: 1px solid black;">SAT</th>
                    <th style="border: 1px solid black;">SUN</th>
                </tr>
                <tr>
                    <td style="border: 1px solid black;">1</td>
                    <td style="border: 1px solid black;">2</td>
                    <td style="border: 1px solid black; display: none;">3</td>
                    <td style="border: 1px solid black;">4</td>
                    <td style="border: 1px solid black;">5</td>
                    <td style="border: 1px solid black;">6</td>
                    <td style="border: 1px solid black;">7</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black;">8</td>
                    <td style="border: 1px solid black;">9</td>
                    <td style="border: 1px solid black; display: none;">10</td>
                    <td style="border: 1px solid black;">11</td>
                    <td style="border: 1px solid black;">12</td>
                    <td style="border: 1px solid black;">13</td>
                    <td style="border: 1px solid black;">14</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black;">15</td>
                    <td style="border: 1px solid black;">16</td>
                    <td style="border: 1px solid black; display: none;">17</td>
                    <td style="border: 1px solid black;">18</td>
                    <td style="border: 1px solid black;">19</td>
                    <td style="border: 1px solid black;">20</td>
                    <td style="border: 1px solid black;">21</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black;">22</td>
                    <td style="border: 1px solid black;">23</td>
                    <td style="border: 1px solid black; display: none;">24</td>
                    <td style="border: 1px solid black;">25</td>
                    <td style="border: 1px solid black;">26</td>
                    <td style="border: 1px solid black;">27</td>
                    <td style="border: 1px solid black;">28</td>
                </tr>
            </table>
            

---

Ir al índice