Columna de tabla HTML

Introducción

La etiqueta HTML <col> se utiliza para definir las propiedades de cada columna de una tabla por separado. En este laboratorio, aprenderás a usar la etiqueta <col> para dar estilo a las columnas de una tabla HTML.

Nota: Puedes 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.

Skills Graph

Creando una tabla HTML

En el archivo index.html de su proyecto, agregue el siguiente código para crear una tabla HTML básica:

<table>
  <colgroup>
    <col />
    <col />
    <col />
  </colgroup>
  <tr>
    <th>Nombre del producto</th>
    <th>Precio</th>
    <th>Cantidad</th>
  </tr>
  <tr>
    <td>Producto 1</td>
    <td>$10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Producto 2</td>
    <td>$20</td>
    <td>10</td>
  </tr>
</table>

Estilando columnas con la etiqueta <col>

Ahora, agreguemos la etiqueta <col> para dar estilo a las columnas de la tabla. Reemplace la etiqueta <colgroup> en el código anterior con el siguiente código:

<colgroup>
  <col style="background-color: lightblue" />
  <col style="background-color: lightgreen" />
  <col style="background-color: lightpink" />
</colgroup>

En el código anterior, hemos agregado la etiqueta <col> con el atributo de estilo para aplicar diferentes colores de fondo a cada columna de la tabla.

Usando el atributo span

Puedes usar el atributo span de la etiqueta <col> para seleccionar múltiples columnas a la vez. Por ejemplo:

<colgroup>
  <col style="background-color: lightblue" />
  <col span="2" style="background-color: lightgreen" />
</colgroup>

En este ejemplo, la segunda etiqueta <col> selecciona dos columnas a la vez al usar el atributo span con un valor de 2.

Usando atributos globales y de eventos

La etiqueta <col> admite atributos globales y atributos de eventos para agregar estilo adicional y funcionalidad a las columnas de la tabla. Por ejemplo, puedes usar el atributo class para agregar una clase CSS a las columnas:

<colgroup>
  <col style="background-color: lightblue" class="product-name" />
  <col span="2" style="background-color: lightgreen" class="price-quantity" />
</colgroup>

Ahora, puedes aplicar estilos CSS a las columnas de la tabla usando las clases .product-name y .price-quantity.

Agregando unidades a las columnas de la tabla

Puedes agregar unidades a las columnas de la tabla, como valores monetarios o porcentajes, usando los pseudo-elementos ::before y ::after y CSS. Por ejemplo:

<colgroup>
  <col style="background-color: lightblue" class="product-name" />
  <col span="2" style="background-color: lightgreen" class="price-quantity" />
</colgroup>

td::before {
  content: "$";
}

td:last-of-type::after {
  content: "%";
}

En el código anterior, el pseudo-elemento ::before agrega un signo de dólar antes de los valores en las dos primeras columnas, mientras que el pseudo-elemento ::after agrega un signo de porcentaje después de los valores en la última columna.

Resumen

En este laboratorio, aprendiste cómo usar la etiqueta HTML <col> para dar estilo a las columnas de una tabla HTML. También aprendiste cómo usar el atributo span, los atributos globales y los atributos de eventos para agregar estilo adicional y funcionalidad a las columnas de la tabla. Finalmente, aprendiste cómo agregar unidades a las columnas de la tabla usando CSS y pseudo-elementos.