6. Listas y tablas en HTML

Las listas y tablas HTML son herramientas esenciales para organizar la información en un sitio web. Le permiten presentar datos de una manera estructurada y fácil de entender, lo que puede mejorar significativamente la experiencia del usuario. Este capítulo de nuestro libro electrónico cubrirá estos dos elementos en detalle para ayudarle a convertirse en un desarrollador front-end eficiente.

Listas en HTML

En HTML, tenemos tres tipos principales de listas: listas ordenadas, listas desordenadas y listas de definición.

Listas ordenadas

Las listas ordenadas se utilizan cuando el orden de los elementos es importante. Se crean utilizando la etiqueta <ol>. Cada elemento de la lista se coloca dentro de una etiqueta <li>. Vea el siguiente ejemplo:

<ol>
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
  <li>Tercer elemento</li>
</ol>

Listas desordenadas

Las listas desordenadas se utilizan cuando el orden de los elementos no importa. Se crean utilizando la etiqueta <ul>. Al igual que con las listas ordenadas, cada elemento se coloca dentro de una etiqueta <li>. Vea el ejemplo:

<ul>
  <li>Artículo</li>
  <li>Otro elemento</li>
  <li>Un elemento más</li>
</ul>

Listas de definiciones

Las listas de definiciones se utilizan para enumerar términos y sus definiciones. Se crean utilizando las etiquetas <dl>, <dt> (para término) y <dd> (para definición). Vea el ejemplo:

<dl>
  <dt>HTML</dt>
  <dd>Lenguaje de marcado utilizado para estructurar el contenido de la web.</dd>
  <dt>CSS</dt>
  <dd>Lenguaje de estilo utilizado para describir la presentación de un documento escrito en HTML.</dd>
</dl>

Tablas en HTML

Las tablas se utilizan para presentar datos en filas y columnas. Se crean utilizando varias etiquetas, incluidas <table> (para crear la tabla), <tr> (para crear una línea), <td> (para crear una celda) y <th> (para crear un encabezado de tabla).

Vea un ejemplo de cómo crear una tabla en HTML:

<tabla>
  <tr>
    <th>Nombre</th>
    <th>Edad</th>
  </tr>
  <tr>
    <td>Juan</td>
    <td>25</td>
  </tr>
  <tr>
    <td>María</td>
    <td>30</td>
  </tr>
</tabla>

Además de estas etiquetas básicas, existen otras etiquetas y atributos que puede utilizar para controlar la apariencia y el comportamiento de sus tablas. Por ejemplo, puedes utilizar la etiqueta <caption> Para agregar un título a su tabla, la sección <colgroup> para especificar propiedades para varias columnas a la vez y el atributo 'colspan' para hacer que una celda abarque varias columnas.

Esperamos que este capítulo le haya dado una buena comprensión de cómo utilizar listas y tablas en HTML. Recuerde que la práctica es la clave para convertirse en un desarrollador Front End eficiente, así que asegúrese de probar lo que ha aprendido en sus propios proyectos. En el próximo capítulo, exploraremos CSS, el lenguaje que utilizamos para diseñar nuestros sitios web y hacerlos visualmente atractivos.

Siguiente página del libro electrónico gratuito:

42Formularios y entradas en HTML

3 minutos