Listas y tablas en HTML

Esto es una lista numerada:

1. Perro
2. Gato
3. Periquito
4. Canario
5. Hámster
6. Peces

HTML utiliza la etiqueta <ol> para abrir la lista numerada y la etiqueta <li> para cada línea de la lista.


Y esto es una lista con viñetas:

• Patatas
• Legumbres
• Fruta
• Verdura
• Leche
• Huevos
• Pan
• Azúcar

En este otro caso, HTML utiliza la etiqueta <ul> para abrir la lista no numerada y la etiqueta <li> para cada línea de la lista.

Definición de las etiquetas

 <ol>: define una lista ordenada. Una lista ordenada puede ser numérica o alfabética.

 <ul>: define una lista con viñetas.

 <li>: define los elementos de la lista. Se usa junto con las etiquetas anteriores.

La etiqueta  <dd> se utiliza para describir un término / nombre en una lista de descripción y en cuanto a la etiqueta <dt> define un término / nombre en una lista de descripción.

La etiqueta <dt> se utiliza en conjunción con <dl> (define una lista de descripción) y <dd> (describe cada término / nombre). La etiqueta <dt> (nombre de un término) es de menor rango que <dl> (lista de términos) y de mayor rango que <dd> (descripción de un término). Por ese motivo, la descripción del término (<dd>) queda indentada respecto del nombre de dicho término (<dt>).

Etiquetas y atributos de tablas

Insertamos una tabla desde Writer:

Verbos	Nombres	Adjetivos
andar	niño	alto
leer	globo	enorme
comer	selva	discreto
vivir	casa	amarillo

Si observamos la pestaña HTML, veremos varias etiquetas y atributos relacionados con las tablas:

<table>: define una tabla en HTML
y sus atributos:
cellpadding="4": especifica el espacio entre la pared de la celda y el contenido de la celda.
cellspacing="0": especifica el espacio entre celdas. Ninguno de estos atributos son compatibles con HTML5.

<tr>:define una fila de la tabla
y su atributo: valign="top": atributo que alinea verticalmente el contenido en una fila de la tabla, en este caso, en la zona superior de la fila. Este atributo no es compatible con HTML5.

<td>:  define una celda de tabla
y su atributo: width="33%": especifica el ancho de una celda respecto del total de la tabla, es decir, cada celda ocupa un tercio de la tabla. Este atributo tampoco es compatible con HTML5.

Otra etiqueta, <th>, que no aparece en esta tabla, define un encabezado de tabla.