lunes, 15 de noviembre de 2010

9.- Curiosidades... cuidado con los meteoritos...

¿Sabia que ... ?
"El riesgo de que un meteorito golpee a un ser humano es de una vez cada 9300 años "
Campo_del_Cielo_meteorito      
Imagen | Guia Fe
Temas anteriores de curso HTML gratis
91 - HTML - Tablas - Agrupamientos lógicos “colgroup y col”
90 - HTML - Tablas - Agrupamientos lógicos “thead, tfoot y tbody”
89 - HTML - Tablas - Expansión de celdas “colspan y rowspan”
mas ... acceder al índice de temas ...

domingo, 14 de noviembre de 2010

51.- Citas. .. ven tus ojos ?….

" Los ojos no sirven de nada a un cerebro ciego "
homer-simpson-wallpaper-brain-1024[1] 
Imagen: Apostolado Caballero de la Inmaculada


Temas anteriores de curso HTML gratis * http://bobuu.blogspot.com
91 - HTML - Tablas - Agrupamientos lógicos “colgroup y col”
90 - HTML - Tablas - Agrupamientos lógicos “thead, tfoot y tbody”
89 - HTML - Tablas - Expansión de celdas “colspan y rowspan”
mas ... acceder al índice de temas ... 


martes, 9 de noviembre de 2010

91 - HTML - Tablas - Agrupamientos lógicos “colgroup y col”

Así como es posible agrupar lógicamente filas en las tablas, también podemos realizar agrupaciones lógicas de columnas verticales. Para esta tarea utilizamos los elementos <colgroup> y <col> indicando las columnas que forman parte del grupo.

Cuando no se encuentra la etiqueta <colgroup> el navegador entiende que todo forma parte de un solo grupo. Las propiedades definidas para un grupo solo afectaran a las columnas del grupo.

La etiqueta <colgroup> tiene los siguientes atributos:

span : Con este atributo especificamos el numero de columnas que componen el grupo. Si no definiéramos este atributo el grupo contendría una sola columna. Para el caso de definirse uno o mas elementos <col>, los navegadores ignoraran el atributo span.

width : Con este atributo podemos definir un ancho de columna por defecto, para el grupo. Además de los valores normales (pixel, porcentaje, etc.), este atributo permite el valor especial “ 0* ” (es un cero y un asterisco), esto le indica que el ancho de cada columna del grupo debe ser la mínima para alojar los contenidos de las columnas. O sea que antes de calcular el ancho de la columna se deben conocer los contenidos para que entren en ella. Al igual que con el atributo “span”, en caso de especificarse el ancho mediante un elemento <col>, será este el que determine el tamaño (el <col>).

Para definir un grupo de columnas utilizamos <colgroup span=”n”>, donde “n” es el numero de columnas que forman el grupo (Ej: <colgroup span=”4”, esto determinaría un grupo de 4 columnas).

No es posible utilizar las dos formas de definir columnas (span y col) ya que en caso de utilizarse las dos, siempre <col> prevalecerá sobre “span”.

La ventaja de span sobre col es que con col debemos definir columna por columna, mientras que con span podemos por ejemplo definir 50 columnas de un ancho determinado de una sola vez, mientras que con “col” debemos hacerlo columna a columna (50 veces).

Es más fácil escribir:

<!--el ancho de las 50 columnas es de 15 px -->
<colgroup span="50" width="15">
</colgroup>

que:


    <colgroup> grupo de 50 columnas con ancho de 15 px...
<col width="15"> primer columna, ancho 15 píxeles
<col width="15"> segunda columna, ancho 15 píxeles
. . . . . .
repitiendo 50 veces las líneas hasta definir todas las columnas


      <col>... 
</colgroup>


Si necesitamos diferencia una columna de las del resto del grupo, debemos identificar el ancho de esa columna con un elemento <col>.



<colgroup width="20">

     <col span="20" align="center">


    <col id="formato diferente">     “id = número de la columna con formato diferente”


</colgroup>



El atributo width="20" del elemento <colgroup> se aplica a las veinte columnas.



El primer elemento <col> se refiere a las primeras 20 columnas, y alinea su contenido a la derecha, y el segundo asigna un identificador a la columna número “formato diferente” de modo que podemos hacer que una hoja de estilo (ya veremos mas adelante las hojas de estilo) haga referencia a ella.



Con el elemento <col> podemos compartir atributos entre varias columnas sin que ello implique ningún tipo de agrupamiento estructural.



El "campo de acción" del elemento <col> es el número de columnas que compartirán los atributos del elemento.



Los atributos disponibles del elemento <col> son:



span : El valor de este atributo debe ser un entero mayor que cero, especifica el número de columnas que "abarca". <col> comparte sus atributos con todas las columnas que abarca. De no aparecer este atributo <col> solo se refiere a una columna.



width : Especifica el ancho por defecto para todas las columnas abarcadas por el elemento <col>. Tiene el mismo significado que el atributo width del elemento <colgroup> y prevalece sobre él.



Código de Ejemplo aplicando las características vistas anteriormente:



<html>

  <head>


    <title>Tabla - Ejemplo de Agrupamientos lógicos</title>


  </head>


  <body>


       <table border="1"  bordercolorlight="red" bordercolordark="maroon" >


       <caption>Tabla - Ejemplo de Agrupamientos lógicos</caption>



    <colgroup span="1" width="30" bgcolor="green" </colgroup>

    <colgroup span="2" width="40" bgcolor="yellow" </colgroup>


    <colgroup span="1" width="50" bgcolor="red" </colgroup>


<tr>


         <th>Nombre</th>


         <th>Telefono</th>


         <th>Otros</th>


         <th>Comentarios</th>


</tr>



<tbody>

      <tr>


         <td>Expansion hacia abajo</td>


         <td>derecha</td>


         <td>centro</td>


         <td>texto justificado izq. y derecha</td>



      </tr>

      <tr>


         <td>Izquierda</td>


         <td>derecha</td>


         <td>centro</td>


         <td>texto justificado izq. y derecha</td>



      </tr>

      <tr>


         <td>Expansion hacia la derecha</td>


         <td>derecha</td>


         <td>centro</td>


         <td>texto justificado izq. y derecha</td>



      </tr>

</tbody>



   </table>

  </body>


</html>



En ejemplo hemos definido tres grupos de columnas la primer color verde, las 2 siguientes amarillas y la tercera roja.









Representación en el navegador:




<="<"><="<"><="<">







































Tabla - Ejemplo de Agrupamientos lógicos
Nombre Telefono Otros Comentarios
Expansion hacia abajo derecha centro texto justificado izq. y derecha
Izquierda derecha centro texto justificado izq. y derecha
Expansion hacia la derecha derecha centro texto justificado izq. y derecha



Una forma muy común de agrupamientos que se puede ver en la paginas web que se visitan, es insertar una tabla dentro de otra o una al lado de otra. Con esto logramos ubicar en nuestra pagina los diferentes elementos que la componen. Aunque se utiliza el consorcio W3C, recomienda utilizar hojas de estilo para conseguir este resultado.



Temas anteriores de curso HTML gratis

90 - HTML - Tablas - Agrupamientos lógicos “thead, tfoot y tbody”


89 - HTML - Tablas - Expansión de celdas “colspan y rowspan”


88 - HTML - Tablas - Alineación de tablas “left, center, right”



mas ... acceder al índice de temas ...



Otros Links:

Piso en Garrucha - Almería € 110.000


Ático en Vera Playa - Almería € 303.500


Ático en Vera Playa - Almería € 300 (Alq.Anual)

lunes, 1 de noviembre de 2010

90 - HTML - Tablas - Agrupamientos lógicos “thead, tfoot y tbody”

Podemos mediante la formación de grupos lógicos de filas, asignarles propiedades o cumplir una determinada función especifica que solo afectaran a esas filas. Como ejemplo podría ser la composición de una cabecera o un pie de tabla.

Para estas funciones utilizamos los atributos “thead”, “tfoot” y “tbody”.

<thead> : Con “thead” podemos especificar un encabezado (head) en una tabla. Las filas que se incluyan entre las etiquetas de inicio y de fin de “thead”, aparecerán siempre como encabezado en la tabla. Solo se define un encabezado por tabla.

<tfoot> : Al igual que con “thead”, “tfoot” nos permite especificar el pie (foot) de la tabla. También al igual que en el encabezado las filas que se incluyen entre las etiquetas de inicio y de fin aparecerán siempre al final de la tabla. Sólo se define una vez por tabla.

<tbody> : Con esta etiqueta podemos agrupar la zona que falta, el cuerpo (body) de la tabla. Las filas que se incluyen entre las etiquetas de inicio y fin de esta etiqueta delimitan un grupo de filas con características comunes en cuanto a su contenido, esto nos permite atribuirles propiedades comunes para esas filas. A diferencia de “thead” y “tfoot”, con “tbody”, podemos definir todos los grupos de filas que consideremos necesarios necesarios.

Estas etiquetas son útiles para varias situaciones, que ya a cada uno se le ocurrirá, a modo de ejemplo podemos decir que se pueden aplicar para los casos donde se imprimen tablas largas y debemos repetir la información de la cabecera y el pie en todas las paginas que contengan datos de la tabla.

Es recomendable que en el pie (tfoot) y en el encabezado (thead), se incluya información relativa a las columnas de la tabla. Y el cuerpo de la tabla (tbody) debería contener filas de datos.

En el caso de estar presentes las tres etiquetas, cada elemento contiene un grupo de filas, y cada grupo debe tener mínimo una fila.

Como nota cabe indicar que “tfoot” debe aparecer antes de “tbody” para que los navegadores puedan representar el pie antes de recibir todos los datos del cuerpo de la tabla.

<tbody> es siempre obligatoria, excepto cuando la tabla no tenga sección de cabecera ni de pie.

Código de Ejemplo aplicando las características vistas anteriormente:

<html>
  <head>
    <title>Tabla - Ejemplo de Agrupamientos lógicos</title>
  </head>
  <body>
       <table width="50" height="50" border="1"  bordercolorlight="red" bordercolordark="maroon" >
       <caption>Tabla - Ejemplo de Agrupamientos lógicos</caption>

<thead bgcolor="yellow">
<tr>
         <th width="20%" >Nombre</th>
         <th width="20%" >Telefono</th>
         <th width="20%" >Otros</th>
         <th width="20%">Comentarios</th>

      </tr>
</thead>

<tfoot bgcolor="green">
       <tr>
         <td  colspan="4" align="center">Pie de tabla de ejemplo</td>
       </tr>

</tfoot>

<tbody>
      <tr>
         <td  width="20%" align="left">Expansion hacia abajo</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="20%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="10%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
      <tr>
         <td  width="20%" >Expansion hacia la derecha</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="20%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
</tbody>

   </table>
  </body>
</html>

En ejemplo hemos pintado de amarillo la cabecera, hemos dejado de blanco el cuerpo y pintado de verde el pie.

Representación en el navegador:

Tabla - Ejemplo de Agrupamientos lógicos
Nombre Telefono Otros Comentarios
Pie de tabla de ejemplo
Expansion hacia abajo derecha centro texto justificado izq. y derecha
Izquierda derecha centro texto justificado izq. y derecha
Expansion hacia la derecha derecha centro texto justificado izq. y derecha

Como ejercicio práctico podríais por ejemplo intentar insertar uno o mas agrupamientos lógicos <tbody> con otro color en el cuerpo de la tabla.

Temas anteriores de curso HTML gratis
86 - HTML - Tablas - Aspecto <caption></caption>
85 - HTML - Tablas - Atributos “bgcolor y backgroundwidth”
84 - HTML - Tablas - Atributos “width y height”
mas ... acceder al índice de temas ...

Otros Links:
Piso en Garrucha - Almería € 110.000
Ático en Vera Playa - Almería € 303.500
Ático en Vera Playa - Almería € 300 (Alq.Anual)

viernes, 29 de octubre de 2010

89 - HTML - Tablas - Expansión de celdas “colspan y rowspan”

Podemos indicar al contenido de una celda que se expanda en su columna o en su fila. Esto lo logramos con los atributos “colspan” (para columnas) y “rowspan” para expandir en la fila.

Los valores de estos atributos es un numero que indica el número de columnas que se expande hacia la derecha para el caso de “colspan”, y para el caso de “ rowspan”, el número indica el numero de filas que se expande hacia abajo.

Código de Ejemplo aplicando las características vistas anteriormente:

<html>
  <head>
    <title>Tabla - Ejemplo de combinación de celdas</title>
  </head>
  <body>
       <table width="50" height="50" border="1"  bordercolorlight="red" bordercolordark="maroon" >
<caption>Tabla - Ejemplo de combinación de celdas</caption>
<tr>
         <th width="20%" >Nombre</th>
         <th width="20%" >Telefono</th>
         <th  width="20%" >Otros</th>
         <th width="20%">Comentarios</th>

      </tr>
      <tr>
         <td rowspan="2"  bgcolor="yellow" width="20%" align="left">Expansion hacia abajo - rowspan</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="20%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="10%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
      <tr>
         <td  colspan="2" bgcolor="red" width="20%" >Expansion hacia la derecha - colspan</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="20%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
   </table>
  </body>
</html>

Representación en el navegador: Hay que tener un poco de cuidado ya que los diferentes navegadores pueden representar de diferentes maneras estos atributos.

Tabla - Ejemplo de combinación de celdas
Nombre Telefono Otros Comentarios
Expansion hacia abajo - rowspan derecha centro texto justificado izq. y derecha
Izquierda derecha centro texto justificado izq. y derecha
Expansion hacia la derecha - colspan derecha centro texto justificado izq. y derecha

Temas anteriores de curso HTML gratis
86 - HTML - Tablas - Aspecto <caption></caption>
85 - HTML - Tablas - Atributos “bgcolor y backgroundwidth”
84 - HTML - Tablas - Atributos “width y height”
mas ... acceder al índice de temas ...

Otros Links:
Piso en Garrucha - Almería € 110.000
Ático en Vera Playa - Almería € 303.500
Ático en Vera Playa - Almería € 300 (Alq.Anual)

jueves, 28 de octubre de 2010

88 - HTML - Tablas - Alineación de tablas “left, center, right”

Las tablas pueden ser alineadas horizontalmente dentro de un documento, de acuerdo a nuestros requerimientos. El atributo “align” nos permite especificar la posicion de la tabla respecto al documento. Este atributo esta desaprobado en favor de las hojas de estilo.

Código de Ejemplo aplicando las características vistas anteriormente:

<html>
  <head>
    <title>Tabla - Ejemplo de alineación de tablas</title>
  </head>
  <body>
       <table align="right" width="50" height="50" border="1"  bordercolorlight="red" bordercolordark="maroon" >
<caption>Tabla de ejemplo de alineación derecha</caption>
<tr>
         <th width="20%" >Nombre</th>
         <th width="20%" >Telefono</th>
         <th  width="20%" >Otros</th>
         <th width="20%">Comentarios</th>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="20%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="10%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
      <tr>
         <td  width="20%" align="left">Izquierda</td>
         <td  width="20%" align="right">derecha</td>
         <td  width="20%" align="center">centro</td>
         <td  width="20%" align="justify">texto justificado izq. y derecha</td>

      </tr>
   </table>
  </body>
</html>

Representación en el navegador: Cambiando los valores de “align” por ‘center’ o ‘left’, podemos alinear la tabla en el centro o a la izquierda respectivamente.

Tabla de ejemplo de alineación derecha
Nombre Telefono Otros Comentarios
Izquierda derecha centro texto justificado izq. y derecha
Izquierda derecha centro texto justificado izq. y derecha
Izquierda derecha centro texto justificado izq. y derecha

Temas anteriores de curso HTML gratis
86 - HTML - Tablas - Aspecto <caption></caption>
85 - HTML - Tablas - Atributos “bgcolor y backgroundwidth”
84 - HTML - Tablas - Atributos “width y height”
mas ... acceder al índice de temas ...

Otros Links:
Piso en Garrucha - Almería € 110.000
Ático en Vera Playa - Almería € 303.500
Ático en Vera Playa - Almería € 300 (Alq.Anual)