Etiqueta HTML <colgroup>

 Esta etiqueta se usa para especificar el grupo de una o más columnas en una tabla para formatear. Es útil para aplicar estilos a columnas enteras, en lugar de repetir los estilos para cada columna y para cada fila. Utilice la etiqueta <col> dentro de la etiqueta <colgroup> para definir diferentes propiedades en una columna dentro de un <colgroup>. La mayoría de los atributos de HTML 4.01 <colgroup> no se admiten en HTML5.

Sintaxis: 

<colgroup> Column lists... </colgroup>

Atributos: 

  • align: Se utiliza para alinear el texto o contenido en el grupo de columnas. El valor de la propiedad alineada es izquierda, derecha, centro, justificar, char.
  • char : Se utiliza para alinear el carácter en un grupo de columnas y el valor de estos atributos es el carácter.
  • charoff : se utiliza para establecer el número de caracteres que se alinearán a partir del carácter especificado por el atributo char. El valor de estos atributos está en forma numérica.
  • span : se utiliza para especificar el número de columnas que tienen la etiqueta colgroup. Los valores están en forma numérica.
  • valign : especifica la alineación vertical del contenido en un colgroup. Sus valores son la parte superior, media, inferior, línea de base.
  • ancho : Define el ancho de un grupo de columnas. Sus valores son píxeles, %, longitud_relativa.
     

Ejemplo: El siguiente ejemplo explica la etiqueta colgroup HTML.
 

html

<!DOCTYPE html>
<html>
  <body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML colgroup tag</h2>
    <table>
      <!-- colgroup tag starts here-->
      <colgroup>
        <col span="2" style="background-color: green; color: white" />
        <col style="background-color: tomato" />
            <!-- colgroup tag ends here--> 
      </colgroup>
      <tr>
        <th>STUDENT</th>
        <th>COURSE</th>
        <th>AGE</th>
      </tr>
      <tr>
        <td>Manas Chhabra</td>
        <td>BCA</td>
        <td>19</td>
      </tr>
      <tr>
        <td>Anurag Gupta</td>
        <td>B.TECH</td>
        <td>23</td>
      </tr>
    </table>
  </body>
</html>

Producción: 
 

Navegadores compatibles: 

  • Google cromo 1
  • Borde 12
  • explorador de Internet
  • Firefox 1
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *