Etiquetas relacionadas con las tablas

En este artículo, explicamos las etiquetas relacionadas con las tablas.

Esto explica cómo describir tablas y leyendas de tablas en HTML junto con ejemplos.

YouTube Video

Etiquetas relacionadas con las tablas

Etiqueta <table>

 1<table>
 2    <tr>
 3        <th>Header 1</th>
 4        <th>Header 2</th>
 5    </tr>
 6    <tr>
 7        <td>Data 1</td>
 8        <td>Data 2</td>
 9    </tr>
10</table>

• La etiqueta <table> se usa para crear una tabla que organiza y muestra datos en filas y columnas.

  La etiqueta <table> organiza visualmente los datos y crea tablas con múltiples filas y columnas. Las filas se definen con la etiqueta <tr>, las celdas de encabezado con la etiqueta <th>, y las celdas de datos con la etiqueta <td>.

• Puedes personalizar el estilo y el diseño de la tabla usando CSS.

Etiqueta <tr>

1<tr>
2    <td>Row 1, Cell 1</td>
3    <td>Row 1, Cell 2</td>
4</tr>

• La etiqueta <tr> se usa para definir filas en una tabla.

  La etiqueta <tr> se usa para crear cada fila de una tabla, conteniendo celdas (<td> o <th>).

• Cada fila puede contener múltiples celdas, formando la estructura general de la tabla.

Etiquetas <th> y <td>

1<th>Header 1</th>
2<td>Data 1</td>

• La etiqueta <th> define una celda de encabezado de la tabla. Usada típicamente en filas de encabezado, el contenido de las celdas está en negrita y centrado.
• La etiqueta <td> define una celda de datos de tabla estándar, que muestra datos regulares de la tabla.

Atributos colspan y rowspan

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td colspan="2">Spanning Cell</td>
11        </tr>
12        <tr>
13            <td rowspan="2">Spanning Cell</td>
14            <td>Data 1</td>
15        </tr>
16        <tr>
17            <td>Data 2</td>
18        </tr>
19    </tbody>
20</table>

colspan y rowspan son atributos utilizados cuando las celdas de una tabla abarcan varias columnas o filas.

• El atributo colspan permite que una celda abarque varias columnas.
• El atributo rowspan permite que una celda abarque varias filas.

Etiquetas <thead>, <tbody>, <tfoot>

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td>Data 1</td>
11            <td>Data 2</td>
12        </tr>
13        <tr>
14            <td>Data 3</td>
15            <td>Data 4</td>
16        </tr>
17    </tbody>
18    <tfoot>
19        <tr>
20            <td>Footer 1</td>
21            <td>Footer 2</td>
22        </tr>
23    </tfoot>
24</table>

• La etiqueta <thead> se usa para definir la sección de encabezado de una tabla. Normalmente contiene los encabezados de las columnas.

  La etiqueta <thead> se coloca en la parte superior de la tabla, definiendo los títulos o encabezados de las columnas. Esto ayuda a distinguir claramente las secciones de datos.

• La etiqueta <tbody> define la sección del cuerpo de la tabla. Contiene las filas de datos.

  La etiqueta <tbody> contiene el cuerpo principal de los datos de la tabla. Se coloca entre las filas encerradas por las etiquetas <thead> y <tfoot>.

• La etiqueta <tfoot> define la parte del pie de la tabla, que incluye totales o notas.

  La etiqueta <tfoot> se encuentra al final de la tabla y se utiliza para mostrar totales u otras anotaciones. Es especialmente útil al resumir o mostrar totales para grandes conjuntos de datos.

Etiquetas <caption> y <colgroup>

 1<table>
 2    <caption>Sample Table Caption</caption>
 3    <colgroup>
 4        <col style="background-color: #f2f2f2">
 5        <col style="background-color: #e6e6e6">
 6    </colgroup>
 7    <thead>
 8        <tr>
 9            <th>Header 1</th>
10            <th>Header 2</th>
11        </tr>
12    </thead>
13    <tbody>
14        <tr>
15            <td>Data 1</td>
16            <td>Data 2</td>
17        </tr>
18        <tr>
19            <td>Data 3</td>
20            <td>Data 4</td>
21        </tr>
22    </tbody>
23</table>

• La etiqueta <caption> añade un título (encabezado) para clarificar el contenido de la tabla. Suele colocarse en la parte superior de la tabla y sirve para resumir el contenido general de la tabla.

• La etiqueta <colgroup> agrupa columnas dentro de una tabla y se usa para aplicar estilos o layouts. Puedes especificar colores de fondo o anchos para columnas específicas mediante la inclusión de la etiqueta <col>.

Ejemplo de tabla

 1<table>
 2    <caption>Table Title</caption>
 3    <colgroup>
 4        <col span="2" style="background-color: lightblue;">
 5    </colgroup>
 6    <thead>
 7        <tr>
 8            <th>Header 1</th>
 9            <th>Header 2</th>
10            <th>Header 3</th>
11            <th>Header 4</th>
12        </tr>
13    </thead>
14    <tbody>
15        <tr>
16            <td>Data 11</td>
17            <td>Data 12</td>
18            <td>Data 13</td>
19            <td>Data 14</td>
20        </tr>
21        <tr>
22            <td>Data 21</td>
23            <td>Data 22</td>
24            <td>Data 23</td>
25            <td>Data 24</td>
26        </tr>
27    </tbody>
28    <tfoot>
29        <tr>
30            <td colspan="3">Table Footer Title</td>
31            <td>Table Footer Summary</td>
32        </tr>
33    </tfoot>
34</table>

• La etiqueta <table> se utiliza para crear una tabla que muestra datos en filas y columnas.

• La etiqueta <thead> agrupa las filas de encabezado de la tabla. Generalmente contiene etiquetas <th>, que sirven como encabezados.

• La etiqueta <tbody> agrupa el contenido principal de la tabla. Generalmente contiene filas de datos compuestas por etiquetas <td>.

• La etiqueta <tfoot> agrupa las filas del pie de la tabla. Es adecuada para mostrar totales o notas.

• La etiqueta <colgroup> agrupa las columnas de una tabla y se usa para aplicar estilos a todas ellas como un conjunto.

• La etiqueta <caption> agrega un título o encabezado a la tabla, facilitando a los usuarios la comprensión del contenido de la tabla.

• El atributo colspan permite que una celda abarque varias columnas.

• El atributo rowspan permite que una celda abarque varias filas.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video