Dominando la agrupación de columnas en tablas HTML

Introducción

La etiqueta HTML <colgroup> se utiliza para aplicar varios estilos a una o más columnas en una tabla HTML. La etiqueta <colgroup> elimina la necesidad de definir estilos en cada celda de una tabla. Utilizando el atributo span de esta etiqueta, se pueden aplicar estilos a las columnas a las que se desea aplicar.

En este laboratorio, aprenderá a crear una tabla con columnas de colores utilizando la etiqueta HTML <colgroup>.

Nota: Puede practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Creando la tabla HTML

Primero, cree una tabla HTML a la que desee aplicar estilos utilizando la etiqueta <colgroup>. Agregue el siguiente código a su archivo HTML:

<!doctype html>
<html>
  <head>
    <title>Tabla coloreada</title>
  </head>
  <body>
    <table border="1">
      <caption>
        Tabla coloreada
      </caption>
      <colgroup>
        <col style="background-color: gray;" />
        <col style="background-color: lightblue;" />
        <col style="background-color: lightgreen;" />
      </colgroup>
      <thead>
        <tr>
          <th>Columna 1</th>
          <th>Columna 2</th>
          <th>Columna 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Fila 1, Columna 1</td>
          <td>Fila 1, Columna 2</td>
          <td>Fila 1, Columna 3</td>
        </tr>
        <tr>
          <td>Fila 2, Columna 1</td>
          <td>Fila 2, Columna 2</td>
          <td>Fila 2, Columna 3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

El código anterior crea una tabla con un borde de 1 y una leyenda "Tabla coloreada". La etiqueta <colgroup> contiene tres etiquetas <col> que aplican diferentes colores a tres columnas respectivamente. La etiqueta <thead> contiene tres etiquetas <th> que contienen los títulos de tres columnas. Y, la etiqueta <tbody> contiene dos filas con tres columnas cada una.

Escribiendo CSS para un mejor estilo

En este paso, usaremos CSS para aplicar estilos a la tabla creada anteriormente.

Agregue el siguiente código CSS a su archivo HTML:

<!doctype html>
<html>
  <head>
    <title>Tabla coloreada</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
      }
      th {
        background-color: #4169e1;
        color: white;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <caption>
        Tabla coloreada
      </caption>
      <colgroup>
        <col style="background-color: gray;" />
        <col style="background-color: lightblue;" />
        <col style="background-color: lightgreen;" />
      </colgroup>
      <thead>
        <tr>
          <th>Columna 1</th>
          <th>Columna 2</th>
          <th>Columna 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Fila 1, Columna 1</td>
          <td>Fila 1, Columna 2</td>
          <td>Fila 1, Columna 3</td>
        </tr>
        <tr>
          <td>Fila 2, Columna 1</td>
          <td>Fila 2, Columna 2</td>
          <td>Fila 2, Columna 3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Revise el código completado en su archivo index.html. Debería poder ver la tabla de tres columnas con diferentes colores en cada columna.

Resumen

La etiqueta HTML <colgroup> se utiliza para aplicar varios estilos a una o más columnas de una tabla en HTML, lo que elimina la necesidad de definir estilos en cada celda de una tabla. En este laboratorio, aprendiste cómo crear una tabla con columnas de colores utilizando la etiqueta <colgroup> y aplicar estilos a ella utilizando CSS.

Agrupación de columnas en tablas HTML

Introducción

Creando la tabla HTML

Escribiendo CSS para un mejor estilo

Resumen