TABLA 2
Atributos
a Nivel de Tablas
Al igual que
el resto de las etiquetas HTML <TABLE>
también posee atributos que
definirán su aspecto en Nuestra Animación o Web.
La
mayoría de los Atributos de una Tabla se pueden asignar tanto a nivel de
Tabla
como a nivel de Fila o de Celda ... veremos
BORDER
Este atributo nos definirá en pixeles la anchura que queramos asignarle al Borde de
Nuestra Tabla
Si a este atributo le asignamos como valor 0 conseguiremos que
los elementos de cada Celda aparezcan ordenados
sin necesidad de ver el Borde de
la Tabla ... su estructura será
BORDER=0
Veremos como
al cambiar el " 0 " por un número aparece el Borde
CELLSPACING
Este atributo nos permite asignar también en pixeles el espacio que habrá
entre las Celdas de Nuestra Tabla ... su estructura será
CELLSPACING=aquí
nuestro número a elegir
Siempre dejando un
espacio entre uno y otro de los diferentes atributos ...
CELLPADING
Nos
permite definir cual será el espacio entre el Borde de las Celdas y su
contenido
también mediante pixeles ... su estructura
será
CELLPADDING=aquí nuestro número a elegir
BORDERCOLOR
Le daremos
un Color al Borde de la Tabla Nos podemos ayudar con la Tabla de Colores
ya sea con su Nombre en
Texto o su Color Hexadecimal ... sus estructuras serán
BORDERCOLOR=#2693B6
BORDERCOLOR="dodgerblue"
WIDTH &
HEIGHT
Definiremos
el ancho "
WIDTH " y el alto "
HEIGHT " de la Tabla
Su valor
podrá ir definido en Pixeles o en Porcentaje
respecto al tamaño total de la
ventana del navegador ... su estructura será
WIDTH="Número"
HEIGHT="Número"
WIDTH="Porcentaje %" HEIGHT="Porcentaje
%"
Todos los
cambios deberemos de hacerlos con mucho cuidado ...
ALIGN
Este atributo nos permite
Alinear la Tabla
contiene tres valores definidos que son
Left ... Tabla alineada a la izquierda ... Valor
predeterminado
Right
... Tabla alineada a la derecha
Center
... Tabla centrada
Su estructura será
...
ALIGN=" left / right / center "
BGCOLOR
Asignaremos un Color de Fondo a toda la Tabla ya
sea mediante Color Hexadecimal o el Nombre
Su estructura será ...
BGCOLOR="#FFFFFF"
BGCOLOR="white"
BACKGROUND
También
es posible asignar una Imagen como Fondo de la Tabla ...
Para
darle un valor le indicaremos un fichero que contenga una
Imagen
mediante una ruta como veremos más
adelante ...
Tomando
el ejemplo anterior lo modificaremos con los atributos señalados veremos
cual es el resultado
De igual manera a continuación
veremos el Código de la Tabla como su
Ejemplo ...
Código Tabla
2
<TABLE borderColor=red height="75%" cellSpacing=10 cellPadding=15
width="50%"
align=center bgColor=black border=5>
<TBODY>
<TR>
<TH><FONT
face="Century Gothic" color=#FF0000>Cabecera
1</FONT></TH>
<TH><FONT face="Century
Gothic" color=#FF0000>Cabecera
2</FONT></TH>
<TH><FONT face="Century
Gothic" color=#FF0000>Cabecera 3</FONT></TH></TR>
<TR>
<TD><FONT face="Century Gothic"
color=#FF0000>Celda 1-1</FONT></TD>
<TD><FONT face="Century Gothic" color=#FF0000>Celda
1-2</FONT></TD>
<TD><FONT
face="Century Gothic" color=#FF0000>Celda
1-3</FONT></TD></TR>
<TR>
<TD><FONT face="Century Gothic"
color=#FF0000>Celda 2-1</FONT></TD>
<TD><FONT face="Century Gothic" color=#FF0000>Celda
2-2</FONT></TD>
<TD><FONT
face="Century Gothic" color=#FF0000>Celda
2-3</FONT></TD></TR>
<TR>
</TBODY></TABLE></BODY></HTML>
Ejemplo Tabla 2
Tabla
2
| Cabecera 1 |
Cabecera 2 |
Cabecera 3 |
| Celda 1-1 |
Celda 1-2 |
Celda 1-3 |
| Celda 2-1 |
Celda 2-2 |
Celda 2-3 |
Vamos a presentar ésta Tabla tal cual
y después la vamos a presentar con lo aprendido hasta ahora
...
Va un ejemplo ... No se trata de copiarlo tal cual
es sólo una idea de ver lo lindo que la iremos transformando
mientras avanzamos
Suerte ... !
