Uso de Tablas HTML para colocación de datos y diseño web-Blog

Las tablas fueron diseñadas por científicos de las universidades para contener y organizar información, no como una ayuda para el diseño gráfico de la página, ya que en esa época el lenguaje y las páginas web se concebían como una forma de transmitir texto plano, en monitores monocromos y de poca resolución, y no fue hasta el posterior desarrollo de Internet, de la WWW y de la tecnología de ordenadores personales avanzados cuando se empezó a tener en cuenta la importancia del diseño visual de una página web como un medio global para transmitir no solo texto plano, si no también contenidos gráficos y multimedia.



Este es el caso que os presento hoy una tabla que e personalizado "para dos de mis blogs" y ahora os la ofrezco a todos,es simple,esto es de lo que partimos...

<table border="black" height="100%" cellspacing="3" width="100%" background="http://www.AQUI LA DIRECCIÓN DE LA IMAGEN DESEADA PARA EL FONDO...jpg" border="5">

   <tbody>

<TR>

     <TD> celda(1,1) </TD>

     <TD> celda(1,2) </TD>

     <TD> celda(1,3) </TD>

   </TR>

   <TR>

     <TD> celda(2,1) </TD> 

     <TD> celda(2,2) </TD>

     <TD> celda(2,3) </TD>

   </TR>

  </TABLE></tbody>




-Copiad todo el código anterior y si necesitáis mas "celdas" tan solo debéis añadir "antes de "  "añadir tantos codigos como el siguiente necesiteis:

<tr><td> celda(2,1) </td>

     <td> celda(2,2) </td>

     <td> celda(2,3) </td>

   </tr>

-Es muy sencillo,además al principio del código veis valores como: bordercolor (cambiar color del borde),height o width (tamaño,"esta en automático" 100% significa que aprovecha el espacio donde se ponga y se adapta)...cellspanding (lineas interiores),y border(el borde o "marco" grosor),cambiar los valores según sea preciso.

*Ejemplo: www.motogpmotor.blogspot.com/ o www.formula1motor.blogspot.com/

-Como resultado podéis obtener algo así:

J. Button / Brawn 
10
R. Barrichello / Brawn 
8
J. Trulli / Toyota 
6
T. Glock / Toyota 
5
F. Alonso / Renault 
4
N. Rosberg / Williams 
3

Tablas

-La estructura de una tabla se define mediante:

-una marca de inicio de la tabla (TABLE),

-una marca de comienzo de una nueva línea (TR) y

-una marca de comienzo de una celda (TD).

-Al final de cada uno de estos elementos se deberá definir la marca de final correspondiente.

-Esta estructura es bastante simple y muy fácilmente modificable.

-Se pueden definir además textos de cabecera en las celdas (TH) y títulos para las tablas (CAPTION).

-Una celda puede contener algunos de los siguientes elementos:

-texto

-listas

-otras tablas

-imágenes

-enlaces de hipertexto

-elementos de formulario



TABLE

-La marca <TABLE> permite la apertura de una tabla; el fin de tabla se especifica con </TABLE> .

Se puede indicar alguno de los siguintes atributos:

-BORDER: define el grosor del marco exterior (puede ser cero).

-CELLPADDING: define el espacio alrededor del texto de una celda.

-CELLSPACING: define el espacio entre celdas.



-El valor de estos atributos se especifica en píxels. Cuando no se les asigna ningún valor explícitamente estos atributos tomarán valores definidos por defecto.

-El valor por defecto del atributo BORDER es cero por lo que si éste atributo no se especifica se obtendrá una tabla sin bordes la cual suele ser muy útil para la alineación de elementos, uno al lado de otro, o uno debajo de otro. Para que se visualicen los bordes de la tabla bastará nombrar este atributo asignandole un valor, o no.

-Se puede determinar el tamaño de la tabla, bien forzandola a ocupar un cierto porcentaje de la anchura de la ventana del browser o definiendo un tamaño fijo en unidades, mediante los atributos:

-WIDTH: define el ancho de la tabla, bien en % o en unidades.

-HEIGTH: define el alto de la tabla, bien en % o en unidades.

celda 1	celda 2
celda 3	celda 4

-CODIGO:

<TABLE BORDER=5 CELLSPACING=6 CELLPADDING=8>

<TR><TD>celda 1</TD><TD>celda 2</TD></TR>

<TR><TD>celda 3</TD><TD>celda 4</TD></TR>

</TABLE>

-CODIGO (Para personalizar):

<TABLE BORDER WIDTH=300 HEIGHT=80>

<CAPTION>Definiendo el ancho y alto de la tabla en %</CAPTION>

<TR ALIGN="center">

Ancho (<I>WIDTH</I>)</TH>300

<TR ALIGN="center">

<TH>Alto (<I>HEIGHT</I>)</TH>

<TD>80</TD>

</TABLE>