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 de
estilo:
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
Comentarios
Publicar un comentario