Tablas
La tabla es uno de los recursos mas importantes para la estructuración de nuestra web, esta conformado por un conjunto de celdas donde podemos situar el contenido, es decir los textos, imagenes, videos y otros. Esto nos permite organizar y distribuir de una manera adecuada lo que queremos publicar.
Las etiquetas que definen una tabla son <table> y </table>, es decir que inicia con la etiqueta <table> y cierra con la etiqueta </table>.
En el interior de una tabla existen filas en donde se alojan las celdas. Las filas están delimitadas por <tr> y </tr>, en el interior de estas, se encuentran las celdas que están definidas por <td> y </td>. También existen <th> y </th>, que definen un encabezado.
Ejemplo:
<table border=1> <tr><td>celda1</td><td>celda2</td><td>celda3</td></tr> <tr><td>celda4</td><td>celda5</td><td>celda6</td></tr> </table>
celda1 | celda2 | celda3 | celda4 | celda5 | celda6 |
|
Atributos:
Dentro de la etiqueta <table> se especifica los atributos que seran aplicados a toda la tabla, estamos hablando del tamaño, la apariencia es decir podemos personalizar las tablas introduciendo atributos en la etiqueta <table>.
También en la etiqueta <tr> pueden especificarse los atributos requeridos para toda la fila.
En la etiqueta <td> pueden introducirse los atributos necesarios para configurar las celdas.
ATRIBUTOS PARA <TABLE> |
Atributo | Ejemplo | Acción |
width | width="100" | Especifica un ancho fijo de la tabla |
width="80%" | Define que la tabla ocupará un 80% del ancho disponible |
height | height="100" | Define el alto fijo de la tabla |
height="80%" | Hace que el alto de la tabla ocupe un 80% del espacio disponible |
border | border="15" | Determina un margen de 15 unidades |
border="0" | Establece que no tendrá margen |
bordercolor | bordercolor="red" | Define el color del borde. |
cellspacing | cellspacing="20" | Determina el espacio entre las celdas. |
cellspadding | cellspadding="15" | Determina el espacio desde el borde de la celda hasta el contenido de esta. |
bgcolor | bgcolor="blue" | Hace que el fondo de la tabla sea de un color determinado en este caso azul. |
background | background="imagen.jpg" | Permite colocar una determinada imagen como fondo |
align | align="left" | Alinea la tabla a la izquierda |
align="right" | Alinea la tabla a la derecha |
align="center" | Posiciona la tabla al centro |
|