martes, 29 de noviembre de 2011

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 posición 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>

Programa 71

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.

Ilustración 6 - Uso del atributo 'align' en tablas.

image

Publicado por Bobuu 0 comentarios

domingo, 27 de noviembre de 2011

87 - HTML - Tablas - Atributo “summary”

Con este atributo (summary) podemos definir de qué trata la tabla (propósito, objeto, función, etc.), en teoría en navegadores que utilicen sintetizadores de voz, debería tener algún efecto. Se aplica para navegadores no visuales (Braile, voz, etc.)

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

<html>
  <head>
    <title>Tabla - Ejemplo de "summary"</title>
  </head>
  <body>
       <table width="100" height="50" border="1"  bordercolorlight="red" bordercolordark="maroon" cellspacing="50" cellpadding="50%" summary="Esta es una tabla de prueba para ver el efecto de diferentes etiquetas y atributos">
            <caption>Tabla de ejemplo</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>

Programa 70

Hemos probado el código en Chrome, IE, IE 64 bits, y no hemos visto ninguna diferencia, seguramente porque no utilizan ningún sintetizador de voz.

Publicado por Bobuu 0 comentarios

viernes, 25 de noviembre de 2011

86 - HTML - Tablas - Aspecto <caption></caption>

Si queremos asignar un título a la tabla utilizamos la etiqueta <caption>. Esta etiqueta requiere un inicio <caption> y un fin </caption>.

Solo puede incluirse un elemento <caption> por tabla y va inmediatamente después de la etiqueta inicial de la tabla.

Debe tratarse siempre de que el titulo sea descriptivo al contenido de la tabla para que sea eficaz.

Este título puede ser “formateado” con las etiquetas normales de ‘negrita’, ‘cursiva’, etc., también se puede alinear a derecha, izquierda, centro, etc.

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

<html>
  <head>
    <title>Uso de la etiqueta “caption”</title>
  </head>
  <body>
    <table width="100" height="50" border="1"  bordercolorlight="red" bordercolordark="maroon" cellspacing="50" cellpadding="50%" >
            <caption>Tabla de ejemplo</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>

Programa 69

image

Uso del atributo "caption"

Publicado por Bobuu 0 comentarios

miércoles, 23 de noviembre de 2011

83 - HTML - Tablas - Atributos “cellspacing” y “cellpadding”

En las tablas podemos controlar la distancia entra las celdas, y entre el borde de la celda y su contenido. Estos valores los podemos definir con “cellspacing” y “cellpadding” respectivamente.

cellspacing: Este atributo permite determinar o especificar la distancia entre las celdas y entre las celdas y el margen exterior de la tabla. El valor de este atributo se mide en pixeles y es válido para todas las celdas.

image

cellpadding: Este atributo nos permite especificar la distancia entre el margen interior de la celda y su contenido. En el caso de este atributo, si su valor es en pixeles los cuatro bordes de la celda deberían estar a la distancia indicada del contenido. En cambio si el valor es un porcentaje, los bordes superior e inferior estarán separados a una distancia porcentual del valor disponible verticalmente y lo mismo para los bordes derecho e izquierdo que estarán separados al porcentaje indicado del espacio disponible horizontalmente.

image

Código de Ejemplo aplicando las características vistas anteriormente: Se ha aplicado una distancia de 50 pixeles de separación entre celdas (cellspacing), y de 50% en la separación del contenido y los bordes (cellpadding).

<html>
  <head>
    <title>Tabla - Alineación vertical de celdas</title>
  </head>
  <body>
        <table border="1"  bordercolorlight="red" bordercolordark="maroon" cellspacing="50" cellpadding="50%">
            <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>

Programa 65

Puedes probar el código haciendo copiar y pegar.

Representación del código en el explorador.

image

http://bobuu.blogspot.com
Publicado por Bobuu 0 comentarios

martes, 22 de noviembre de 2011

82 - HTML – Tablas – Atributos Celdas: "align"

Así como podemos alinear las tablas, también podemos alinear el contenido de las celdas o las filas. Dependiendo de si es un único dato o un texto tendrá un efecto diferente, pero siempre similar en ambos casos.

El atributo que utilizamos para la alineación es “align”, y los posibles valores son los siguientes:

left: Alinea los datos a la izquierda. Si es un texto lo justifica a la izquierda.

center: Centra los datos. Si es texto lo justifica centrado. Los encabezados de las tablas tienen este valor por defecto.

right: Es lo contrario de ‘left’. Alinea los datos a la derecha. Si es un texto lo justifica a la derecha.

justify: Justifica el texto a derecha e izquierda .

char: Alinea el texto alrededor de un carácter específico. En el caso de que el navegador no soportara alineación alrededor de un carácter, no se especifica el comportamiento.

Código de Ejemplo aplicando las características vistas anteriormente (el valor “char” no funciona en todos los navegadores):

<html>
  <head>
    <title>Tabla - Alineacion vertical de celdas</title>
  </head>
  <body>
    <table width="100%" border="1" bordercolorlight="red" bordercolordark="maroon" >
      <tr></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>

Programa 64

Representación del código en el explorador.

image

Publicado por Bobuu 0 comentarios

domingo, 20 de noviembre de 2011

81 - HTML – Tablas – Atributos Celdas: "background – bgcolor – width - height"

Como ya hemos dicho las celdas también pueden personalizarse al igual que las tablas. Las modificaciones marcadas para las celdas tienen preferencia sobre las características que se han definido para la tabla.

Estas características se pueden definir mediante los siguientes atributos:

background : Permite insertar una imagen de fondo en la celda mediante el URI del recurso.

bgcolor : Especifica el color de fondo a la celda mediante el nombre del color o el valor sRGB.

width : Es el ancho recomendado (en píxeles o en valor porcentual). Hay que tener en cuenta que si el contenido necesita mayor tamaño, el valor de este atributo no se respetara.

height : Es la altura recomendada (en píxeles o en valor porcentual). Al igual que ocurre con ´width´, Si el contenido necesita de mayor tamaño, el valor de este atributo no se respeta.

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

<html>

  <head>

    <title>Tabla - Alineación vertical de celdas</title>

  </head>

  <body>

    <table width=30%" border="1"  bordercolorlight="red"

        bordercolordark="maroon" >

        <tr>

            <th>Nombre</th>

            <th>Teléfono</th>

            <th>Otros</th>

            <th>Comentarios</th>

        </tr>

        <tr>

            <td valign="top">arriba - top</td>

            <td valign="middle">medio-middle</td>

            <td valign="bottom">abajo-bottom</td>

            <td>esta celda es solo para lograr que se vea bien representada la alineación de las tres primeras celdas</td>

        </tr>

        <tr valign="baseline">

            <td>celdas</td>

            <td>con</td>

            <td>"baseline"</td>

            <td>esta celda es solo para lograr que se vea bien representada la alineación de las tres primeras celdas</td>

        </tr>

    </table>

  </body>

</html>

Programa 63

Representación del código en el explorador:

Nombre

Teléfono

Otros

Comentarios

celda con imagen utilizando - background -

celda con color utilizando bgcolor

normal

celda normal

celda con width 80%

celda con height 80%

normal

celda normal

Publicado por Bobuu 0 comentarios

viernes, 18 de noviembre de 2011

80 - HTML - Tablas - Celdas - Alineación Vertical "valign"

Para especificar la alineación vertical de los datos de una celda en una tabla, utilizamos el atributo "valign".

Los posibles valores que puede tomar este atributo son los siguientes:

top: Alinea todos los datos en la parte superior de la celda.

middle: Este valor es el indicado por defecto. Todos los datos se alinean verticalmente en el centro.

bottom: Al contrario que con "top", los valores dentro de la celda se alinean en la parte inferior.

baseline: Cuando una celda de una fila tenga este atributo, todas las demás celdas de la fila deberían tener sus datos posicionados de tal forma que la primera línea de texto sea en una línea de base común para todas las celdas de la fila. El atributo "baseline" se coloca en la definición de fila <tr>, como podéis ver en el ejemplo de más abajo.

Código de Ejemplo de una tabla con el texto de las celdas en diferentes alineaciones.

<html>

  <head>

    <title>Tabla - Alineación vertical de celdas</title>

  </head>

  <body>

    <table width=30%" border="1"  bordercolorlight="red"

        bordercolordark="maroon" >

        <tr>

            <th>Nombre</th>

            <th>Telefono</th>

            <th>Otros</th>

            <th>Comentarios</th>

        </tr>

        <tr>

            <td valign="top">arriba - top</td>

            <td valign="middle">medio-middle</td>

            <td valign="bottom">abajo-bottom</td>

            <td>esta celda es solo para lograr que se vea bien representada la alineación de las tres primeras celdas</td>

        </tr>

        <tr valign="baseline">

            <td>celdas</td>

            <td>con</td>

            <td>"baseline"</td>

            <td>esta celda es solo para lograr que se vea bien representada la alineación de las tres primeras celdas</td>

        </tr>

    </table>

  </body>

</html>

Programa 62

Representación del código en el explorador.

Nombre

Teléfono

Otros

Comentarios

arriba - top

medio-middle

abajo-bottom

esta celda es solo para lograr que se vea bien representada la alineación de las tres primeras celdas

celdas

con

"baseline"

esta celda es solo para lograr que se vea bien representada la alineación de las tres primeras celdas

Publicado por Bobuu 0 comentarios

miércoles, 16 de noviembre de 2011

79- HTML - Tablas - Formato de celdas <align>

El contenido de las celdas también puede ser alineado.

Para la alineación de los contenidos de las celdas utilizamos el atributo “align” al cual podemos aplicarle los siguientes posibles valores:

left: Alinea los datos a al izquierda.

center: Muestra los datos centrados. Texto con justificación centrada. Este es el valor por defecto para los encabezados de las tablas

right: Datos alineados a la derecha.

justify: Ajusta el texto a derecha e izquierda

char: Alinea el texto alrededor de un carácter específico. Para el caso de que el navegador soporte esta opción.

Código de Ejemplo de una tabla con el texto de las celdas en diferentes alineaciones.

<html>

<head>

<title>Tabla - Fondos de celda</title>

</head>

<body>

<table width=30%" border="1"

bordercolorlight="red"

bordercolordark="maroon" >

<tr>

<th>Nombre</th>

<th>Teléfono</th>

</tr>

<tr>

<td align="left">izquierda</td>

<td align="right">derecha</td>

</tr>

<tr>

<td align="center">Centrado</td>

<td align="justify">este texto está justificado</td>

</tr>

<tr>

<td align="right">derecha</td>

<td align="left">izquierda</td>

</tr>

</table>

</body>

</html>

Programa 61

Representación del código en el explorador.

Nombre

Teléfono

izquierda

derecha

Centrado

este texto está justificado

derecha

izquierda

Publicado por Bobuu 0 comentarios

lunes, 14 de noviembre de 2011

78 - HTML - Tablas, personalización de las celdas

Al igual que las tablas, podemos personalizar el aspecto de cada celda.

Los atributos que podemos utilizar son los siguientes:

background: Nos permite poner una imagen de fondo en la celda utilizando el URI del recurso. (no está definido este atributo en los estándares, pero funciona bastante bien en Netscape e Internet Explorer).

bgcolor: Da color de fondo a la celda mediante el nombre del color o el valor sRGB.

width: Especifica una anchura recomendada (en píxeles o en valor porcentual). Pero si el contenido necesita mayor tamaño, el valor de este atributo es ignorado.

height: Al igual que "width", especifica la altura recomendada (en píxeles o en valor porcentual). Pero también si el contenido necesita mayor tamaño, el valor de este atributo es ignorado.

Para los valores de los colores de estos atributos podemos utilizar tanto su código sRGB, como el nombre del color.

Código de Ejemplo de una tabla con bordes y celdas de colores.

<html>

<head>

<title>Tabla - Fondos de celda</title>

</head>

<body>

<table width=30%" border="1" bordercolorlight="red" bordercolordark="maroon" >

<tr>

<th>Nombre</th>

<th>Telefono</th>

</tr>

<tr>

<td bgcolor="blue">Profe</td>

<td bgcolor="red">999 666 999</td>

</tr>

<tr>

<td bgcolor="green">Salud</td>

<td bgcolor="yellow">888 555 444</td>

</tr>

<tr>

<td bgcolor="red">Abundancia</td>

<td bgcolor="red">99 99 99 99</td>

</tr>

</table>

</body>

</html>

Programa 60

Representación del código en el explorador.

clip_image001

Publicado por Bobuu 0 comentarios
Suscribirse a: Entradas (Atom)