martes, 14 de junio de 2011

77 - HTML - Tablas - Colores de Líneas y bordes.

Ya hemos visto diferentes tipos de líneas y bordes de tablas, y ahora veremos cómo darle color a estos bordes, permitiendo mejorar la presentación de nuestros trabajos.

Para definir un color a los bordes superior e izquierdo de la tabla, utilizamos el atributo "bordercolorlight".

Para los bordes inferior y derecho de la tabla, utilizaremos el atributo "bordercolordark".
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 rojo y marrón.

<html>

<head>

<title>Tabla - bordes de colores</title>

</head>

<body>

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

<tr>

<th>Nombre</th>

<th>Telefono</th>

</tr>

<tr>

<td>Profe</td>

<td>999 666 999</td>

</tr>

<tr>

<td>Salud</td>

<td>888 555 444</td>

</tr>

<tr>

<td>Abundancia</td>

<td>99 99 99 99</td>

</tr>

</table>

</body>

</html>

Programa 59

La representación en el navegador del código anterior.

clip_image001

sábado, 11 de junio de 2011

76 - HTML - Tablas - Líneas y bordes interiores.

Así como hemos visto que podemos indicar dónde ubicar los bordes exteriores, también podemos especificar las líneas de división interna en una tabla.

Para esto utilizamos el atributo "rules". Con este atributo podemos especificar las líneas de división entre las celdas.

Los valores posibles son los siguientes:

All : Muestra líneas de división entre todas las filas y columnas.
none : No muestra ninguna línea de división. Este es el valor por defecto.
groups : Esta opción solo mostrara líneas entre grupos de filas y grupos de columnas. Ya veremos después cómo definir grupos.
rows : Sólo mostrará líneas de división entre filas.
cols : Sólo mostrará líneas de división entre columnas.

Es posible que estos atributos no se muestren correctamente en algunos navegadores.

Código de Ejemplo de una tabla con borde 2 y rules = all (solo los bordes horizontales):

<html>

<head>

<title>Tabla - con encabezado</title>

</head>

<body>

rules = all (muestra todas las líneas)

<table border="1" rules=all>

<tr>

<th>Nombre</th>

<th>Telefono</th>

</tr>

<tr>

<td>Riqueza</td>

<td>1 000 000</td>

</tr>

<tr>

<td>Salud</td>

<td>888 555 444</td>

</tr>

<tr>

<td>Abundancia</td>

<td>99 99 99 99</td>

</tr>

</table>

</body>

</html>

Programa 58

La representación del código anterior.

clip_image001

Aquí imágenes de cómo se vería en el navegador para los diferentes valores de "rules":

clip_image002clip_image003clip_image004clip_image005clip_image006

Para obtener estos resultados solo debemos cambiar el valor de "rules" en el código de arriba.

jueves, 9 de junio de 2011

75 - HTML - Tablas - Bordes y líneas II

Ya hemos visto que podemos indicar los bordes a una tabla, pero además podemos también indicar que lados del marco de la tabla queremos que se vea, según nuestros criterios.

Esto se hace con el atributo "frame". Este atributo nos permite indicar que lados del marco de la tabla queremos que sean visibles.

Los posibles valores son los siguientes:

none : Ningún lado. Este es el valor por defecto
above : Sólo el borde superior
below : Sólo el borde inferior
hsides : Sólo los bordes horizontales
vsides : Sólo los bordes verticales
lhs : Sólo el lado izquierdo
rhs : Sólo el lado derecho
box : Los cuatro lados
border : Los cuatro lados

Código de Ejemplo de una tabla con borde 2 y frame = hsides (solo los bordes horizontales):

<html>

<head>

<title>Tabla - con encabezado</title>

</head>

<body>

frame = hsides (solo bordes horizontales)

<table border="1" frame=hsides>

<tr>

<th>Nombre</th>

<th>Telefono</th>

</tr>

<tr>

<td>Maria</td>

<td>588 588 588</td>

</tr>

<tr>

<td>Juan</td>

<td>888 555 444</td>

</tr>

<tr>

<td>Abundancia</td>

<td>99 99 99 99</td>

</tr>

</table>

</body>

</html>

Programa 57

La representación del código anterior.

clip_image001

Aquí imágenes de cómo se vería en el navegador para los diferentes valores de frame:

clip_image002clip_image003 clip_image004clip_image005 clip_image006clip_image007

clip_image008clip_image009 clip_image010

Para obtener estos resultados solo debemos cambiar el valor de frame en el código de ejemplo.

martes, 7 de junio de 2011

74 - HTML - Tablas - Bordes y líneas

Ya nuestras tablas están mas bonitas, pero aún las podemos mejorar.

Con el atributo "border" podemos especificar la anchura en pixeles del marco exterior de la tabla.

El mismo atributo sirve para definir los bordes de los elementos "object" e "img", pero toma diferentes valores.

En caso de no escribirse este atributo, la tabla no tendrá ni líneas de división ni borde exterior.

En el ejemplo diseñaremos una tabla con borde exterior de 7 pixels y los interiores los dejaremos con el valor por defecto.

Código de Ejemplo de una tabla con borde 7 pixels:

<html>
  <head>
    <title>Tabla - con encabezado</title>
  </head>
  <body>
    <table border=7>
      <tr>
         <th>Nombre</th
         <th>Telefono</th>
      </tr>
      <tr>
         <td>Maria</td>
         <td>588 588 588</td>
      </tr>
      <tr>
         <td>Juan</td>
         <td>888 555 444</td>
      </tr>
      <tr>
         <td>Abundancia</td>
         <td>99 99 99 99</td>
      </tr>
   </table>
  </body>
</html>

Representación en el navegador:

Nombre Telefono
Maria 588 588 588
Juan 888 555 444
Abundancia 99 99 99 99

Podéis encontrar más información sobre este tema en: Universidad de Murcia
ABUNDANCIA y RIQUEZA para TODO Y TODOS por EL BIEN DE TODO Y TODOS
Temas anteriores *
http://bobuu.blogspot.com
73.- HTML - Tablas con títulos
72.- HTML - Tablas <table> <tr> <td>
71.- HTML - Listas anidadas
mas ... acceder al índice de temas ...

soolucionesaviso

domingo, 5 de junio de 2011

73 - HTML - Tablas con títulos - <th></th>

Ya hemos visto como crear tablas simples, pero entre otras cosas a las celdas de las tablas las podemos definir como cabeceras, igual que hacemos con determinados párrafos. Para esto solo debemos sustituir <td></td> de la definición de celda por <th></th>, iniciales de "table header".

Las celdas definidas como cabecera mostraran su contenido resaltado y centrado.

Debéis tener en cuenta que es muy importante ser organizado y escribir con indentación, para evitar confundirse y perder el control del contenido de las celdas, y además facilitara en el futuro el mantenimiento de la web.

Código html sin indentar, se hace muy difícil de seguir y entender.

Código de Ejemplo de una tabla con encabezados:

<html>

<head>

<title>Tabla - con encabezado</title>

</head>

<body>

<table border=1>

<tr>

<th>Nombre</th>

<th>Teléfono</th>

</tr>

<tr>

<td>Maria</td>

<td>588 588 588</td>

</tr>

<tr>

<td>Juan</td>

<td>888 555 444</td>

</tr>

<tr>

<td>Abundancia</td>

<td>99 99 99 99</td>

</tr>

</table>

</body>

</html>

Programa 55

Representación en el navegador:

clip_image001

En el ejemplo hemos agregado el atributo "border" para que se muestren los bordes de las celdas.

73 - HTML - Tablas con títulos - <th></th>

Ya hemos visto como crear tablas simples, pero entre otras cosas a las celdas de las tablas las podemos definir como cabeceras, igual que hacemos con determinados párrafos. Para esto solo debemos sustituir <td></td> de la definición de celda por <th></th>, iniciales de "table header".

Las celdas definidas como cabecera mostraran su contenido resaltado y centrado.

Debéis tener en cuenta que es muy importante ser organizado y escribir con indentación, para evitar confundirse y perder el control del contenido de las celdas, y además facilitara en el futuro el mantenimiento de la web.

Código html sin indentar, se hace muy difícil de seguir y entender.

Código de Ejemplo de una tabla con encabezados:

<html>

<head>

<title>Tabla - con encabezado</title>

</head>

<body>

<table border=1>

<tr>

<th>Nombre</th>

<th>Teléfono</th>

</tr>

<tr>

<td>Maria</td>

<td>588 588 588</td>

</tr>

<tr>

<td>Juan</td>

<td>888 555 444</td>

</tr>

<tr>

<td>Abundancia</td>

<td>99 99 99 99</td>

</tr>

</table>

</body>

</html>

Programa 55

Representación en el navegador:

clip_image001

En el ejemplo hemos agregado el atributo "border" para que se muestren los bordes de las celdas.

miércoles, 1 de junio de 2011

72 - HTML - Tablas <table> <tr> <td>

Dejamos atrás las listas y nos adentramos en las tablas. Con lo que vamos a aprender ahora, podremos estructurar nuestra página, gráficamente.

Con las tablas podremos organizar la información, los textos, imágenes, vínculos, etc.

Conseguiremos un diseño agradable y vistoso para nuestros documentos html, podremos crear horarios, calendarios, listados, incluso tomando los datos desde bases de datos.

La estructura de las tablas nos permiten ordenar en filas y columnas cualquier elemento, es más profesional y controlado diseñar con tablas que con los atributos align, width, etc.

Para crear una tabla se utiliza el elemento <table>, que como casi las demás etiquetas que hemos visto requiere un inicio y un fin.

Entre esta etiqueta se utiliza la etiqueta <tr> para describir las filas (table row), y la etiqueta <td> para describir las columnas (table data), ambas requieren etiqueta de inicio y de fin.

Cuando se define una celda en una fila, esa celda en otra fila será igual. También hay que tener en cuenta que si se definen más celdas en una fila que en otra, las celdas "sobrantes" se extienden por el lado derecho dejando una tabla construida incorrectamente.

Código de Ejemplo de una tabla simple:

<html>

<head>

<title>Tablas - formato básico</title>

</head>

<body>

<table border=1>

<tr>

<td>Pepe</td>

<td>622 622 622</td>

</tr>

<tr>

<td>Maria</td>

<td>588 588 588</td>

</tr>

<tr>

<td>Juan</td>

<td>888 555 444</td>

</tr>

<tr>

<td>Abundancia</td>

<td>99 99 99 99</td>

</tr>

</table>

</body>

</html>

Programa 54

Representación en el navegador:

clip_image001

En el ejemplo hemos agregado el atributo "border" para que se muestren los bordes de las celdas.