
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>
...
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias