SlideShare una empresa de Scribd logo
HTML
TABLAS
Para 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 HTML
La 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 HEIGHT
Es 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.
LICEO RODRIGO ARENAS BETANCOURT CENAIDA ALARCON

Más contenido relacionado

DOCX
Colegio nacional nicolas esguerra
PPTX
Codigo de tab
PPTX
Html manual
PPTX
Manual basico de html
DOCX
DOCX
Trabajo tablas
DOCX
Colegio nacional nicolas esguerra
Codigo de tab
Html manual
Manual basico de html
Trabajo tablas

La actualidad más candente (18)

DOCX
Colegionacionalnicolsesguerra 150917155628-lva1-app6892-150924155136-lva1-app...
DOCX
Colegio nacional nicoles esguerra
DOCX
ODP
Presentacion
PPT
Aplicacione para el trabajo del Community Manager
DOCX
Colegio nacional nicolas esguerra
DOCX
Pagina WEB (V)
DOCX
Pagina web v
DOCX
DOCX
Colegio nacional nicolas esguerra
DOCX
Colegio nacional nicolás esguerra
PPTX
Inf2 exc15 p1a_adilene
PDF
Trabajo 5
DOCX
Trabajo 6
PPTX
Etiquetas html
DOCX
Colegio nacional nicolas esguerra
PPTX
Etiquetas que dan formato
DOCX
Olivarko
Colegionacionalnicolsesguerra 150917155628-lva1-app6892-150924155136-lva1-app...
Colegio nacional nicoles esguerra
Presentacion
Aplicacione para el trabajo del Community Manager
Colegio nacional nicolas esguerra
Pagina WEB (V)
Pagina web v
Colegio nacional nicolas esguerra
Colegio nacional nicolás esguerra
Inf2 exc15 p1a_adilene
Trabajo 5
Trabajo 6
Etiquetas html
Colegio nacional nicolas esguerra
Etiquetas que dan formato
Olivarko
Publicidad

Destacado (9)

PPT
Etiquetas Html
PPTX
Tablas en Html
PDF
Insertar imagen en html
PPTX
Imágenes html
PPTX
Introduccion a HTML - XHTML. Clase 02
PPTX
Etiquetas html
PPTX
Etiquetas HTML
DOCX
Etiquetas html
PPTX
Tablas de HTML
Etiquetas Html
Tablas en Html
Insertar imagen en html
Imágenes html
Introduccion a HTML - XHTML. Clase 02
Etiquetas html
Etiquetas HTML
Etiquetas html
Tablas de HTML
Publicidad

Similar a Html tablas e imagenes (20)

PPTX
Inf2 exc15 p1_a_unidad 3_html_fridaleyva
PPTX
Inf2 exc15 p1_a_unidad 3_html_fridaleyva
PPTX
Inf2 p1b exc15_celin_valenzuela
PDF
Factores de HTML_Andrea Sofia
PPTX
Unidad #3
PPTX
Unidad #3
PPTX
Act 03 - Tablas en html para pregrado.pptx
PDF
Act 03 - Tablas HTML Y CSS PARA PREGRADO.pdf
PPTX
Clases tablas html
PPTX
Clases tablas html
PPTX
Clases tablas html
PPTX
Clases tablas html
PPTX
tablas
PPTX
Clases tablas html
PPTX
Clases tablas html
DOCX
HTML
PPT
Diapositivashtml 091118065750 Phpapp02
PPTX
HTML_Tablas en lenguaje HTML y CSS3 dinamicos
PPTX
HTML_Tablas para la creacion de tablas.pptx
PPTX
Inf2 exc15 p1_a_unidad 3_html_fridaleyva
Inf2 exc15 p1_a_unidad 3_html_fridaleyva
Inf2 p1b exc15_celin_valenzuela
Factores de HTML_Andrea Sofia
Unidad #3
Unidad #3
Act 03 - Tablas en html para pregrado.pptx
Act 03 - Tablas HTML Y CSS PARA PREGRADO.pdf
Clases tablas html
Clases tablas html
Clases tablas html
Clases tablas html
tablas
Clases tablas html
Clases tablas html
HTML
Diapositivashtml 091118065750 Phpapp02
HTML_Tablas en lenguaje HTML y CSS3 dinamicos
HTML_Tablas para la creacion de tablas.pptx

Último (20)

PDF
Híper Mega Repaso Histológico Bloque 3.pdf
PDF
Didactica de la Investigacion Educativa SUE Ccesa007.pdf
PDF
Salvese Quien Pueda - Andres Oppenheimer Ccesa007.pdf
DOCX
PROYECTO DE APRENDIZAJE para la semana de fiestas patrias
PPTX
caso clínico iam clinica y semiología l3.pptx
PDF
CIRSOC-201-2024_Proyecto de Reglamento Argentino de Estructuras de Hormigón
PDF
MATERIAL DIDÁCTICO 2023 SELECCIÓN 1_REFORZAMIENTO 1° BIMESTRE.pdf
DOCX
UNIDAD DE APRENDIZAJE 5 AGOSTO tradiciones
PPTX
AGENTES PATÓGENOS Y LAS PRINCIPAL ENFERMEAD.pptx
PDF
Unidad de Aprendizaje 5 de Matematica 1ro Secundaria Ccesa007.pdf
PDF
Metodologías Activas con herramientas IAG
PPTX
Presentación de la Cetoacidosis diabetica.pptx
PDF
CONFERENCIA-Deep Research en el aula universitaria-UPeU-EduTech360.pdf
PDF
La Evaluacion Formativa en Nuevos Escenarios de Aprendizaje UGEL03 Ccesa007.pdf
PDF
1. Intrdoduccion y criterios de seleccion de Farm 2024.pdf
PDF
Gasista de unidades unifuncionales - pagina 23 en adelante.pdf
PDF
Crear o Morir - Andres Oppenheimer Ccesa007.pdf
PDF
Fundamentos_Educacion_a_Distancia_ABC.pdf
PDF
ciencias-1.pdf libro cuarto basico niños
PDF
DI, TEA, TDAH.pdf guía se secuencias didacticas
Híper Mega Repaso Histológico Bloque 3.pdf
Didactica de la Investigacion Educativa SUE Ccesa007.pdf
Salvese Quien Pueda - Andres Oppenheimer Ccesa007.pdf
PROYECTO DE APRENDIZAJE para la semana de fiestas patrias
caso clínico iam clinica y semiología l3.pptx
CIRSOC-201-2024_Proyecto de Reglamento Argentino de Estructuras de Hormigón
MATERIAL DIDÁCTICO 2023 SELECCIÓN 1_REFORZAMIENTO 1° BIMESTRE.pdf
UNIDAD DE APRENDIZAJE 5 AGOSTO tradiciones
AGENTES PATÓGENOS Y LAS PRINCIPAL ENFERMEAD.pptx
Unidad de Aprendizaje 5 de Matematica 1ro Secundaria Ccesa007.pdf
Metodologías Activas con herramientas IAG
Presentación de la Cetoacidosis diabetica.pptx
CONFERENCIA-Deep Research en el aula universitaria-UPeU-EduTech360.pdf
La Evaluacion Formativa en Nuevos Escenarios de Aprendizaje UGEL03 Ccesa007.pdf
1. Intrdoduccion y criterios de seleccion de Farm 2024.pdf
Gasista de unidades unifuncionales - pagina 23 en adelante.pdf
Crear o Morir - Andres Oppenheimer Ccesa007.pdf
Fundamentos_Educacion_a_Distancia_ABC.pdf
ciencias-1.pdf libro cuarto basico niños
DI, TEA, TDAH.pdf guía se secuencias didacticas

Html tablas e imagenes

  • 1. HTML TABLAS Para 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
  • 2. 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
  • 3. <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
  • 4. 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
  • 5. IMÁGENES EN HTML La 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
  • 6. WIDTH y HEIGHT Es 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
  • 7. 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. LICEO RODRIGO ARENAS BETANCOURT CENAIDA ALARCON