Listas y Tablas en HTML

Etiquetas: etiquetas • listas • sintaxis • tablas

En esta entrada vamos a ver como realizar listas y tablas en HTML5.

LISTAS

Esto es un ejemplo de una lista:

1. Elemento número uno.
2. Elemento número dos.
3. Elemento número tres.

Y el código que la acompaña es este:

<ol>
 	<li>Elemento número uno.</li>
 	<li>Elemento número dos.</li>
 	<li>Elemento número tres.</li>
</ol>

Como podemos ver en este caso, para hacer listas tenemos dos tipos de etiqueta, ol (ORDERED LIST) y li (LIST ITEM).

Las listas en HTML suelen tener dos etiquetas: una que define la estructura de la lista y otra para cada uno de los elementos. Sin embargo el ejemplo de arriba no es la única posibilidad de lista que tenemos. Si quieres hacer una lista con un círculo como viñetas usas la etiqueta ul (UNORDERED LIST) con un atributo type=»circle». En las ol hay atributos también que nos permiten modificarla, type=»a» si quieres letras minúsculas, type=»I» numeros romanos…

Ver atributos para listas enumeradas.

Ver atributos para listas con viñetas.

TABLAS

El ejemplo de arriba es una tabla de dos filas por dos columnas.

Su codigo es el siguiente:

<table>
 <tbody>
  <tr>
   <td>Bienvenidos</td>
   <td>a</td>
  </tr>
  <tr>
   <td>tablas</td>
   <td>HTML</td>
  </tr>
 </tbody>
</table>

Como vemos volvemos a tener una etiqueta «identificadora» y otra para los elementos o separaciones.

Table será la etiqueta que nos va a decir: «Haz una tabla». Tbody no es estrictamente necesario, aunque es recomendable. Usaremos tr para representar a las filas que contendran las celdas y td serán las celdas. Es decir, en cada tr tenemos que poner tantos td como ancha queremos que sea la tabla.

Existen celdas de encabezado que se ponen con th, ejemplo:

<table>
 <tbody>
  <tr>
   <th>Dia</th>
   <th>Dinero</th>
  </tr>
  <tr>
   <td>26</td>
   <td>3000</td>
  </tr>
 </tbody>
</table>

Los principales atributos que usamos en la etiqueta table son:

align: Alineacion de la tabla

background: En caso de querer colocar como fondo una imagen o parecidos

bgcolor: Color del fondo

border: Numero de pixeles del borde de la tabla

bordercolor: El color de los bordes de la tabla

cellpadding: Espaciado interior entre el contenido de la celda y sus bordes

cellspacing: Espacio entre cada celda de la tabla

height: Altura de la tabla

width: Anchura de la tabla

HTML5 NO SOPORTA ATRIBUTOS DE TABLA