Definición de una tabla:
Uno de los elementos más importantes en HTML son las tablas, ya
que éstas nos van a permitir distribuir y tener ordenados en la
pantalla los elementos de nuestra web.
Para definir el comienzo y fin de una tabla se utilizan
las etiquetas <table> y </table>.
Uno de los atributos que admite es border="" que permite especificar
la anchura en píxeles de sus bordes. Y el atributo bordercolor=""
para especificar el color de sus bordes. Para definir su anchura se
utilizará width y para su altura height indicando el valor
absoluto en píxeles o en porcentaje de pantalla ocupado. Si a estos
atributos no se le asigna valor la tabla se ajustará al tamaño de
su contenido.
Para alinear emplearemos el atributo align permite alinear la tabla
horizontalmente a la izquierda ("left"), derecha ("right") o centro
("center"). Escribimos lo que hay dentro del cuadro de abajo y
veremos el siguiente cuadro.
<table border=”2″ bordercolor=”red” width=”20%” height=”20%” align=”center” bgcolor=”green”> <tr> <td><table border=”2″ bordercolor=”red” width=”20%” height=”20%” align=”center” bgcolor=”green”> <tr> <td> </td> </tr> </table> </td> </tr> </table>
Aquí debajo veremos como se muestran las etiquetas y atributos.
El atributo "bgcolor" se usa para asignar un color de fondo a la tabla. Definición de una fila: Una fila es cada una de las divisiones horizontales de la tabla y estará formada por una o más celdas. Las filas (Table Row) se definen con las etiquetas <tr> y </tr> Se puede cambiar el color de una fila usando bgcolor. *definición de una celda: Una fila es cada una de las divisiones verticales de una fila. Las celdas se definen con las etiquetas <td> y </td> Podemos especificar la alineación del contenido de una celda tanto horizontalmente utilizando align (“left”, “right” o “center”) como verticalmente utilizando valign (“top”,”middle” o “bottom”). Podemos modificar el ancho de una celda utilizando width y su alto usando height, escribiéndolo bien en píxeles o bien en porcentaje con respecto a toda la fila. Tanto los atributos align, valign como width y height se pueden aplicar a la etiqueta <tr> si queremos que esos valores se apliquen a todas las celdas de una fila.
<table border=”5px” width=”400px”> <!-Aquí comienza la fila 1 –> <tr bgcolor=”yellow” align=”center”> <td width=”70%”> Artículo </td> <td width=”30%”> Precio </td> </tr> <!- Aquí comienza la fila 2 –> <tr> <td> Zapatos de piel </td> <td align=”right”> 60 € </td> </tr> </table>
Aquí debajo veremos como se muestran las etiquetas y atributos.
| Artículo | Precio |
| Zapatos de piel | 60 € |
Espaciado entre las celda: Podemos especificar los márgenes internos de cada celda, es decir el espacio entre sus bordes y su contenido mediante el atributo cellpadding se expresa en píxeles y su valor por defecto es 1. Así mismo se podrá indicar también la separación entre los bordes de 2 celdas contiguas con el atributo cellspacing, su valor por defecto es 2. Ambos atributos irán en la etiqueta <table> Expandir celdas: Por defecto, cada una de las filas de una tabla debe tener el mismo número de celdas pero en ocasiones puede convenir que una celda de una determinada fila expanda el espacio ocupado por otra contigua. Para ello se utilizan los atributos colspan indicando el número de celdas a la derecha que queremos que expanda:
<table border=”5px” width=”400px”> <tr> <td> celda 1 <td> celda 2 </td> </tr> <tr> <td colspan=”2″> celda 3 expandida con celda 4 </tr> <>table border=”5px” width=”400px”> <tr> <td rowspan=”2″> celda 1 expandida con celda 3 </td> <td> celda 2 </td> </tr> <tr> <td> celda 4 </td> </tr> </table>
Si escribimos estas etiquetas y atributos veremos lo de que hay de bajo de este cuadro.
celda 2
| celda 1 | celda 2 |
| celda 3 expandida con celda 4 | |
| celda 1 expandida con celda 3 | celda 2 |
| celda 4 | |
O el atributo rowspan indicando el número de celdas hacia abajo que ocupará:
<table border=”5px” width=”400px”> <td rowspan=”2″> celda 1 expandida con celda 3 </td> <td> celda 2 </td> </tr> <tr> <td> celda 4 </td> </tr> </table>
Si escribimos estas etiquetas y atributos veremos lo de que hay de bajo de este cuadro.
celda 2
| celda 1 expandida con celda 3 | celda 2 |
| celda 4 |
Uso de las tablas para organizar una web: Como hemos mencionado anteriormente, uno de los usos más frecuentes de las tablas es para organizar el contenido de una web. Para este fin se usan tablas con el borde igual a cero, de manera que la tabla en sí no es visible pero conseguimos que cada elemento de la web esté en su lugar.
<table border=”0px” width=”600px” align=”center”> <!– El texto aparecerá arriba en la primera fila –> <<“–a–>tr align=”center”> <td><h1> Don Quijote </h1> </td> </tr> <!– La imagen aparecerá abajo–> <tr align=”center”> <td><img src=”../imagenes/quijote.jpg” width=”186″ height=”139″/> </tr> </table>
Si escribimos estas etiquetas y atributos veremos lo de que hay de bajo de este cuadro
Don Quijote |
