En esta entrada vamos a ver como realizar listas y tablas en HTML5.
LISTAS
Esto es un ejemplo de una lista:
- Elemento número uno.
- Elemento número dos.
- 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
Bienvenidos | a |
tablas | HTML |
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:
Dia | Dinero |
---|---|
26 | 3000 |
<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