Vous êtes sur la page 1sur 13

TABLAS HTML

Estructura de una tabla: Las tablas estn formadas por celdas agrupadas en filas y columnas

nmero de columnas, definidas por medio de la etiqueta <td>...</td> 4. Cada celda de datos puede

contener lo que quieras insertar : texto, Imgenes, listas, e incluso otras tablas. 5. La estructura de una tabla, se puede ver fcilmente en el siguiente :

Una fila esta compuesta por uno o ms espacios (celdas) alineados horizontalmente. Una columna esta compuesta por uno o ms espacios alineados verticalmente.

Una celda es el espacio formado por la interseccin de una fila y una columna El nmero de celdas esta componen la tabla esta definido por el diseador de la pgina. Columna 1 Columna 2 Columna 3 Fila 1 Celda (1,1) Celda (2,1) Celda (2,1) Fila 2 Celda (2,1) Celda (2,2) Celda (2,1) Fila 3 Celda (3,1) Celda (3,1) Celda (2,1) Para conseguir que las tablas funcionen perfectamente necesitamos conocer muy bien todos los atributos de las tablas. Adems de algunos truquillos que se han hecho famosos a lo largo del tiempo Veamos cmo se define una tabla: 1. Las tablas se crean con la tabla

esquema

<table> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> </table>

6. Que llevado al HTML es: <table> <tr> <td> celda (1,1)</td> <td> celda (1,2)</td> <td> celda (1,3)</td> </tr> <tr> <td> celda (2,1)</td> <td> celda (2,2)</td> <td> celda (2,3)</td> la </tr> <tr> <td> celda (3,1)</td>

etiqueta <table>...</table> la

est contenida entre esta etiqueta 2. Las filas se definen con

etiqueta <tr>...</tr> table row, (row = fila en ingls) 3. Cada etiqueta <tr> contiene celdas

<td> celda (3,2)</td> <td> celda (3,3)</td> </tr>

que inicialmente coincidirn con el

</table> Se ver como: celda (1,1) celda (2,1) celda (3,1) celda (1,2) celda (2,2) celda (3,2) celda (1,3) celda (2,3) celda (3,3)

Background="nombre_imagen.extension_ del formato" Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen. bgcolor="#ffaabb" indica el color de fondo de la tabla o celda. bordercolor="#ffffff",define borde. cellpadding="n",define el espacio, en el color del

ATRIBUTOS DE LAS TABLAS El conocimiento de los atributos de una tabla puede considerarse como esencial para la correcta utilizacin de las tablas:

pixels, entre los bordes de la celda y el contenido de la misma. Por defecto, y si no se especifica, tiene un el valor de 1. ,en

cellspacing="x", define

espacio

pixels, entre el borde cada una de las celdas y el borde de la tabla. De no especificarse, tiene un valor por defecto de 2.:

border="n" Crea un borde alrededor de la tabla de grosor especificado por el valor "n", tomando como unidad el pxel. Teniendo cero como valor por defecto. Cuando

Los atributos que modifican a una celda tienen prioridad respecto a los que modifican a una tabla. Por ejemplo

comenzamos la realizacin de una tabla es aconsejable usarlo para ir comprobando que todo funciona como hemos pensado. }

podemos aplicar un color azul a una tabla y amarillo para una celda.

Width="n" el valor "n" indica la anchura de la tabla en pixels (200) o porcentaje (20%). Tambin se puede utilizar este atributo con las celdas <td>

Ejemplo (1): <table border="1"> <tr> <td Perez</td> <td> Zaragoza </td> </tr> </table> se visualizar: > Antonio

height ="n" el valor "n", asigna la altura de la tabla en pixels o porcentaje. Align="right / left / center" Alinea

horizontalmente la tabla con respecto a su entorno.

Antonio Perez Zaragoza

</tr> </table>

Ejemplo (2):

se visualizar: Antonio Perez Zaragoza Texto

<table border="10"> <tr> <td > Antonio Perez</td> <td> Zaragoza </td> </tr> </table> se visualizar: Antonio Perez Zaragoza Ejemplo (3): <table border="1" width="100%"> <tr> <td > Antonio Perez</td> <td> Zaragoza </td> </tr> </table> se visualizar: Antonio Perez Ejemplo (4): <table border="1" width="200" Zaragoza

Texto

ATRIBUTOS DE CELDAS

Estos atributos modifican el formato de las filas y/o celdas dependiendo si estn en un <tr bgcolor="red"> afectara a toda la fila o se encuentra en <td bgcolor="yellow"> donde solamente afectara a la celda.

Estos atributos son: bgcolor ="nombre del color / nmero hexadecimal". Define el color de la celda o fila. bordercolor="nombre del color / nmero hexadecimal". Define el color del borde de la celda. align="top / middle / bottom". Elegimos el lugar en cual el texto es colocado. Top (arriba),middle(centro) y bottom(abajo) valign="left / center / right". Alineacin del texto izquierda (left), centro(center), o

bgcolor="red"> <tr> <td bgcolor=yellow> Antonio Perez</td> <td> Zaragoza </td> </tr> <tr> <td> Texto </td> <td> Texto </td>

derecha (right) Los siguientes atributos slo pueden ser aplicados a una celda y no al conjunto de celdas que forman una fila.

colspan="n".

Expande

el

una

celda

</tr> <tr> <td> Atributos </td>

horizontalmente tantas celdas como el valor asignado a n rowspan="n". Expande una celda

<td> Celdas </td>< td> las tablas </td> </tr> </table>

verticalmente tanta celdas como el valor asignado a n width="n". El valor n indica la anchura de la tabla en pixels (200) o porcentaje (20%). Este atributo tambin se puede aplicar a la celdas <td>. height ="n". El valor n, define la altura de la celda en pixels o porcentaje.

se visualizar: Diseo de pginas Atributos Celdas las tablas

Ejemplos aplicando lo anterior:

Ejemplo (3): <table border="1">

Ejemplo (1) : <table border="1"> <tr> <td bgcolor="lime" width="250">Diseo de pginas</td> <td> las tablas </td> </tr> </table>

<tr> <td> Diseo de pginas</td> </tr> <tr> <td rowspan="2"> Atributos </td> <td> Celdas </td> <td> las tablas </td> </tr> <tr>

se visualizar:

<td> A </td><td> B </td> </tr> </table>

Diseo de pginas

las tablas Se visualizar:

Ejemplo (2): <table border="1"> <tr> <td colspan="3" > Diseo de pginas</td> Diseo pginas de

Celdas las tablas Atributos A B

Si realizamos la anidacin de tablas tendremos que ser sumamente

cuidadosos, ya que esto es un proceso complicado y enrevesado. Cabeceras Las etiquetas <th>...</th> definen las cabeceras de la tabla (table header). Esta etiqueta produce el efecto de visualizar el texto centrado y en negrita: Ejemplo (1): <table cellspacing="10" cellpadding="10" eamos los siguientes ejemplos:

border="4"> <tr>

<table> <tr> <th> Cabecera 1 </th> <th> Cabecera 2 </th> <th> Cabecera 3 </th> </tr> <tr> <td> A </td> <td> B </td> <td> C </td> </tr> </table>

<td align="center">Celda tabla principal (padre)</td> <td align="center"> <table cellspacing="2" cellpadding="2" border="6"> <tr> <td>Tabla anidada, Celda (1,1) </td> <td>Tabla anidada, Celda (1,2) </td> </tr> <tr> <td> Tabla anidada, Celda (2,1) <td> <td> Tabla anidada, Celda (2,2) <td> </tr>

se mostrar: Cabecera Cabecera Cabecera 1 a d Para poder 2 b e anidar 3 c f tablas simplemente

</table> </td> </tr> </table>

se muestrar:

tenemos introducir la estructura de una tabla completa dentro de una celda.

Tabla anidada Celda tabla principal (padre) Tabla anidada, Celda (2,1) Celda (1,1)

Tabla anidada Celda (1,2)

se muestrar:

Tabla Tabla anidada, Celda (2,2) Tabla principal Anidada Tabla Anidada Tabla

Tabla Anidada Tabla Anidada

Ejemplo (2) <table cellspacing="2" border="4"

principal

Tabla principal

bgcolor="red"> <tr> <td align="center"> Tabla principal </td> <td align="center"> <table border="2"> <tr> <td>Tabla anidada </td> <td>Tabla anidada </td> </tr> <tr> <td> Tabla anidada <td> <td> Tabla anidada <td> </tr> </table> </td> <tr> <td align="center"> Tabla principal </td> </tr> </tr> </table>

ENLACES EN HTML

Visualizacin: ir al la pgina de inicio del manual

Son sin duda alguna la caracterstica que ms ha contribuido, junto con la implementacin de las imgenes al espectacular desarrollo de la Web (links).

En prcticamente todas las pginas web, los enlaces son fcilmente reconocibles a simple vista, puesto que suelen ir diferente color al texto, subrayados y cuando pasamos el ratn por encima el cursor cambia de forma que suele ser una mano con un dedo se&ntoilde;alador.

Siendo uno de los elementos ms importantes del HTML, puesto que permiten "navegar" (desplazarse y/o moverse entre los diversos documentos que componen un sitio o incluso entre diferentes sitios web) a esto se le llama hipertexto.

Los enlaces se generan mediante la etiqueta <a>...</a> (a de anchor, ancla en ingls). Irn acompaados siempre por un atributo ya sea: <a href="..."> o <a name="...">

La sintaxis general de un enlace es por tanto de la forma: <a href="destino"> Referencia</a> <a name="destino"> Referencia</a>

Los enlaces son tan importantes que dan nombre al propio lenguaje HTML, Lenguaje de Marcas de HiperTexto. Un enlace es una referencia a otro documento HTML o a cualquier otro objeto, expresada por un formato universalmente aceptado denominado URL (Universal Resource Locator). Ejemplo (1): <a Href="http://wwww.pcweb.es/index. html"> ir al la pgina de inicio del manual </a>

Pudiendo la referencia un texto o una imagen. El destino podr ser un pgina web, una direccin de correo electrnico o incluso un archivo. Ejemplo (2): <a href="http://www.elmundo.es"> el mundo</a> <a href="index.html"> Inicial del manual</a> <a href="enlaces"> interno</a> Visualizacin: Pgina enlace

el mundo Pgina Inicial del manual enlace interno

que

sea

ya

que

no

se

ver.

En funcin del destino podemos clasificar los enlaces :

Enlaces internos: permiten desplazarse dentro de la misma pgina. Enlaces locales: permiten desplazarse a otras pginas del mismo sitio web. Enlaces remotos: los dirigidos hacia pginas de otros sitios web. Enlaces a direcciones de correo: para crear un mensaje de correo dirigido a una direccin de correo especifica. Enlaces a archivos: permiten a los usuarios puedan hacer descargar de ficheros.

Veamos un ejemplo para desplazarnos al inicio de est pagina: (1) En el lugar al cual queremos ir, pondremos: <a name="inicio_pagina"> </a> (2) Escribiremos en el lugar desde el que queremos saltar: <a href="#inicio_pagina">Ir al inicio de la pgina </a> Al pulsar sobre este enlace nos llevar al principio de este punto: ir al principio de la pgina ya que fue all donde colocamos el marcador <a name:inicio_pagina> </a> Enlaces Locales: A otra pgina que pertence al Sitio Web En este caso la direccin de la pgina URL se pondr de forma relativa. Por ejemplo si tenemos tres pginas en el mismo directorio: pagina1.html, pagina2.html y pagina3.html y queremos desplazarnos de la pagina1.html a la pagina3.html escribiremos en la pagina1.html: <a href="pagina3.html">Ir a la pgina 3 </a> Con esto es suficiente, no hay que crear ningn marcador a no ser que quieras ir a un sitio concreto de la pagina3.htm. En ese caso tendras que poner en el sitio adonde quieres llegar de la pagina3.htm Enlace remotos: A una direccin de Internet Deberemos escribir la direccin (URL) debe darse forma absoluta, es decir como se ve en el navegador, en la barra de direcciones. Vease el siguiente ejemplo:

Enlaces internos: A otro lugar del mismo documento Este tipo de enlaces estn compuestos de 2 partes:

1. En el lugar a donde queremos desplazarnos, ponemos la siguiente etiqueta: <a name="enlaces _internos"> </a> 2. En punto el punto desde donde queremos ir, insertamos la siguiente etiqueta: <a href="#enlaces_internos"> ir al principio del punto </a> En este caso la direccin (URL) es sustituida por un marcador en la misma pgina. El marcador puede ser texto colocado en el lugar al que queremos saltar. No importa lo

<a href="http://www.elmundo.es"> Ir al el peridico el mundo

</a> Este enlace no llevar a la pgina principal de el peridico "el mundo". Ir al el peridico el mundo

Enlace a una direccin de correo Para realizar un enlace dirigido hacia una direccin de correo electrnico deberemos usar la instruccin mailto: en el atributo href del enlace, seguido de la direccin de correo a la que se debe dirigir el enlace. <a href="mailto: jorge_ferrer @gmail.com"> jorge_ferrer@ gmail.com </a> jorge_ferrer@gmail.es

_top: muestra el documento enlazado ocupando toda la ventana del navegador. Sale de los frames. _blank: abre un ventana nueva en el navegador(sin frames), en la cual carga el fichero. _self : carga el documento en le marco desde donde pulsamos el enlace. Es la opcin por defecto. _parent: carga el documento en el frame anterior al que contine el enlace "padre". En caso de no haber lo muestra en una ventana completa.

Ejemplo:

Pulsando sobre el enlace se abrir el programa de correo que tengas configurado, con esta direccin de correo como destinatario. Enlace para descargar un fichero Tendremos que poner la direccin (URL) la ruta donde est el fichero. Por ejemplo, para descargar un fichero de nombre manual_html.zip se deber escribir el siguiente cdigo: <a href="../manuales/manual_html.zip "> manual_html.zip </a> que se ver lo siguiente manual_html.zip. Al pinchar sobre este enlace se abrir una ventana avisndote de una descarga de archivos y preguntndote qu deseas hacer. El atributo: target El atributo target="nombre del marco de destino, _top / _blank/ _self / _parent".

<a href="http://www.innovanetworks.e s" target="_top"> ir a Innova Networks </a>

TAREA1.- Realizar la siguiente tabla en HTML

CARACTERES ESPECIALES
Entidad &lt; &gt; &amp; &quot; &nbsp; &apos; Carcter < > & " (espacio en blanco) ' &oacute; &uacute; &Aacute; &Eacute; &Iacute; &Oacute; &Uacute; &euro; &eacute; &ntilde; &Ntilde; &aacute;

&iacute;

UNIDADES DE MEDIDAS EN HTML

Cmo manejar los tamaos de los elementos o medidas en HTML Estas unidades de medida estn divididas en 2 grupos: las absolutas, y las relativas.

Las Unidades Relativas A continuacin un listado de las unidades relativas y su objeto de referencia.

em, es relativa al tamao de letra empleado. Aproximadamente el valor 1 em se aproxima al ancho de la letra M mayscula, del tipo de letra que se est usando.

px, es relativa respecto a la pantalla del usuario

Ejemplos
1.body { 2.font-size: 0.9em; 3.}

Las Unidades Absolutas En las unidades absolutas, se definen los valores de forma completa y concreta, ya que los valores no se calculan en base a otra valor de referencia. Aqu la lista de unidades absolutas:

in, pulgadas (inches), 1 pulgada = 2.54 centmetros cm, centmetros mm, milmetros pt, puntos (1 punto equivale a 1/72 de pulgada, o sea, 0.35 mm) pc, picas (1 pica = 12 puntos, o sea, unos 4.23 mm)

1.body { 2.font-size: 10px; 3.} 4.h1{ 5.font-size: 2em; 6.{

Porcentajes Otra variante relativa para definir medidas, son los porcentajes. Estos serian similares a la unidad em ya que un valor del 90%, equivale a un 0.9em.
01.body { 02.font-size: 1em; 03.} 04.h1 { 05.font-size: 200%; 06.} 07.h2 { 08.font-size: 150%; 09.