Curso IT Fundamentos HTML 012_Listas y tablas

Listas

Las listas HTML son elementos importantes para organizar y presentar información en páginas web. Al usar diferentes tipos de listas, se puede estructurar y mostrar mejor el contenido.

HTML tiene tres tipos de listas:

1. Lista desordenada (Unordered list): Se crea usando el elemento <ul>, cada elemento de la lista se representa con un elemento <li>.
2. Lista ordenada (Ordered list): Se crea usando el elemento <ol>, los elementos de la lista también se representan con elementos <li>, con la diferencia de que se numeran automáticamente.
3. Lista de definición (Definition list): Se crea usando el elemento <dl>, contiene elementos <dt> (término de definición) y <dd> (descripción de definición).

Lista desordenada

La lista desordenada es el tipo de lista más común. Agrega un pequeño círculo (también llamado marcador de lista) antes de cada elemento de la lista. Utiliza <ul> como contenedor de la lista y <li> para describir los elementos específicos de la lista.

Ejemplo:

1
<ul>
2
  <li>Elemento 1</li>
3
  <li>Elemento 2</li>
4
  <li>Elemento 3</li>
5
</ul>

Resultado:

Lista ordenada

En contraste con la lista desordenada, cada elemento de una lista ordenada se marca con números. Las listas ordenadas usan <ol> como contenedor de la lista y también usan <li> para describir los elementos específicos de la lista.

Ejemplo:

1
<ol>
2
  <li>Primer elemento</li>
3
  <li>Segundo elemento</li>
4
  <li>Tercer elemento</li>
5
</ol>

Resultado:

Lista de definición

Una lista de definición está compuesta por los elementos <dl> (lista de definición), <dt> (término de definición) y <dd> (descripción de definición). Las listas de definición se usan normalmente para mostrar un grupo de términos y sus definiciones.

Ejemplo:

1
<dl>
2
  <dt>Término 1</dt>
3
  <dd>Descripción 1</dd>
4
  <dt>Término 2</dt>
5
  <dd>Descripción 2</dd>
6
</dl>

Resultado:

[!Resumen]

• Los elementos de la lista pueden contener internamente párrafos, saltos de línea, imágenes, enlaces, así como otras listas, etc.

Tablas

Las tablas HTML son elementos potentes para mostrar datos estructurados. Una tabla HTML básica se representa mediante el elemento <table> y contiene algunos subelementos clave como <tr> (fila de tabla), <th> (celda de encabezado) y <td> (celda de datos de tabla).

Ejemplo:

1
<table>
2
  <tr>
3
    <th>Nombre</th>
4
    <th>Edad</th>
5
    <th>Género</th>
6
  </tr>
7
  <tr>
8
    <td>Juan Pérez</td>
9
    <td>20</td>
10
    <td>masculino</td>
11
  </tr>
12
  <tr>
13
    <td>María García</td>
14
    <td>21</td>
15
    <td>femenino</td>
16
  </tr>
17
</table>

Resultado:

Elementos de tabla:

• <table>: Representa toda la tabla.
• <thead>: Define la parte del encabezado de la tabla, que contiene elementos <th> para representar los títulos de las columnas.
• <tr>: Fila de tabla, contiene celdas de encabezado <th>.
• <th>: Celda de encabezado, usada para identificar el título de la columna.
• <tbody>: Define la parte del cuerpo de la tabla, donde cada fila contiene elementos <td> para representar los datos reales.
• <td>: Celda de datos de tabla, contiene los datos reales.
• <tfoot>: Define la parte del pie de la tabla, generalmente se usa para colocar resúmenes, totales u otra información de pie de tabla.
• <caption>: Se usa para agregar un título a la tabla HTML, el título generalmente se muestra en la parte superior de la tabla.
• <colgroup>: Define un grupo de columnas de tabla
• <col>: Define atributos para columnas de tabla.

Ejemplo:

1
<table border="1">
2
  <caption>Este es el título de una tabla</caption>
3
  <colgroup>
4
    <col style="width: 50px; background-color: #f2f2f2;">
5
    <col style="width: 100px; background-color: #ddd;">
6
    <col style="width: 150px; background-color: #f2f2f2;">
7
  </colgroup>
8
  <thead>
9
    <tr>
10
      <th>Nombre</th>
11
      <th>Edad</th>
12
      <th>Ciudad</th>
13
    </tr>
14
  </thead>
15
  <tbody>
16
    <tr>
17
      <td>Juan Pérez</td>
18
      <td>25</td>
19
      <td>Madrid</td>
20
    </tr>
21
    <tr>
22
      <td>María García</td>
23
      <td>30</td>
24
      <td>Barcelona</td>
25
    </tr>
26
  </tbody>
27
  <tfoot>
28
    <tr>
29
      <td colspan="3">Total de personas: 2</td>
30
    </tr>
31
  </tfoot>
32
</table>

Resultado:

Atributos de tabla:

• border: Se usa para especificar el borde de la tabla. El valor es un número que indica el ancho del borde.
• cellpadding: Se usa para especificar el espaciado entre celdas. El valor es un número que indica el tamaño del espaciado.
• cellspacing: Se usa para especificar el espaciado entre los bordes de las celdas. El valor es un número que indica el tamaño del espaciado.
• width: Se usa para especificar el ancho de la tabla. El valor es un número que indica el ancho.
• height: Se usa para especificar la altura de la tabla. El valor es un número que indica la altura.
• style: Se usa para especificar el estilo de la tabla.

Ejemplo:

1
<table style="border-collapse: collapse; width: 60%; margin: 20px auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
2
  <caption style="font-size: 1.5em; font-weight: bold; padding: 10px; background-color: #3498db; color: #fff;">Esta es una tabla hermosa</caption>
3
  <colgroup>
4
    <col style="width: 30%;">
5
    <col style="width: 30%;">
6
    <col style="width: 40%;">
7
  </colgroup>
8
  <thead>
9
    <tr>
10
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">Nombre</th>
11
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">Edad</th>
12
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">Ciudad</th>
13
    </tr>
14
  </thead>
15
  <tbody>
16
    <tr>
17
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Juan Pérez</td>
18
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">25</td>
19
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Madrid</td>
20
    </tr>
21
    <tr>
22
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">María García</td>
23
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">30</td>
24
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">Barcelona</td>
25
    </tr>
26
  </tbody>
27
  <tfoot>
28
    <tr>
29
      <td colspan="3" style="border: 1px solid #ddd; padding: 8px; text-align: center; background-color: #3498db; color: #fff;">Total de personas: 2</td>
30
    </tr>
31
  </tfoot>
32
</table>

Resultado:

Fusión de tablas

La fusión de tablas se refiere a combinar dos o más celdas en una sola celda. La fusión de tablas se puede usar para simplificar el diseño de la tabla o para resaltar datos específicos. Use el atributo colspan para especificar el número de filas que abarca una celda, o use el atributo rowspan para especificar el número de columnas que abarca una celda. El valor del atributo es un número que indica el número de filas abarcadas.

Ejemplo:

1
<table border="1">
2
  <tr>
3
    <td>Celda 1</td>
4
    <td colspan="2">Fusión horizontal de dos columnas</td>
5
    <td>Celda 4</td>
6
  </tr>
7
  <tr>
8
    <td rowspan="2">Fusión vertical de dos filas</td>
9
    <td>Celda 3</td>
10
    <td>Celda 4</td>
11
    <td>Celda 5</td>
12
  </tr>
13
  <tr>
14
    <td>Celda 7</td>
15
    <td>Celda 8</td>
16
    <td>Celda 9</td>
17
  </tr>
18
</table>

Resultado:

[!Resumen]

• Por defecto, las tablas no muestran bordes.
• <tr> es la abreviatura de table row, representa una fila de tabla.
• <td>: td es la abreviatura de table data, representa una celda de datos de tabla.
• <th>: th es la abreviatura de table header, representa una celda de encabezado de tabla.
• La mayoría de los navegadores muestran el encabezado como texto centrado en negrita.
• Las tablas pueden contener texto, imágenes, listas, párrafos, formularios, líneas horizontales, tablas, etc.