Para ver el resultado en la pagina copiamos el siguiente código:
<html>
<head>
<TITLE>Fondos</TITLE>
</head>
<body background="fondo.gif">
<center>
<font face="arial" size="+2">Fondos</font>
<hr width=200>
</center>
<P align="center">Este es el primer párrafo. Está centrado y escrito en la letra por defecto del navegador. Algunas palabras estan en <B>negrita</B>, y otras en <I>cursiva.</I></P>
</body>
</html>
| Imágenes |
Gracias a las imágenes la web se ha hecho tan popular, tanto que hoy no se entiende una página web sin ellas. En nuestro directorio de trabajo tenemos un pequeño gif llamado "obras.gif", que vamos a usar en los siguientes ejemplos
El tag básico que nos permite incluir imágenes es <IMG SRC="obras.gif"> , que produce en pantalla:
Este tag admite muchos parámetros útiles:
- width, height: con estos parámetros le decimos al navegador las dimensiones del grafico. Es conveniente incluirlos porque asi la página aparece en pantalla antes de que lleguen los gráficos(que suelen venir después del texto).
En nuestro caso, <IMG SRC="obras.gif" width=60 height=53>, produce en pantalla:
También podemos poner dimensiones 'falsas', y el navegador alterará las dimensiones de la imagen.
Por ejemplo, <IMG SRC="obras.gif" width=200 height=53>, produce en pantalla:
- border: Este parámetro hace que aparezca un borde rodeando la imagen.
Por ejemplo, <IMG SRC="obras.gif" width=60 height=53 border=2>, produce en pantalla:
- alt: Con este parámetro podemos incluir un texto para los navegadores que no soportan los gráficos.
Por ejemplo, <IMG SRC="obras.gif" alt="Pagina en construcción" width=60 height=53 border=2>, produce en pantalla:
Para leer el texto podemos poner el ratón sobre el gráfico durante un segundo.
- align: Alinea la imagen respecto del texto y puede valer: left, right, top, bottom y middle.
Por ejemplo, <IMG SRC="obras.gif" alt="Pagina en construcción" width=60 height=53 border=2 align=middle> texto de ejemplo, produce en pantalla:
texto de ejemplo
- hspace, vspace: Separa la imagen horizontal y verticalmente(en pixels y por ambos lados).
Por ejemplo, <IMG SRC="obras.gif" alt="Pagina en construcción" width=60 height=53 border=2 vspace=10 align=middle hspace=10> texto de ejemplo, produce en pantalla:
texto de ejemplo
Sobre imágenes se puede decir mucho más, pero sólo vamos a añadir algunos comentarios:
- Una página web en su totalidad(texto y gráficos) no debería sumar más de 80 Kb(1 minuto de carga aprox. para un modem de 14400 bps).
- Un diseñador de páginas web necesitará un programa de retoque fotográfico, como Paint Shop Pro
- Las imágenes pueden servir como enlaces, p.ej el código <a href="obras.htm"><IMG SRC="obras.gif"></a> produce en pantalla:
Vemos que el icono del ratón cambia al pasar por la imagen, y aparece un borde de color azul rodeándola. Casi siempre que usemos imagenes como enlaces añadiremos border=0 para evitarlo.
|
 | Enlaces |
 Probablemente la característica que más ha influido, junto con las imágenes, en el espectacular desarrollo de la Web hayan sido los enlaces (links). Un enlace aparece generalmente como un texto azul subrayado y cuando situamos el cursor sobre él se transforma en una mano con el dedo índice extendido. Si pulsamos sobre el enlace saltamos a otra parte del documento, a otro documento situado en cualquier lugar, o incluso se abre el programa de correo para enviar un mensaje a la dirección indicada.
En general los enlaces tienen la siguiente estructura
<A HREF="URL"> Texto del enlace</A>
El texto del enlace es lo que se visualizará en el navegador. La URL es la dirección donde apunta el enlace y puede ser de estos tipos:
 Enlace a otro lugar del mismo documento
En este caso la URL se sustituye por un marcador en la misma página. El marcador puede ser texto colocado en el lugar al que queremos saltar. No importa lo que sea ya que no se verá.
Veamos un ejemplo para saltar al inicio de esta página. Escribiríamos en el lugar desde el que queremos saltar:
<A HREF="#inicio"> Ir al Inicio</A>
Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta:
<A NAME="inicio"> </A>
Una vez escrito esto y guardada la página veríamos al abrirla con el Navegador
Ir al Inicio
Al pulsar sobre ella nos llevaría al principio de la página ya que fue allí donde coloqué el marcador
Enlace a otra página local
En este caso la URL se dará de forma relativa (igual que para poner un fondo a la página). Por ejemplo si tenemos dos páginas en el mismo directorio pagina1.htm y pagina2.htm y queremos poner un enlace desde la pagina1.htm a la pagina2.htm debemos escribir
<a href="pagina2.htm">Ir a pagina2</a>
Con esto es suficiente, no hay que crear ningún marcador a no ser que quieras ir a un sitio concreto de la pagina2.htm. En ese caso tendrías que poner en el sitio adonde quieres llegar de lapagina2.htm
<a name="sitio"></a>
y en la pagina1.htm
<a href="pagina2.htm#sitio>Ir a sitio de la página 2</a>
Las palabras forma relativa, al principio de esta sección, constituyen un enlace de este último tipo
 Enlace a una dirección de Internet
Ahora la URL debe darse de forma absoluta, tal como la ves en la ventana de dirección del navegador, es decir:
<A HREF="http://centros4.pntic.mec.es/ies.de.cistierna">IES Cistierna</A>
te llevaría a la página de entrada del IES Cistierna
 Enlaces usando imágenes
Con frecuencia se emplean imágenes como enlaces. A veces son enlaces a las mismas imágenes con más resolución, como en el caso de fotos. Otras veces nos llevan a una localización cualquiera.
Para que una imagen sea un enlace hay que colocarla en el lugar del texto del enlace, si además queremos que vaya a otra imagen, ésta la debemos poner en el lugar de la URL.
Veamos unos ejemplos Supongamos para ello, que la estructura de nuestras páginas es la indicada en la imagen. Si escribo en la página actual localizada en Aprendiendo Html
 <A HREF=" #inicio"><img src="gifs/imagen.gif"></A>
obtengo una imagen que al pulsarla me lleva al inicio de esta página, exactamente como esta:
Para que una imagen sea un enlace a otra imagen se debe escribir:
<a href="gifs/sky.jpg"><img src="gifs/ojo.gif" ></a>
que da como resultado 
 Enlace con una dirección de correo
Este es un enlace un poco diferente, veamos un ejemplo
<A HREF="mailto: abercian@pntic.mec.es"> abercian@pntic.mec.es </A>
que se ve como abercian@pntic.mec.es y que si lo pulsas se abre el programa de correo que tengas configurado, con la dirección en el campo correspondiente
 Enlace con un grupo de noticias
Como antes la sintaxis es un poco diferente
<A HREF="news://news.pntic.mec.es/"> Mira en las noticias del MEC para encontrar profesores colgados</A>
que se vería
Mira en las noticias del MEC para encontrar profesores colgados
 Enlace para descargar un fichero
En la URL se poner la ruta donde está el fichero. Por ejemplo, para descargar un fichero de nombre guiahtml.zip se debe poner
<A HREF="../zip/guiahtml.zip">guiahtml.zip</A>
que se vería así guiahtml.zip. Si pulsas sobre él se abrirá una ventana avisándote de una descarga de archivos y preguntándote qué deseas hacer
 Enlace que se abre en una nueva ventana
Si quieres que la página que enlazas aparezca en una nueva ventana del navegador, solamente tienes que poner target="nombre" como atributo del enlace, es decir:
<a href="index.htm" target="nueva">Indice</a>
que se verá como Indice
Aún hay más tipos de enlaces, pero éstos son los más importantes
16. Texto en movimiento
Vamos a ver distintas soluciones para conseguir texto en movimiento: haciendo uso del lenguaje HTML (las marquesinas), con un GIF animado, con Javascript, etc.
Marquesinas (Marquees)
Una marquesina (en inglés, marquee) es una ventana en la que se desplaza un texto. Sólo son válidas para el Explorer de Microsoft (en el Netscape se verá como texto fijo).
La etiqueta básica es:
<MARQUEE> Texto que se desplaza </MARQUEE>
Que resulta como:
Texto que se desplaza
Como no hemos añadido ningún atributo dentro de la etiqueta, el comportamiento de la marquesina es el que tiene por defecto: ocupa todo el ancho de la pantalla, tiene la altura de una línea y el texto se desplaza lentamente de derecha a izquierda. Vamos a ver los distintos atributos que modifican su apariencia y comportamiento:
WIDHT, HEIGHT Ajustan la anchura y altura, respectivamente, de la marquesina. Pueden ser igual a un número de pixels, o a un porcentaje de la pantalla. Ejemplo:
<MARQUEE WIDTH=50% HEIGHT=60> Esta marquesina ocupa el 50% del ancho de la pantalla y tiene una altura de 60 pixels </MARQUEE>
Que resulta como:
Esta marquesina ocupa el 50% del ancho de la pantalla y tiene una altura de 60 pixels
ALIGN
Modifica el alineamiento del texto que rodea a la marquesina, que puede ser TOP (arriba), MIDDLE (en medio) o BOTTOM (abajo). Ejemplo:
<MARQUEE WIDTH=50% HEIGHT=60 ALIGN=BOTTOM>La palabra "¡Hola!" estará alineada con la parte inferior de la marquesina</MARQUEE> ¡Hola!
Que resulta como:
La palabra "¡Hola!" estará alineada con la parte inferior de la marquesina
¡Hola!
BEHAVIOR
Este atributo (que quiere decir en inglés comportamiento) sirve para definir de qué manera se va a efectuar el desplazamiento del texto. Si es igual a SCROLL (el valor por defecto), el texto aparece por un lado, se desplaza hasta el otro hasta desaparecer por él, y vuelve a empezar (como los casos que hemos visto anteriormente). Si es igual a SLIDE, aparece por un lado y se desplaza hasta llegar al otro extremo, y se para ahí. Si es igual aALTERNATE se desplaza alternativamente hacia un lado y otro, siempre dentro de los límites de la marquesina. Ejemplo:
<MARQUEE BEHAVIOR=ALTERNATE>Este texto se mueve a un lado y otro, sin desaparecer</MARQUEE>
Que se resulta así:
Este texto se mueve a un lado y otro, sin desaparecer
BGCOLOR
Con este atributo se modifica el color de fondo de la marquesina, de acuerdo con el método visto en el Capítulo 7. Ejemplo:
<MARQUEE BGCOLOR="#FF7070"> Esta marquesina tiene un fondo de color rosa </MARQUEE>
Que resulta así:
Esta marquesina tiene un fondo de color rosa
DIRECTION Este atributo sirve para modificar la dirección hacia la que se dirige el texto. Por defecto es LEFT (izquierda). Se puede hacer que el texto se dirija hacia la derecha igualando este atributo a RIGHT. Ejemplo:
<MARQUEE DIRECTION=RIGHT> Este texto se dirije hacia la derecha </MARQUEE>
Que resulta como:
Este texto se dirige hacia la derecha
SCROLLAMOUNT
Define la cantidad de desplazamiento del texto en cada movimiento de avance, expresado en pixels. Cuanto mayor es el número, más rápido avanza. Ejemplo:
<MARQUEE SCROLLAMOUNT=50> Doy saltos grandes </MARQUEE>
Que se ve como:
Doy saltos grandes
SCROLLDELAY
Define el tiempo entre cada movimiento de avance, expresado en milisegundos. Cuanto mayor es el número más lento avanza. Ejemplo:
<MARQUEE SCROLLDELAY =200> Espero mucho entre cada salto </MARQUEE>
Que se ve como:
Espero mucho entre cada salto
LOOP
Especifica el número de veces que aparecerá el texto. Es indefinido por defecto.
HSPACE, VSPACE
Definen, respectivamente, la separación en sentido horizontal o vertical del texto que está fuera de la marquesina.
Fuentes dentro de la marquesina
Si se desea que el texto que aparece dentro de una marquesina tenga una fuente concreta, distinta de la que tiene por defecto el navegador, se debe poner la etiqueta <FONT FACE> (ver Cap. 6) por fuera de la etiqueta de la marquesina. Ejemplo:
<FONT FACE="IMPACT">
<MARQUEE BGCOLOR="FFFF00">Esto se ve con la fuente Impact</MARQUEE>
</FONT>
Que se verá así:
Esto se ve con la fuente Impact
Recuérdese lo dicho en el capítulo 6: para que esto surta efecto la fuente indicada debe estar instalada en el disco duro del usuario. Véase también cómo se pueden indicar otras fuentes alternativas.
Como se ha dicho antes, esta etiqueta no es implementada por el Netscape. El texto que está dentro de la etiqueta de la marquesina se verá en este navegador como texto fijo normal.
Normalmente, si se hace uso de este recurso es porque se quiere destacar de una manera muy especial un texto, lográndose plenamente este objetivo en el Explorer, pero no así en el Netscape, en donde dicho texto pasaría totalmente desapercibido. Una manera de paliar este inconveniente, al menos en parte, es introducir la etiqueta de la marquesina dentro de una tabla (ver el Capítulo 10). De esta manera, el texto estará en cierta medida destacado en el Netscape, y en el Explorer la marquesina se verá de una manera aún más estética. Ejemplo:
<TABLE BORDER=1>
<TR><TD>
<MARQUEE> Marquesina dentro de una tabla </MARQUEE>
</TD></TR>
</TABLE>
Que se verá como:
| |
Texto en movimiento con un GIF animado
Otro procedimiento para conseguir texto en movimiento es el de confeccionar un GIF animado (ver el Capítulo 12).
Se puede conseguir que el texto se desplace realmente, emulando el comportamiento de las marquesinas, pero no es fácil conseguirlo, y puede ser bastante laborioso.
Un procedimiento más sencillo es el siguiente: Creamos el texto apropiado con un programa gráfico (tiene la ventaja sobre las marquesinas de que podemos escoger el tipo de fuente y los efectos que deseemos), tal como el siguiente ejemplo (bienv1.gif):
Luego procedemos a borrar una a una cada palabra (o cada letra si se quisiera), y vamos guardando cada imagen con un nombre distinto, tal como bienv2.gif:
A continuación borramos la palabra "del" y guardamos la imagen como bienv3.gif, y así con el resto, hasta bienv7.gif en donde se habrían borrado todas las palabras.
Luego procedemos a montar la secuencia de las imágenes en algún programa para crear GIFs animados, como por ejemplo en el GIF Construction Set o Animation Shop. El orden será el inverso:
bienv7.gif - bienv6.gif - ... - bienv2.gif - bienv1.gif
Se le añade un LOOP (lazo, para repetir la secuencia) y se ajustan los tiempos de cada imagen. Cuando esté todo a nuestro gusto, salvamos el GIF animado con el nombre de bienvend.gif. Este es el resultado.
Otra variante puede ser, partiendo igualmente de la imagen inicial bienv1.gif, dejar sólo una palabra en cada imagen, habiendo borrado el resto, y hacerlo con cada una de ellas. Con esto se consigue una apariencia mayor de movimiento en el texto.
Texto en movimiento con Javascript
Otra manera de conseguir texto en movimiento es haciendo uso de Javascript. Vamos a ver dos ejemplos: un scroll (deslizamiento) de un texto en la barra de estado del navegador y un scroll en una ventana dentro de la página.
Esto está implementado en los siguientes navegadores:
- Netscape, versión 2.0 o superior.
- Explorer de Microsoft 3.0 o superior.
El Javascript es un lenguaje distinto del HTML, que es el tema de este manual. En los dos ejemplos que vamos a ver a continuación, únicamente se mostrará la manera de incluirlos en nuestro documento HTML, pero sin pretender explicar su estructura.
Cómo incluir Javascript en un documento HTML
Recordemos que la estructura de un documento HTML es:
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
El script (documento) en Javascript lo tenemos que colocar dentro de la cabecera, después del título. Es decir, entre las etiquetas </TITLE> y </HEAD>, contenido dentro de la etiqueta:
<SCRIPT LANGUAGE="JavaScript"> </SCRIPT >
Es decir, que queda de esta manera:
<HTML>
<HEAD>
<TITLE>
</TITLE>
<SCRIPT LANGUAGE="JavaScript"> [Aquí debe ir colocado el script]
</SCRIPT >
</HEAD>
<BODY>
</BODY>
</HTML>
Además de esto, se debe añadir algo dentro de la etiqueta <BODY>, como se indicará en cada caso.
Scroll en la barra de estado
El script es el siguiente:
<SCRIPT LANGUAGE="JavaScript">
<!-- /// Scroll en la barra de estado, (C) Pedro Maicas, 1996.
var txt="Esta es la primera linea de texto que se desplaza "
+ " y esta es la segunda, puedes poner todas las"
+ " que quieras ! ";
function scroll()
{
window.status = txt;
txt = txt.substring(1, txt.length) + txt.charAt(0);
window.setTimeout("scroll()",150);
}
//-->
</SCRIPT>
Observación sobre el texto: Se puede poner el texto en una sola línea, tan larga como se quiera, siempre que esté entre " y "; Pero como no debe de haber ningún salto de línea, si el texto es demasiado largo, es mejor dividirlo en distintas líneas, tal como está en el ejemplo. Al final de la última palabra del texto conviene dejar una serie de espacios en blanco, para que no esté encadenado el comienzo con el final.
Dentro de la etiqueta <BODY> se debe añadir el atributo:
onLoad="scroll();"
quedando así:
<BODY onLoad="scroll();">
Scroll en una ventana
Ahora vamos a ver cómo conseguir que se desplace un texto dentro de una ventana de un formulario. Con esto se consigue un efecto parecido al de las marquesinas (pero en este caso sí es implementado por el Netscape 2.0 o superior).
El script es el siguiente:
<SCRIPT LANGUAGE="JavaScript">
<!-- /// Scroll en en una ventana, (C) Pedro Maicas, 1996.
var txt="Esta es la primera linea de texto que se desplaza "
+ " y esta es la segunda, puedes poner todas las"
+ " que quieras ! ";
function scroll()
{
document.frm.w.value = txt;
txt = txt.substring(1, txt.length) + txt.charAt(0);
window.setTimeout("scroll()",150);
}
//-->
</SCRIPT>
Dentro de la etiqueta <BODY> se debe añadir el atributo:
onLoad="scroll();" quedando así:
<BODY onLoad="scroll();">
Las etiquetas para la ventana del formulario son:
<FORM NAME='frm'>
<INPUT TYPE='text' NAME='w' SIZE=64>
</FORM>
Como la ventana está situada dentro de la página, debemos colocar estas etiquetas en el sitio que nos convenga, dentro de la seción <BODY> </BODY>, mezclado con el resto del documento HTML.
| Scroller de texto e imágenes 1/3 |
Una de las mayores exigencias de los diseñadores web consiste en obtener efectos gráficos atractivos sin superar límites razonables de peso en Kb de las páginas web. En el equilibrio de estos dos aspectos reside, probablemente, el secreto de la buena gráfica de los sitios web: correctas dosis de gráfica y funcionalidad. No existe una fórmula empírica que explique objetivamente dónde y cuándo se logra alcanzar este equilibrio. Existen, sin embargo, algunas medidas aconsejables que un elaborador debería adoptar al crear un sitio. La primera consiste en optimizar lo más posible las imágenes GIF o JPG, limitando su peso en Kb sin que sufra excesivamente la calidad. La segunda consiste en usar lo más frecuentemente posible texto HTML en lugar de imágenes, sobre todo para la creación de títulos y encabezamientos de página.
En este último punto, HTML dinámico acude en ayuda de los elaboradores con una serie de efectos especiales que mueven el texto en la dirección deseado evitando el uso de GIF animados o difuminan los colores evitando el uso de Applet Java.
Marquee es una marca HTML que permite el movimiento de simple texto dentro de un documento web. Introducida desde la versión 2.0 de MsIe, no se ha integrado nunca en Netscape, el cual no prevé ninguna marca con efectos similares. Su funcionamiento es muy sencillo y conlleva el uso de código Javascript o DHTML. Esta simplicidad queda confirmada por la presencia de marcas destinadas a personalizar el desplazamiento del texto. He aquí algunas:
<MARQUEE BEHAVIOR=SCROLL>HTMLpoint</MARQUEE>
Texto en movimiento de derecha a izquierda sin interrupciones:
<MARQUEE BEHAVIOR=SLIDE> HTMLpoint </MARQUEE>
Texto en movimiento desde la derecha con parada en el lado izquierdo
<MARQUEE BEHAVIOR=ALTERNATE> HTMLpoint </MARQUEE>
Texto en movimiento continuo de derecha a izquierda y viceversa
<MARQUEE BGCOLOR=red>HTMLpoint</MARQUEE>
Establece el color de fondo
<MARQUEE DIRECTION=RIGHT>HTMLpoint</MARQUEE>
Define la dirección del movimiento (en este caso de derecha a izquierda)
<MARQUEE HEIGHT=20 WIDTH=300>HTMLpoint</MARQUEE>
Altura (height) y anchura (width) en píxel.
<MARQUEE HSPACE=10 VSPACE=10>HTMLpoint</MARQUEE>
Distancia, en píxel, de los márgenes laterales (HSPACE) y superior e inferior (VSPACE)
<MARQUEE LOOP=5>HTMLpoint </MARQUEE>
Número de veces que pasa el texto. El parámetro puede impostarse en INFINITAS.
<MARQUEE SCROLLDELAY=5 SCROLLAMOUNT=2>HTMLpoint</MARQUEE>
Velocidad, en milésimas de segundo, de visualización de los mensajes.
Muestra el ejemplo práctico
En la versión 4 de MsIe el elemento MARQUEE se ha implementado con la adición de un modelo de objetos que reproduce cualquier código HTML. En Internet Explorer 4 es, por ejemplo, posible alternar el desplazamiento hacia arriba o hacia abajo, además de contener controles que responden a clic del ratón o pulsaciones del teclado. Todo esto gracias a tres eventos estándar: onstart, onbounce, onfinish.
TOMADO DE
http://www.ite.educacion.es/formacion/materiales/107/cd/html/html0102.html
http://www.redaragon.com/informatica/htmlb/cap4.asp
http://www.redaragon.com/informatica/htmlb/cap7.asp
http://platea.pntic.mec.es/~abercian/guiahtml/enlaces.htm
http://ortihuela.galeon.com/html16.htm
http://www.htmlpoint.com/dhtml/11/index.html
******** Investigar sobre Tablas (Table, Tr, Td). ********
Ejemplos de tablas
Tabla básica de 3x2
<TABLE BORDER>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Dos ejemplos de línea expandida <ROWSPAN>
| Item 1 | Item 2 | Item 3 |
| Item 4 | Item 5 |
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD ROWSPAN=2>Item 2</TD>
<TD>Item 3</TD>
</TR>
<TR>
<TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
| Item 1 | Item 2 | Item 3 | Item 4 |
| Item 5 | Item 6 | Item 7 |
<TABLE BORDER>
<TR>
<TD ROWSPAN=2>Item 1</TD>
<TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR>
<TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD>
</TR>
</TABLE>
Ejemplo de columna expandida <COLSPAN>
| Item 1 | Item 2 |
| Item 3 | Item 4 | Item 5 |
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
Tabla con cabeceras <TH>
<TABLE BORDER>
<TR>
<TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Combinación de columna expandida y cabecera
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>
Combinación de cabeceras múltiples y columnas expandidas
| Head1 | Head2 |
|---|
| Head 3 | Head 4 | Head 5 | Head 6 |
|---|
| A | B | C | D |
| E | F | G | H |
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TH>Head 3</TH> <TH>Head 4</TH>
<TH>Head 5</TH> <TH>Head 6</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>
Cabeceras laterales
| Head1 | Item 1 | Item 2 | Item 3 |
|---|
| Head2 | Item 4 | Item 5 | Item 6 |
|---|
| Head3 | Item 7 | Item 8 | Item 9 |
|---|
<TABLE BORDER>
<TR><TH>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR>
<TR><TH>Head2</TH>
<TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD></TR>
<TR><TH>Head3</TH>
<TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD></TR>
</TABLE>
Combinación de cabeceras laterales y líneas expandidas
| Head1 | Item 1 | Item 2 | Item 3 | Item 4 |
|---|
| Item 5 | Item 6 | Item 7 | Item 8 |
| Head2 | Item 9 | Item 10 | Item 3 | Item 11 |
|---|
<TABLE BORDER>
<TR><TH ROWSPAN=2>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item 8</TD>
</TR>
<TR><TH>Head2</TH>
<TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item 11</TD>
</TR>
</TABLE>
Combinación de cabeceras superiores y laterales. Tabla centrada. Contenidos centrados. Título al pie.
Resumen de tablas
| TABLE | TR | TD | TH | CAPTION |
|---|
| BORDER | X | - | - | - | - |
|---|
| ROWSPAN | - | - | X | X | - |
|---|
| COLSPAN | - | - | X | X | - |
|---|
| ALIGN | - | X | X | X | X |
|---|
| VALIGN | - | - | X | - | - |
|---|
| WIDTH | X | - | X | - | - |
|---|
| HEIGTH | X | - | X | - | - |
|---|
| CELLPADDING | X | - | - | - | - |
|---|
| CELLSPACING | X | - | - | - | - |
|---|
<CENTER>
<TABLE BORDER>
<CAPTION ALIGN=bottom>Resumen de tablas</CAPTION>
<TR>
<TD><TH>TABLE</TH><TH>TR</TH><TH>TD</TH><TH>TH</TH><TH>CAPTION</TH></TD>
</TR>
<TR ALIGN=CENTER>
<TH>BORDER</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>ROWSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>COLSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>ALIGN</TH><TD>-</TD><TD>X</TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR ALIGN=CENTER>
<TH>VALIGN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>WIDTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>HEIGTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>CELLPADDING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>CELLSPACING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
</TR>
</TABLE>
</CENTER>
Ejemplo con todos los elementos y parámetros
| | Media |
|---|
| Altura | Peso |
|---|
| Sexo | Hombres | 1.9 | 85 |
|---|
| Mujeres | 1.7 | 60 |
|---|
<TABLE BORDER>
<TR> <TD><TH ROWSPAN=2></TH>
<TH COLSPAN=2>Media</TH></TD>
</TR>
<TR> <TD><TH>Altura</TH><TH>Peso</TH></TD>
</TR>
<TR> <TH ROWSPAN=2>Sexo</TH>
<TH>Hombres</TH><TD>1.9</TD><TD>85</TD>
</TR>
<TR> <TH>Mujeres</TH><TD>1.7</TD><TD>60</TD>
</TR>
</TABLE>
Otro ejemplo de línea y columna expandidos
<TABLE BORDER>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
</TR>
<TR>
</TR>
</TABLE>
Ajustando márgenes y bordes
Tabla sin bordes
| Item 1 | Item 2 | Item 3 |
| Item 4 | Item 5 |
<TABLE>
<TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD>
</TR>
<TR> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
Aquí no es visible el borde de las celdas debido a que se ha omitido el atributo BORDER del elemento <TABLE>. La omisión o no es equivalente a parametrizarlo; se consigue lo mismo así: BORDER=0, y como ya habrás deducido, el valor de BORDER puede ser variable. Mira el siguiente ejemplo:
Tabla con borde de 10 puntos
| Item 1 | Item 2 |
| Item 3 | Item 4 |
<TABLE BORDER=10>
<TR> <TD>Item 1</TD> <TD> Item 2</TD>
</TR>
<TR> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
</TABLE>
Dimensionado de celdas
<TABLE BORDER CELLPADDING=10 CELLSPACING=0>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
<TABLE BORDER CELLPADDING=0 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
<TABLE BORDER CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Alineación, títulos y subtablas
Líneas múltiples en un tabla
| Enero | Febrero | Marzo |
|---|
| Celda 1 | Celda 2 | Otra celda
Celda 3 |
| Celda 4 | y esta
es la celda 5 | Celda 6 |
<TABLE BORDER>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
<TD>Otra celda<br> Celda 3</TD>
</TR>
<TR>
<TD>Celda 4</TD>
<TD>y esta<br>es la celda 5</TD>
<TD>Celda 6</TD>
</TR>
</TABLE>
Alineado horizontal del contenido de las celdas. ALIGN=LEFT | RIGHT | CENTERSe puede aplicar individualmente a una celda o a toda la línea
| Enero | Febrero | Marzo |
|---|
| Todas alineadas al centro | Celda 2 | Otra celda
Celda 3 |
| Alineado a la derecha | Alineado al centro | Por defecto
Alineado a la izquierda |
<TABLE BORDER>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR ALIGN=center>
<TD>Todas alineadas al centro</TD>
<TD>Celda 2</TD>
<TD>Otra celda<br> Celda 3</TD>
</TR>
<TR>
<TD ALIGN=right>Alineado a la derecha</TD>
<TD ALIGN=center>Alineado al centro</TD>
<TD>Por defecto<br>Alineado a la izquierdat</TD>
</TR>
</TABLE>
Alineado vertical del contenido de las celdas. VALIGN=TOP | BOTTOM | MIDDLESe puede aplicar individualmente a una celda o a toda la columna
| Enero | Febrero | Marzo |
|---|
| Todas alineadas arriba | Esta es la
Celda 2 | Celda 3 |
| Alineado arriba | Alineado abajo | Por defecto
Alineado al centro |
<TABLE BORDER>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR VALIGN=top>
<TD>Todas alineadas arriba</TD>
<TD>Esta es la<br>Celda 2</TD>
<TD>Celda 3</TD>
</TR>
<TR>
<TD VALIGN=top>Alineado arriba</TD>
<TD VALIGN=bottom>Alineado abajo</TD>
<TD>Por defecto<br>Alineado al centro</TD>
</TR>
</TABLE>
Titulando las tablas. CAPTION=TOP | BOTTOM
Título arriba
| Enero | Febrero | Marzo |
|---|
| Celda 1 | Celda 2 | Celda 3 |
<TABLE BORDER>
<CAPTION ALIGN=top>Titulo arriba</CAPTION>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
<TD>Celda 3</TD>
</TR>
</TABLE>
Título abajo
| Enero | Febrero | Marzo |
|---|
| Celda 1 | Celda 2 | Celda 3 |
<TABLE BORDER>
<CAPTION ALIGN=bottom>Titulo abajo</CAPTION>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
<TD>Celda 3</TD>
</TR>
</TABLE>
Anidando tablas. La tabla ABCD dentro de la tabla 12345
<TABLE BORDER>
<TR> <!-- ROW 1, TABLE 1 -->
<TD>1</TD>
<TD>2</TD>
<TD>3
<TABLE BORDER>
<TR> <!-- ROW 1, TABLE 2 -->
<TD>A</TD>
<TD>B</TD>
</TR>
<TR> <!-- ROW 2, TABLE 2 -->
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR> <!-- ROW 2, TABLE 1 -->
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE>
Longitud horizontal de las tablas
Tabla que ocupa el 50 % de la pantalla, y cuyas celdas están dimensionadas al 50 % cada una respecto a la longitud total de la tabla
| Width=50% | Width=50% |
| Celda 3 | Celda 4 |
<TABLE BORDER WIDTH="50%">
<TR><TD>Width=50%</TD><TD>Width=50%</TD>
</TR>
<TR><TD>Celda 3</TD><TD>Celda 4</TD>
</TR>
</TABLE>
Tabla dimensionada al 50 % de la pantalla, celdas sin dimensionar. Obsévese que se alargan más de lo que lo harían sin forzar la longitud de la tabla
<TABLE BORDER WIDTH="50%">
<TR><TD>Celda 1</TD><TD>2</TD>
</TR>
<TR><TD>Celda 3</TD><TD>4</TD>
</TR>
</TABLE>
El mismo efecto anterior, pero con la tabla dimensionada al 100 %
| WIDTH=100% | Celda 2 |
| 3 | Celda 4 |
<TABLE BORDER WIDTH="100%">
<TR><TD>WIDTH=100%</TD><TD>Celda 2</TD>
</TR>
<TR><TD>3</TD><TD>Celda 4</TD>
</TR>
</TABLE>
Centrado de una tabla en la página
<CENTER>
<TABLE BORDER WIDTH="50%">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
</CENTER>
Tabla forzada al 50 % de la página, conteniendo otra tabla anidada en una de sus celdas. La segunda tabla está forzada a ocupar el 100 % de la celda receptora.
<TABLE BORDER WIDTH="50%">
<TR><TD>Item 1</TD><TD>Item 2</TD>
</TR>
<TR><TD>
<TABLE BORDER WIDTH=100%>
<TR><TD>Item A</TD><TD>Item B</TD>
</TR>
</TABLE>
</TD>
<TD>Item 4</TD>
</TR>
</TABLE>
Longitud vertical de las tablas
Tabla que ocupa el 50 % horizontal de la pantalla, y el 25 % vertical. HEIGHT=25%
<TABLE BORDER WIDTH="50%" HEIGHT="25%">
<TR><TD>HEIGHT=15%</TD> <TD>Item 2</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>
Fondos de colores o gráficos en las tablas
Una tabla de cuatro celdas. Cada una de un color.
| Texto ROJO | Texto VERDE |
| Texto AZUL | Texto AMARILLO |
<TABLE BORDER>
<TR><TD BGCOLOR="RED">Texto ROJO</TD>
<TD BGCOLOR="green">Texto VERDE</TD>
</TR>
<TR><TD BGCOLOR="blue">Texto AZUL</TD>
<TD BGCOLOR="YELLOW">Texto AMARILLO</TD>
</TR>
</TABLE>
En este ejemplo se ha dado color individualmente a cada celda. El atributo BGCOLOR="color" puede utilizarse en cada elemento de la tabla para efectos globales. Por ejemplo, para hacer toda la tabla en rojo, sólo sería necesario escribir:
<TABLE BORDER BGCOLOR="red">
....
....
</TABLE>
Para toda la línea:
<TABLE BORDER>
<TR BGCOLOR="red"><TD> texto </TD></TR>
....
</TABLE>
También se puede usar una imagen como fondo de toda la tabla:
<TABLE BORDER BACKGROUND="yellow_r.gif">
....
....
</TABLE>
De sólo una celda:
<TABLE BORDER>
<TR><TD BACKGROUND="yellow_r.gif"> texto </TD></TR>
....
</TABLE>
O de toda la fila:
<TABLE BORDER >
<TR BACKGROUND="yellow_r.gif"><TD> texto </TD></TR>
....
</TABLE>
Bordes de colores en las tablas
Se puede cambiar el color de los bordes de una tabla, aunque este atributo no funciona igual en todos los navegadores, ya que en el IE el color afecta a todas las líneas de la tabla, y en Mozilla solamente a los bordes exteriores. Por ejemplo:
| Ejemplo de bordes | de color rojo |
| Ejemplo de bordes | de color rojo |
<TABLE BORDER=2 bordercolor="red" >
<TR><TD> Ejemplo de bordes</TD><TD> de color rojo </TD></TR>
<TR><TD> Ejemplo de bordes</TD><TD> de color rojo </TD></TR>
</TABLE>
Atributos de última generación
Tabla que solamente muestra los cuatro bordes
<TABLE FRAME="border" RULES="none">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Tabla que solamente muestra los bordes superior e inferior
<TABLE FRAME="hsides" RULES="none">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Tabla que solamente muestra los bordes izquierdo y derecho
<TABLE FRAME="vsides" RULES="none">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Tabla que solamente muestra las líneas de división entre columnas
<TABLE FRAME="void" RULES="cols">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Tabla que solamente muestra las líneas de división entre filas
<TABLE FRAME="void" RULES="rows">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Ejemplo de tabla con agrupamientos de columnas y filas
Ejemplo de grupos de columnas y líneas
| Columna1 | Columna2 | Columna3 | Columna4 | Columna5 | Columna6 | Columna7 |
|---|
| C1L1 | C2L1 | C3L1 | C4L1 | C5L1 | C6L1 | C7L1 |
| C1L2 | C2L2 | C3L2 | C4L2 | C5L2 | C6L2 | C7L2 |
| C1L3 | C2L3 | C3L3 | C4L3 | C5L3 | C6L3 | C7L3 |
| C1L4 | C2L4 | C3L4 | C4L4 | C5L4 | C6L4 | C7L4 |
| C1L5 | C2L5 | C3L5 | C4L5 | C5L5 | C6L5 | C7L5 |
| C1L6 | C2L6 | C3L6 | C4L6 | C5L6 | C6L6 | C7L6 |
| C1L7 | C2L7 | C3L7 | C4L7 | C5L7 | C6L7 | C7L7 |
<TABLE border="1" frame="border" rules="groups">
<CAPTION>Ejemplo de grupos de columnas y líneas</CAPTION>
<COLGROUP align="center">
<COLGROUP align="left">
<COLGROUP align="center" span="2">
<COLGROUP align="center" span="3">
<THEAD valign="top">
<TR>
<TH>Columna1</TH>
<TH>Columna2</TH>
<TH>Columna3</TH>
<TH>Columna4</TH>
<TH>Columna5</TH>
<TH>Columna6</TH>
<TH>Columna7</TH></TR>
<TBODY>
<TR><TD>C1L1<TD>C2L1<TD>C3L1<TD>C4L1<TD>C5L1<TD>C6L1<TD>C7L1</TR>
<TR><TD>C1L2<TD>C2L2<TD>C3L2<TD>C4L2<TD>C5L2<TD>C6L2<TD>C7L2</TR>
<TR><TD>C1L3<TD>C2L3<TD>C3L3<TD>C4L3<TD>C5L3<TD>C6L3<TD>C7L3</TR>
<TR><TD>C1L4<TD>C2L4<TD>C3L4<TD>C4L4<TD>C5L4<TD>C6L4<TD>C7L4</TR>
<TBODY>
<TR><TD>C1L5<TD>C2L5<TD>C3L5<TD>C4L5<TD>C5L5<TD>C6L5<TD>C7L5</TR>
<TR><TD>C1L6<TD>C2L6<TD>C3L6<TD>C4L6<TD>C5L6<TD>C6L6<TD>C7L6</TR>
<TFOOT>
<TR><TD>C1L7<TD>C2L7<TD>C3L7<TD>C4L7<TD>C5L7<TD>C6L7<TD>C7L7</TR>
</TABLE>
Como puedes ver, existe un agrupamiento desde la línea 1 a la 4, y otro de la 5 a la 6. A su vez, las columnas 3 y 4 forman un grupo, y la 5, 6 y 7 otro.Los dos agrupamientos de columnas se definen con las instrucciones:
<COLGROUP align="center" span="2">
<COLGROUP align="center" span="3">
Hay cuatro grupos de filas: La que aparece debajo de las cabeceras la escribe <THEAD> Las dos líneas que separan los grupos de filas centrales las producen las dos instrucciones <TBODY>, Y la última la produce <TFOOT>. Por supuesto, no es obligado que esten todas, puedes poner solamente las que necesites. Todo esto funciona solamente si en la definición de la tabla se incluye el atributo rules="groups"
Tablas con efectos compatibles con todos los navegadores...Como ya has podido ver, muchos de los efectos de última generación mostrados no funcionan igual, o no funcionan en absoluto con todos los navegadores. ¿Qué hacer entonces para conseguir tablas cuyas líneas de bordes se vean siempre bien? Pues la única solución es usar una tabla sin bordes. Sí, ya sé que lo que buscas no es eso, pero si utilizando atributos de tabla para poner líneas de bordes donde queramos hay problemas con algunos navegadores, la solución es utilizar otros recursos del HTML que sean admitidos por todos. No es ninguna solución mágica: solamente tienes que crear un gráfico con un punto (preferiblemente cuadrado) del color y grosor que quieras dar a tus líneas... y listo.
Supongamos que queremos conseguir con una tabla representar un recuadro con bordes rojos. Para ello, utilizando cualquier editor de gráficos creamos un fichero que contenga un punto de color rojo. Solamente uno, será casi invisible. No necesitamos más. Le llamaremos rojo.gif
 | | |
| Ejemplo de recuadro con ángulos rectos. |
|
Y este sería del código necesario:
<table width="300" height="50"
cellspacing="0" cellpadding="0" border="0" bgcolor="#6a7da5" align="center">
<tr>
<td rowspan="3" width="1" height="50">
<img src="rojo.gif" width="1px" height="50" border="0" alt=""></td>
<td colspan="4" height="1">
<img src="rojo.gif" width="300" height="1" border="0" alt=""></td>
<td rowspan="3" width="1">
<img src="rojo.gif" width="1px" height="50" border="0" alt=""></td>
</tr>
<tr>
<td colspan="4" align="center" height="48">
<font color="white"><b>Ejemplo de recuadro con ángulos rectos.</b></font></td>
</tr>
<tr>
<td colspan="4" height="1">
<img src="rojo.gif" width="300" height="1" border="0" alt=""></td>
</tr>
</table>
Como puedes ver, el truco consiste en definir celdas alrededor de la celda que lleva el texto. Estas celdas que rodean a la principal solamente contienen el fichero gráfico con el punto. Para conseguir que aparezcan las líneas, sólo hay que "estirar" el punto contenido en nuestro fichero gráfico rojo.gif. Esto nos permite "dibujar" las líneas que se quieran y donde se quieran, sin problemas de compatibilidad, ya que estos atributos del elemento <IMG> son completamente estandarizados (por lo menos de momento). Fíjate en que además de atributos propios del elemento IMG también se utiliza una instrucción deestilo: width="1px" para asegurar un grosor mínimo de la línea. Este es el aspecto de la misma tabla con los bordes visibles:
| Vertical izquierda | Horizontal arriba | Vertical derecha |
| Ejemplo de recuadro con ángulos rectos. |
| Horizontal abajo |
--------------------
Utilizando una técnica parecida, también se pueden conseguir recuadros con las esquinas redondeadas. Al igual que en el anterior ejemplo, es necesario tener un gráfico previamente, pero este nos dará algo más de trabajo. Con cualquier editor de gráficos (el "Paint" de Windows, por ejemplo) generas un círculo del color que quieras, y con el borde transparente o de otro color. A continuación lo cortas en cuatro porciones, como una tarta, y guardas cada trozo con un nombre cualquiera, por ejemplo, angulo1, angulo2, etc. Así
 | |  |
| Recuadro con ángulos redondeados | |
 | |  |
Y este es el código necesario:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#DDE0FC" width="20"><img src="angulo1.gif" width="20" height="20"></td>
<td bgcolor="#DDE0FC"> </td>
<td bgcolor="#DDE0FC" width="20"><img src="angulo2.gif" width="20" height="20"></td>
</tr>
<tr>
<td bgcolor="#DDE0FC" width="20"> </td>
<td bgcolor="#DDE0FC">Recuadro con ángulos redondeados</td>
<td bgcolor="#DDE0FC" width="20"> </td>
</tr>
<tr>
<td bgcolor="#DDE0FC" width="20"><img src="angulo4.gif" width="20" height="20"></td>
<td bgcolor="#DDE0FC"> </td>
<td bgcolor="#E5E7FD" width="20"><img src="angulo3.gif" width="20" height="20"></td>
</tr>
</table>
Como puedes ver, para que el efecto sea completo hay que dar el mismo color que tienen los gráficos como fondo de las celdas. Estos son los cuatro gráficos necesarios:
angulo1.gif angulo2.gifangullo4.gif angulo3.gif
|
TOMADO DE :https://www.uv.es/jac/guia/tablaeje.htm |
