🥇 ▷ Aprendiendo HTML Parte 23: Uso de etiquetas Col, Colgroup y Caption en tablas HTML

En la discusión anterior, expliqué el uso de los elementos head, tbody y tfoot para agrupar el contenido de las celdas en una tabla.

En este tutorial, explicaré cómo usar las etiquetas

. Donde las etiquetas y

están en el par de etiquetas

…

antes de la etiqueta

En resumen, las etiquetas

se usan para agrupar columnas en una tabla, las etiquetas

se usan para indicar columnas en una tabla, mientras que las etiquetas

se usan para escribir títulos en una tabla. Para una explicación más detallada, veamos la explicación a continuación:

Etiquetas col y colgroup

La etiqueta

se usa para indicar un grupo de columnas en una tabla donde el elemento

es el padre. Esta etiqueta generalmente se usa para diseñar ciertas columnas en la tabla como un todo. Por lo tanto, no tiene que repetir el mismo estilo de formato en cada celda de una tabla.

Dentro de la etiqueta

, también puede escribir una etiqueta

que indique la columna en una tabla. Además, la etiqueta

se puede escribir en más de una, lo que indica el orden de las columnas del grupo de columnas. La etiqueta

se escribe dentro del elemento

después del elemento

Puede usar la etiqueta

para asignar una propiedad de estilo diferente a cada columna de una tabla como un todo para que no tenga que volver a escribir el mismo estilo para cada celda de la tabla una y otra vez. El siguiente es un ejemplo de código para usar y escribir etiquetas

en HTML:

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan Col dan Colgroup</title>
 </head>
 <body>
  <table border="1">
   <colgroup>
    <col style="background-color:pink; border:2px solid black;">
    <col span="2" style="background-color:#00FFFF;">
   </colgroup>
   <tr>
    <th>No</th>
    <th>NIM</th>
    <th>Nama </th>
   </tr>
   <tr>
    <td>1</td>
    <td>071401001</td>
    <td>Ridayanti</td>
   </tr>
   <tr>
    <td>2</td>
    <td>071401002</td>
    <td>Ahmad Zulham</td>
   </tr>
 </table>
 </body>
</html>

Después de ejecutar el código HTML anterior en el navegador, se verá como la imagen a continuación:

uso de col y colgroup

Subtítulos de etiquetas

La palabra “título” significa el título ya sea en forma de títulos de página, capítulos u otros. En general, la etiqueta de título se usa para agregar un encabezado (título) a una tabla que comienza con el uso del elemento

. El elemento

se declara utilizando el par de etiquetas

…..

La etiqueta

está escrita dentro del elemento

directamente antes de los otros elementos, en otras palabras, la etiqueta

se encuentra encima de una tabla y está en el medio de forma predeterminada, pero puede cambiar su posición con la propiedad text-align en CSS para alineación de texto y título: propiedad lateral para establecer la posición encima o debajo de la tabla.

<!DOCTYPE html>
 <html>
 <head>
  <title>Penggunaan Caption di HTML</title>
   <style type="text/css">
    table,th, td{
    border: 1px solid black;
    border-collapse: collapse; }
    table{ width: 30%; }
    th, td{ text-align:center; }
    .caption{ text-align: left; }
    .caption1{ caption-side: bottom; }
   </style>
 </head>
 <body>
  <table>
   <caption>Daftar Absensi Kelas X</caption>
    <tr>
     <th>Nama</th>
     <th>NIM</th>
    </tr>
    <tr>
     <td>Ridayanti</td>
     <td>071401001</td>
    </tr>
    <tr>
     <td>Ahmad Zulham</td>
     <td>071401002</td>
    </tr>
  </table><br>
  <table>
   <caption class="caption">Daftar Absensi Kelas X</caption>
    <tr>
     <th>Nama</th>
     <th>NIM</th>
    </tr>
    <tr>
     <td>Ridayanti</td>
     <td>071401001</td>
    </tr>
    <tr>
     <td>Ahmad Zulham</td>
     <td>071401002</td>
    </tr>
  </table><br>
  <table>
   <caption class="caption1">Daftar Absensi Kelas X</caption>
    <tr>
     <th>Nama</th>
    <th>NIM</th>
    </tr>
    <tr>
     <td>Ridayanti</td>
     <td>071401001</td>
    </tr>
    <tr>
     <td>Ahmad Zulham</td>
     <td>071401002</td>
    </tr>
  </table>
 </body>
 </html>

Después de ejecutar el código HTML anterior en el navegador, se verá como la imagen a continuación:

Etiquetas de título en la tabla HTML

De la imagen de arriba, el título en la primera tabla se muestra de forma predeterminada. El título de la segunda tabla se muestra con el texto – alinear: propiedad izquierda, mientras que el título de la tercera tabla se muestra con el título – lado: propiedad inferior.

Tabla de Contenido

Aprenda HTML Parte 24: Uso de los atributos Cellpadding y Cellspacing en HTML