Aunque las
capas o <div> le han ganado mucho terreno a las tablas, en
algunas ocasiones nos viene bien hacer uso de ellas para no
llenar la Web de capas para insertar elementos como por ejemplo
en el caso que voy a exponer ahora.
Si
queremos insertar todos los banners de nuestras webs amigas en
plan cuadricula, las tablas son bastante cómodas, así que
empezamos
A diferencia
de las demás etiquetas que hemos utilizado, a las
tablas no podemos darle propiedades desde nuestra hoja de
estilos, así que cada tabla debemos diseñarla para cada caso
Las tablas
empiezan y terminan con la etiqueta <table>......</table>
Para
determinar el numero de filas y columnas tenemos las etiquetas
<Tr> serán las
filas y <Td> las columnas
Por ejemplo:
si quiero una tabla con 2 filas y 2 columnas la base seria esta:
<table............>
(comienza la tabla)
<tr> (primera
fila que contiene dos celdas)
<td> celda 1
</td>
<td> celda2</td>
</tr>(fin de
la primera fila)
<tr>( segunda
fila que contiene dos celdas mas)
<td> celda 1
</td>
<td> celda2</td>
</tr>(fin de
la segunda fila)
</table> (fin
de la tabla)
Como os dije
antes, a diferencia del resto de etiquetas como párrafos ,
títulos, imágenes, etc... las tablas tenemos que definirlas
directamente en cada una que realicemos, y como todo tiene
medidas, colores, bordes, espacios ...., veamos los datos más básicos de ella, como son el
borde, espacios entre el texto y el final de la celda, espacio
entre celdas con un gráfico
Se observa además por si queremos escribir
alrededor de la tabla dejando un espacio , igual que hacíamos
dejando márgenes alrededor de la capa del menú vertical para que
el texto no se pegara demasiado al mismo, pero aquí el comando
es diferente
border, frame, cellspacing y
cellpadding
Voy a poner
varias características a esa misma tabla y la vista previa que
tendría en cada caso, hacer pruebas poniendo diferentes valores
Abrir una
página nueva para hacer todas estas pruebas pero no guardarlas,
solo para que veáis los efectos que produce, eso si poner al
menos dos celdas y dos columnas como escribí antes y cerrar la
tabla, dejo aquí solo los diferentes encabezados de las
diferentes tablas y por supuesto, esto todo escrito dentro del
boddy
1º)
<table border="15" cellspacing="10" cellpadding="5" >
2º) <table
border="0" cellspacing="10" cellpadding="5" >
Añadimos
frames ahora
<table border=1
cellspacing="10" cellpadding="5" FRAME=VOID RULES=ALL>
(desaparecen
los bordes exteriores)
<table border=15
cellspacing="10" cellpadding="5" FRAME=ABOVE RULES=NONE>
(solo una
barra en la parte superior de la tabla)
<table border=15
cellspacing="10" cellpadding="5" FRAME=ABOVE RULES=NONE>
(solo en la
parte inferior)
<table border=15
cellspacing="10" cellpadding="5" FRAME=LHS RULES=NONE>
(una barra a
la izquierda)
<table border=15
cellspacing="10" cellpadding="5" FRAME=RHS RULES=NONE>
(para el otro
lado)
<table border=15
cellspacing="10" cellpadding="5" FRAME=HSIDES RULES=NONE>
(arriba y
abajo)
<table border=15
cellspacing="10" cellpadding="5" FRAME=VSIDES RULES=NONE>
( Y ahora a
los dos lados)
Vamos ahora a
plantear para que vamos a crear nuestra primera tabla, dentro de
las mas sencillas y partiendo de la base de que tenemos
nuestra página webs amigas creada vamos a crear una tabla para
poder insertar los diferentes banners que enlazarán con la Web
correspondiente
Lo primero que
vamos a determinar es el tamaño que queremos para los banners,
claro esta que no toda la gente tiene el banner de la misma
medida, pero aunque se puede adaptar los que no tengan esa
medida exacta se deformaría más o menos dependiendo de la
diferencia respecto a tu tabla
Yo como la mía
la hice a 194x62 realizare la tabla para adaptar todos mis
banners en esa misma medida, de paso si queréis el mío aquí os
lo dejo para que la enlacéis a mi Web principal
Aparte voy a
organizar mis banners en dos columnas, como tengo poquitos de
momento así parece más jeje
Ponemos las filas que
necesitemos, ampliarlas después es fácil, sólo es cuestión de copiar y
pegar.
No le pondré
borde ninguno, solo las alinearé de forma centrada en la celda
y separadas una de otra
Como estas
imágenes son chiquitas y pesan poco, para no depender de
photobucket u otro hosting de imágenes casi mejor subirlas a
nuestra Web, así que metemos todos nuestros banners en la
carpeta imágenes, claro que esta vez el nombre que le ponga a
cada imagen será diferente personalizarlos para saber de quienes
son, si queréis que incluya vuestro banner en mi Web me lo
mandáis y lo pongo
Este sería el
esquema básico de nuestra primera tabla, aquí solo pongo una
fila, para añadir filas copiamos desde <tr> hasta </tr>
incluidos y vamos pegando una detras de otra, hasta que tengamos
las filas necesarias
Fijaros que añadí una propiedad mas a la
imagen el alt="nombre de la web", muchas veces la imagen no
define bien el nombre del destino, así que cuando pasemos el
ratón por encima veremos a donde enlaza, otro detalle mas que os
aconsejo, como son páginas externas interesa que cuando pulsemos
se nos abra en otra página diferente, y para que se abra
en una nueva ventana tendremos que indicar target="Blank", otro
detalle de la imagen, poner border=0 para que no salga la imagen
rodeada de un marco azul por culpa del enlace
Como veo un poco soso ese encabezado a Webs
amigas voy a poner otra tabla, pero esta es algo diferente,
tiene las esquinas redondeadas
Os paso los códigos y comentamos que
valores debéis tocar para personalizarla
Abrimos la pagina Websamigas.html que tenéis
en vuestra carpeta inicio y escribimos lo siguiente, en scr="url
imagen vacio" (esta imagen es una imagen vacía de tamaño 1x1px y
que nosotros tenemos en nuestra carpeta imágenes) y el texto que
queráis que aparezca en dicha tabla lo podéis cambiar , en el
código esta escrito en azul
Para personalizar aquí podéis variar el width,
pero la condición es que hay una diferencia de dos pixeles,
entre la #t; #tt y #ttt, mi ancho máximo lo puse a 200px y fui
restando dos unidades para el resto, los colores modificarlos a
juego con vuestra Web
