martes, 21 de agosto de 2012

Tablas en html

TABLAS


las tablas en Html son muy necesarias al momento de crear formularios o paginas bien estructuradas, son de muy buena ayuda en la parte de visualización de una pagina, una pagina bien estructurada y q no este sobrecargada de imágenes, colores etc.son muy poco agradables a la vista, uno de los problemas de visualización de toda pagina son su estructura por eso tenemos que manejar las tablas para que quede una pagina bien estructurada.


<html>
<head>
<title>Tablas</title>
</head>
  <body>
   <table border="1">
    <tr><td>hola mundo</td></tr>
        <tr><td>estamos utilizando tablas !</td><td>pero para q nos sirven ??</td></tr>
        <tr><td>ya lo veremos</td> </tr>
    </table>
  </body>
</html>

resultado:

Documento sin título
hola mundo
estamos utilizando tablas !pero para q nos sirven ??
ya lo veremos

etiquetas de la tabla

<table></table> declaración de una tabla 
<tr><tr>            fila de una tabla
<td><td>          columna de una tabla
<hr/>                linea transversal

atención: todo lo que se haga en una tabla se tiene q hacer adentro de la etiqueta <td>ejemplo</td>, si esto no se hace no lo mostrara o nos lo mostrara en un lugar diferente al de la tabla.

bordes de tablas y otros estilos

borde de una tabla: <table border="1">
color del borde: <table border="1" bordercolor="#FF6600">
color fondo de una tabla: <table bgcolor="#6699FF">
ancho de la tabla: <table width="300px"> (atencion: el ancho de una tabla se puede dar en px (pixeles) o en porcentajes).
alto de una pagina: : <table  height="300px"> (atencion: el alto de una tabla se puede dar en px (pixeles) o en porcentajes).

también se puede utilizar estilos diseñados en CSS.

atributos utilizados en las etiquetas <td>

uno de los problemas q podemos encontrar a la hora de estructurar una pagina web por medio de tablas son los espacios q quedan si no se sabe manejar todos atributos de cada etiqueta, como por ejemplo en la etiqueta <td>.

hola mundo
estamos utilizando tablas !pero para q nos sirven ??
ya lo veremos

esto pudimos ver en el ejemplo anterior, un espacio en blanco al lado del hola mundo, ¿por q se da este espacio?, pues por que las tablas son tan rígidas que ellas por defecto no se pueden acomodar, esto puede pasar y no es un error de explorador o de editor, es un error netamente de programador, pero hay una cura para eso como lo puede ser el colpans o el rowspan, estas son dos propiedades de la etiqueta <td>, a continuación veremos el mismo ejemplo pero utilizando estas dos propiedades.


<html>
<head>
<title>tablas</title>
</head>
  <body>
    <TABLE border="1" width="300px">
    <tr><td colspan="2">hola mundo</td></tr>
        <tr><td rowspan="2">estamos utilizando tablas !</td><td>pero para q nos sirven ??</td></tr>
        <tr><td>ya lo veremos</td> </tr>
    </TABLE>
  </body>
</html>

Documento sin título
hola mundo
estamos utilizando tablas !pero para q nos sirven ??
ya lo veremos

ya podemos ver la diferencia entre estos dos ejemplos.

No hay comentarios:

Publicar un comentario