Ya no es común que se usen las tablas en el diseño de una página web, pero, no esta demás conocer esta herramienta que durante mucho tiempo se utilizó para la estructuración de documentos web.
Para comenzar les mostraré la estructura básica de las tablas y luego les daré una explicación de cada una de las partes que la conforman, para finalizar les daré un par de ejemplos sobre como y donde aplicarlas.
<table border="1" width="500" align="center">
<tr>
<th>Celda de encabezado 1</th>
<th>Celda de encabezado 2</th>
</tr>
<tr>
<td>Celda sencilla 1</td>
<td>Celda sencilla 2</td>
</tr>
</table>
El resultado es este:
| Celda de encabezado 1 | Celda de encabezado 2 |
|---|---|
| Celda sencilla 1 | Celda sencilla 2 |
Bien, es bastante sencillo de entender, la primera línea de código:
<table border="1" width="500" align="center">
aporta la configuración de la tabla y establece un borde con grosor de nivel 1 (como el que vemos en el ejemplo) un ancho de 500 y una alineación al centro.
Las etiquetas <tr> y </tr> indican el inicio y fin de una fila.
Las etiquetas <th> y </th> indican el inicio y el fin de una celda de encabezado ( note que las primeras dos celda tienen un texto en negrita y centrado).
Las etiquetas <td> y </td> indican el inicio y fin de una celda sencilla o común es decir sin ninguna configuración.
Tanto las etiquetas <tr> como las etiquetas <th> y <td> tienen atributos que permite que la tabla se vea de una forma diferente, podemos agregar color, estilo, alineación, altura, anchura, entre otros. A continuación algunos de estos atributos para hacer que nuestra tabla se vea diferente:
bgcolor="#C60" - este atributo aporta color al elemento donde se aplique
height="100" - este atributo establece la altura del elemento donde se aplique, si se aplica en una fila todas las celdas de esa fila tendran la misma altura, si se aplica en una celda, tambien todas las celdas de la fila adoptarán la misma altura.
style="color:#CCC; font-size: 20px;" - el atributo estilo en si, es un atributo de estilo CSS y permite estableces muchos más atributos al elemento donde se aplique, si se aplica en <table> afectará al resto de los elementos, si se aplica en <tr> afectará las celdas de esta fila y si se aplica en <td> o <th> solo afectará a esa celda.
colspan="2" - este atributo permite extender el ancho de la celda según la necesidad lo requiera en este ejemplo se estableció en 2.
rowspan="2" - este atributo al igual que el anterior extiende la celda según el número que se establece, solamente que en este caso abarca el alto segun el número de filas como que se ha indicado.
Hay muchos más atributos que pueden configurarse como width, valign, background, entre otros, les motivo a consultar manuales de HTML en línea sobre este tema y profundizar en el mismo. Por mi parte les dejo un par de ejemplos de donde y como pueden usarse las tablas.
| Celda de encabezado 1 | Celda de encabezado 2 |
|---|---|
| Celda sencilla 1 | Celda sencilla 2 |
| Celda extendida a lo ancho con texto alineado a la derecha | |
En el siguiente ejemplo la tabla esta presente, pero sin borde y solamente se usa para estructurar el formulario.
| Ejemplo de tablas para formulario | |
|---|---|
| Nombre | |
| Dirección | |
Y por útlimo una tabla que tambien incluye imagenes.
| Ejemplo de tablas con imágenes | |
|---|---|
 |
 |
 |
|
No hay comentarios:
Publicar un comentario