Temas tratados en esta entrada
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 comobackgroundyborder.
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 | THU | FRI | SAT | SUN |
|---|---|---|---|---|---|
| 1 | 2 | 4 | 5 | 6 | 7 |
| 8 | 9 | 11 | 12 | 13 | 14 |
| 15 | 16 | 18 | 19 | 20 | 21 |
| 22 | 23 | 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>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias