LEER Y COMPRENDER (TABLAS COLORES)

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 bordesde color rojo
Ejemplo de bordesde 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
ABC
DEF
<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
ABC
DEF
<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
ABC
DEF
<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
ABC
DEF
<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
ABC
DEF
<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
Columna1Columna2Columna3Columna4Columna5Columna6Columna7
C1L1C2L1C3L1C4L1C5L1C6L1C7L1
C1L2C2L2C3L2C4L2C5L2C6L2C7L2
C1L3C2L3C3L3C4L3C5L3C6L3C7L3
C1L4C2L4C3L4C4L4C5L4C6L4C7L4
C1L5C2L5C3L5C4L5C5L5C6L5C7L5
C1L6C2L6C3L6C4L6C5L6C6L6C7L6
C1L7C2L7C3L7C4L7C5L7C6L7C7L7
<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 izquierdaHorizontal arribaVertical 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

Entradas populares de este blog

6º PARCIAL: TABLAS EN HTML

Imagen
La etiqueta  <table> , permite definir tablas. Una tabla es una cuadricula de casillas o celdas, divididas en filas y columnas Las tablas para componerlas se hace uso de otras etiquetas, las cuales no tienen sentido sino están situadas dentro de una etiqueta de tabla. Estas etiquetas son las siguientes. Etiquetas Descripción <table> Definición de una tabla. <th> Definición de cabecera de tabla. <tr> Define una fila en la tabla. <td> Define una celda en la tabla. <caption> Define el nombre o título de la tabla. <colgroup> Especifica un grupo de una o más columnas para aplicar formato. <col> Especifica las propiedades de una columna de las columnas definidas en un elemento colgroup <thead> Define la cabecera de la tabla. <tbody> Define el cuerpo de la tabla <tfoot> Define el pie de la tabla Definición de una tabla sencilla Para crear una tabla sencilla se ha de utilizar en primer lugar la eti...
Leer más

EJEMPLOS DE FRAME

Un frame de 3 áreas verticales (COLS) Se vería así: A B C Y se escribiría; así: <FRAMESET COLS =30%,20%,50%> <FRAME SRC="a.htm"> <FRAME SRC="b.htm"> <FRAME SRC="c.htm"> </FRAMESET> Un frame de 3 áreas horizontales (ROWS) Se vería así: A B C Y se escribiría así: <FRAMESET ROWS =25%,25%,50%> <FRAME SRC="a.htm"> <FRAME SRC="b.htm"> <FRAME SRC="c.htm"> </FRAMESET> Un frame combinado de un área vertical y dos horizontales Se vería así: A B C Y se escribiría así: <FRAMESET COLS=20%,*> <FRAME SRC="a.htm"> <FRAMESET ROWS=40%,*> <FRAME SRC="b.htm"> <FRAME SRC="c.htm"> </FRAMESET> </FRAMESET> Un frame combinado de dos áreas horizontales, la de abajo dividida en dos verticales Se vería así: A B C Y...
Leer más

CLASE 21 DE FEBRERO 2019

Imagen
Preguntas relacionadas ¿Que el CSS? CSS  son las siglas de Cascading Style Sheets - Hojas de Estilo en Cascada - que es un lenguaje que describe la presentación de los documentos estructurados en hojas de estilo para diferentes métodos de interpretación, es decir, describe como se va a mostrar un documento en pantalla Tablas en HTML En HTML se pueden representar datos en tablas. Tabla básica - Elementos "table", "tr" y "td" EJEMPLO  En la siguiente tabla se muestran 12 datos: Para ello, el código puede ser ( "tabla-basica.html" ): <!DOCTYPE html> <html lang="es-ES"> <head> <meta charset="utf-8"> <title>Ejemplo de tabla básica</title> </head> <body> <table> <tr> <td>uno</td> <td>dos</td> <td>tres</td> </tr> <tr> <td...
Leer más