LICEO RODRIGO ARENAS BETANCOURT - CENAIDA ALARCON

HTMLTABLASPara insertar una tabla en una página de internet debes incluir el código. Este puede ser modificado para obtener diferentes resultados y estilos de tablas.<table border=1><td>Aqui va el contenido de la tabla, texto, imágenes, etc.</td></table>

LICEO RODRIGO ARENAS BETANCOURT - CENAIDA ALARCON

La etiqueta de inicio <table> y la etiqueta de cierre </table> inician y finalizan la tabla. Lógico.<tr> es la abreviatura de "table row" (es decir, fila de la tabla) e inicia y finaliza las filas horizontales. Lógico también.<td> es la abreviatura de "table data" (es decir, datos de la tabla). Esta etiqueta inicia y finaliza cada una de las celdas que componen las filas de la tabla. Todo sencillo y lógico.

<table> <tr> <td>Celda 1</td> <td>Celda 2</td> <tr> <td>Celda 3</td> <td>Celda 4</td></table>

LICEO RODRIGO ARENAS BETANCOURT - CENAIDA ALARCON

<table bgcolor="blue" border="4" bordercolor="yellow" cellpadding="2" cellspacing="2" align="center"> <tr> <td>Celda 1</td> <td>Celda 2</td> <tr> <td>Celda 3</td> <td>Celda 4</td></table>

bgcolor="blue": podemos reemplazar "blue" por otro color pero atencion los colores se reemplazan con los nombres pero en ingles.

border="4":con esto podemos definir el grosor del borde reemplazandolo siempre con un numero.

bordercolor="yellow":aca podremos modificar el color del borde segun el nombre en ingles del color que quieras.

cellpadding="2":indica el espacio entre el borde de la celda y el contenido de la celda.

cellspacing="2":indica el espacio entre cada celda.

align="center":indica la alineacion de la tabla si es,center o right o left.

LICEO RODRIGO ARENAS BETANCOURT - CENAIDA ALARCON

COLUMNAS

El número uno se refiere al tamaño del borde de la tabla. Si aumentas el número el borde será mas grueso y si escribes 0 la tabla no mostrará borde alguno <table border=1><td>Columna #1</td><td>Columna #2</td></table>

LICEO RODRIGO ARENAS BETANCOURT - CENAIDA ALARCON

IMÁGENES EN HTMLLa marca <IMG> no necesita cierre y su sintaxis correcta es:

<IMG SRC="immagine.gif">

donce SRC corresponde al inglés Search y es el recorrido del que el navegador saca la imagen (en este caso "immagine.gif"). Esta marca es única en el sentido de que NO lleva como cierre el correspondiente </IMG>.

LICEO RODRIGO ARENAS BETANCOURT - CENAIDA ALARCON

WIDTH y HEIGHTEs posible definir la anchura y la altura de la imagen gracias a los atributos width y height, respectivamente:

<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT=“OSOS ">

donde WIDTH=178 es la dimensión horizontal (ancho) de la imagen expresada en píxel, y HEIGHT=180 la dimensión vertical (alto).

Mediante estos atributos podemos definir dimensiones diferentes de las que realmente tiene la imagen. En cualquier caso, es aconsejable insertar imágenes con su tamaño efectivo sobre todo si están en formato GIF, dado que, cuando se cambian las medidas, este formato pierde mucha calidad.

LICEO RODRIGO ARENAS BETANCOURT - CENAIDA ALARCON

HSPACE y VSPACE

Con estos dos atributos podemos establecer la distancia en píxel de la imagen a los objetos que se encuentran a los cuatro lados de la misma.

HSPACE define la distancia de los lados derecho e izquierdo de la imagen a los objetos más cercanos (texto, imágenes, apliques, etc.).

VSPACE define la distancia de los lados superior e inferior de la imagen a los objetos más cercanos (texto, imágenes, apliques, etc.). La sintaxis correcta es

<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 VSPACE=3 HSPACE=3 ALT="Obra de K. Haring">

Estos atributos resultan útiles cuando queremos distanciar la imagen de los objetos más cercanos.