26A-tablas Colgroup

Jorge Catalao octubre 16, 2024
HTML




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>



Tags:
Jorge Catalao

Posted by: Jorge Catalao

Durante el decorrer de los años y ya desde niño mis gustos preferidos, fue siempre la electrónica y la programación, eso que llevo a que me formase en varias escuelas profesionales, en temas tales como: electrónica Electricidad programación Técnicas de refrigeración etc. Tengo varias carreras profesionales relacionadas a los temas anteriormente descritos, precisamente por ese motivo, me he entusiasmado a crear un blog donde los temas serán los mencionados anteriormente. Espero que a mis visitantes les guste, y se aprovechen de los conocimientos que llevo años recopilando. Si eres estudiante de electricidad, electrónica o programación, aquí vas adquirir los conocimientos básicos, tanto para que continúes tus estudios, como para tu formación profesional. Cursos completos desde cero, los iré recopilando poco a poco, los cuales servirán para consulta tanto de estudiantes como electricistas profesionales, será como un manual o mas bien dicho un resumen donde podremos encontrar lo que necesitamos. Bueno espero que vos guste y me seguis, ya que los temas los ire duplicar tanto nel blog, como en mi canal de youtube.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias