SlideShare una empresa de Scribd logo
1 de 7
Descargar para leer sin conexión
COLEGIO NACIONAL NICOLAS ESGURRA
EDIFICAMOS FUTURO
JUAN DAVID ESTRADA MORALES
JUAN FELIPE ESTRADA SAAVEDRA 904
PAGINA WEB V
TABLAS
Tabla <table>
Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de la
intersección entre una fila y una columna.
Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habrá
que especificar las filas y columnas que formarán la tabla.
Fila <tr>
Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas
deberán insertarse entre las etiqetas <table> y </table>.
Por ejemplo, para crear una tabla con cinco filas escribiríamos:
<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
Columna o celda <td>
Para crear una tabla no basta con especificar el número de filas, es necesario también especificar
el número de columnas.
Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos
especificar el número de celdas por fila, que equivale a especificar el número de columnas por fila.
Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada
una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las etiquetas <tr> y
</tr>.
Entre las etiquetas <td> y </td> se podrá especificar el contenido de cada una de las celdas. Por
ejemplo, para insertar la siguiente tabla:
Habría que escribir:
<table border="1">
<tr>
<td>Sabado</td>
<td>Domingo</td>
</tr>
<tr>
<td>Curso HTML</td>
<td>Curso Dreamweaver</td>
</tr>
<tr>
<td>Curso Frontpage</td>
<td>Curso Flash</td>
</tr>
</table>
Formato de la tabla
Es posible modificar los siguientes atributos de una tabla:
Por ejemplo, para modificar la tabla de la página anterior para que quedase como la siguiente:
Habría que escribir:
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000"
bgcolor="#FFCC99">
...
</table>
Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de la ventana
(lo puedes comprobar cambiando el ancho de la ventana de tu navegador y verás que el ancho de
la tabla varía para ocupar siempre la mitad de la ventana), que el borde (border) tiene un grosor
de dos píxeles (es más ancho que las separaciones internas de la tabla que tienen grosor 1), que la
tabla está alineada al centro (center) de la ventana, que no hay espacio entre las celdas
(cellspacing="0"), que el borde la tabla es negro (#000000) y el fondo naranja (#FFCC99).
Formato de las celdas
Es posible modificar los siguientes atributos de una celda:
También es posible modificar estos atributos de toda una fila, especificándolos en la etiqueta <tr>,
en lugar de en la etiqueta <td>.
Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos para una
celda que cuando son establecidos para una fila completa. Al mismo tiempo, tienen más prioridad
los atributos establecidos para una fila que los establecidos para toda la tabla.
Por ejemplo, si escribiéramos el siguiente código:
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000"
bgcolor="#FFCC99">
<tr align="center" bgcolor="#0099CC">
<td>Sabado</td>
<td bgcolor="#66CC99">Domingo</td>
</tr>
<tr>
<td>Curso HTML</td>
<td>Curso Dreamweaver</td>
</tr>
<tr>
<td>Curso Frontpage</td>
<td>Curso Flash</td>
</tr>
</table>
Obtendríamos la siguiente tabla:
Se ha establecido el color naranja como fondo de toda la tabla, pero con la línea de código <tr
align="center" bgcolor="#0099CC"> se ha establecido el color azul como color de fondo de la
primera fila, por lo que dicha fila se mostrará de color azul, y no de color naranja. Al mismo
tiempo, se ha cambiado el color de la segunda celda de la primera fila por el color verde, a través
de la línea <td bgcolor="#66CC99">Domingo</td> por lo que esta fila en vez de ser azul será
verde, los atributos de celda tienen prioridad sobre los de la fila.
Existe otro atributo que puede establecerse sobre las celdas. Se trata del atributo nowrap, que
hace que el contenido de la celda no se ajuste de manera automática al ancho de la columna sino
que el ancho de la celda se adapta al ancho del contenido para que el contenido ocupe una sólo
fila. Este atributo no toma ningún valor, simplemente se añade o no a las etiqueta <td>.
CODIGO:
<html>
<head>
<title>ISLAND DONUTS 904</title>
</head>
<!-- pagina web elaborada por juan david y juan felipe estrada
904 //-->
<body bgcolor="orange">
<hr>
<marquee><b><i>BIENVENIDO A NUESTRA PAGINA WEB
coperativa</b></i></marquee><br>.
<img src="imagenes/1.jpg"border="6"" width="600" height="300">
<img src="imagenes/2.gif" alt="donas"border="6"" width="600"
height="300">
<table width="50%" border="2" align="center" cellspacing="0"
bordercolor="#000000" bgcolor="#green">
<tr align="center" bgcolor="#0099CC">
<td>productos</td>
<td bgcolor="#0099CC">valor</td>
</tr>
<tr>
<td>donas</td>
<td>6000</td>
</tr>
<tr>
<td>cafe o capuchino</td>
<td>8000</td>
</tr>
</table>
<hr>
<h3>nuestra empresa brinda los mejores servicios y
calidad</h3><br>
<font color="003399" size="10" face="arial"><b>Bienvenidos a
<b></font>
<font color="red" size="9" face="arial"><b>island
donuts<b></font><br>
<p align="center">island donuts es una empresa que fabrica la
mejores donas del mundos siendo reconocida por diferentes paises
en America,Europa y Asia</p>
<hr align="center" widtch="50%" size="5" color="green" noshade>
<pre> copyrigth 2015
colegio nacional nicolas
esguerra
cll 189 #64a-32
Bogots,Colombia
islanddonutsclientes@gtmail.com</pre>.
</body>
</html>

Más contenido relacionado

La actualidad más candente

La actualidad más candente (16)

Indes.html
Indes.htmlIndes.html
Indes.html
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Trabajo 6
Trabajo 6Trabajo 6
Trabajo 6
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
tablas
tablastablas
tablas
 
DBER N° 2 blog blogger blogspot
DBER N° 2 blog blogger blogspotDBER N° 2 blog blogger blogspot
DBER N° 2 blog blogger blogspot
 
HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.
HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.
HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.
 
Pagina web v
Pagina web vPagina web v
Pagina web v
 
Vinculos tablas y frames
Vinculos tablas y framesVinculos tablas y frames
Vinculos tablas y frames
 
Tablas
TablasTablas
Tablas
 
Inf2 exc15 p1_a_unidad 3_html_fridaleyva
Inf2 exc15 p1_a_unidad 3_html_fridaleyvaInf2 exc15 p1_a_unidad 3_html_fridaleyva
Inf2 exc15 p1_a_unidad 3_html_fridaleyva
 
Portada
PortadaPortada
Portada
 
Carpeta y blog
Carpeta y blogCarpeta y blog
Carpeta y blog
 
Taller5
Taller5Taller5
Taller5
 
Wilson8
Wilson8Wilson8
Wilson8
 
Tagshtml
TagshtmlTagshtml
Tagshtml
 

Destacado

El computador
El computadorEl computador
El computadorHola XD
 
Victima miss en venezuela
Victima miss en venezuelaVictima miss en venezuela
Victima miss en venezuelaarnold23
 
Educación basada en la Web
 Educación basada en la Web Educación basada en la Web
Educación basada en la WebjavierDiazOsuna
 
Problemas y tenciones que enfreta el docente
Problemas y tenciones que enfreta el docenteProblemas y tenciones que enfreta el docente
Problemas y tenciones que enfreta el docenteLouis2508
 
Nicolás esguerra 2
Nicolás esguerra 2Nicolás esguerra 2
Nicolás esguerra 2dierco
 
Erito2
Erito2Erito2
Erito2198112
 
La Publicidad
La PublicidadLa Publicidad
La Publicidadarnold23
 
Maquinas empresarial
Maquinas empresarialMaquinas empresarial
Maquinas empresarialThetorvic13
 
La penicilina
La penicilinaLa penicilina
La penicilinasanpelayo
 
Zapping mental 2 problemas en el paraiso Ana Bell Chino
Zapping mental 2 problemas en el paraiso Ana Bell ChinoZapping mental 2 problemas en el paraiso Ana Bell Chino
Zapping mental 2 problemas en el paraiso Ana Bell Chinozappingmental
 
Simbolos patrios del perú
Simbolos patrios del perúSimbolos patrios del perú
Simbolos patrios del perúcrsithoperlee
 
Word 2010
Word 2010Word 2010
Word 2010Diana R
 

Destacado (20)

El computador
El computadorEl computador
El computador
 
Victima miss en venezuela
Victima miss en venezuelaVictima miss en venezuela
Victima miss en venezuela
 
Anatomia humana
Anatomia humanaAnatomia humana
Anatomia humana
 
Educación basada en la Web
 Educación basada en la Web Educación basada en la Web
Educación basada en la Web
 
Futbol
FutbolFutbol
Futbol
 
Problemas y tenciones que enfreta el docente
Problemas y tenciones que enfreta el docenteProblemas y tenciones que enfreta el docente
Problemas y tenciones que enfreta el docente
 
Nicolás esguerra 2
Nicolás esguerra 2Nicolás esguerra 2
Nicolás esguerra 2
 
Erito2
Erito2Erito2
Erito2
 
Ríos de España
Ríos de EspañaRíos de España
Ríos de España
 
Antecedentes de la psicologia
Antecedentes de la psicologiaAntecedentes de la psicologia
Antecedentes de la psicologia
 
La Publicidad
La PublicidadLa Publicidad
La Publicidad
 
Maquinas empresarial
Maquinas empresarialMaquinas empresarial
Maquinas empresarial
 
Seguridad informatica
Seguridad informaticaSeguridad informatica
Seguridad informatica
 
La penicilina
La penicilinaLa penicilina
La penicilina
 
La Tecnologia
La TecnologiaLa Tecnologia
La Tecnologia
 
Trabajo Robot educador 3
Trabajo Robot educador 3Trabajo Robot educador 3
Trabajo Robot educador 3
 
Zapping mental 2 problemas en el paraiso Ana Bell Chino
Zapping mental 2 problemas en el paraiso Ana Bell ChinoZapping mental 2 problemas en el paraiso Ana Bell Chino
Zapping mental 2 problemas en el paraiso Ana Bell Chino
 
Simbolos patrios del perú
Simbolos patrios del perúSimbolos patrios del perú
Simbolos patrios del perú
 
Word 2010
Word 2010Word 2010
Word 2010
 
TAREA
TAREATAREA
TAREA
 

Similar a Trabajo 5 (20)

Web3
Web3Web3
Web3
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Tablas
TablasTablas
Tablas
 
Html 5
Html 5Html 5
Html 5
 
TABLAS HTML
TABLAS HTMLTABLAS HTML
TABLAS HTML
 
Clases tablas html
Clases tablas htmlClases tablas html
Clases tablas html
 
Clases tablas html
Clases tablas htmlClases tablas html
Clases tablas html
 
Clases tablas html
Clases tablas htmlClases tablas html
Clases tablas html
 
Clases tablas html
Clases tablas htmlClases tablas html
Clases tablas html
 
Clases tablas html
Clases tablas htmlClases tablas html
Clases tablas html
 
Clases tablas html
Clases tablas htmlClases tablas html
Clases tablas html
 
Trabajo5
Trabajo5Trabajo5
Trabajo5
 
Pagina web v
Pagina web vPagina web v
Pagina web v
 
Inf2 exc15 p1_a_unidad 3_html_fridaleyva
Inf2 exc15 p1_a_unidad 3_html_fridaleyvaInf2 exc15 p1_a_unidad 3_html_fridaleyva
Inf2 exc15 p1_a_unidad 3_html_fridaleyva
 
Colegio nicolas esguerraa
Colegio nicolas esguerraaColegio nicolas esguerraa
Colegio nicolas esguerraa
 
Colegio nicolas esguerra
Colegio nicolas esguerraColegio nicolas esguerra
Colegio nicolas esguerra
 
Peres el yisus
Peres el yisusPeres el yisus
Peres el yisus
 
Trabajo 3
Trabajo 3Trabajo 3
Trabajo 3
 
Pagina web v
Pagina web vPagina web v
Pagina web v
 
Red
RedRed
Red
 

Más de Pipe Estrada

Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerra Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerra Pipe Estrada
 
Trabajo de plantilla actualizado very actualizado 3
Trabajo de plantilla actualizado very actualizado 3Trabajo de plantilla actualizado very actualizado 3
Trabajo de plantilla actualizado very actualizado 3Pipe Estrada
 
Formulas de excel y funciones.
Formulas de excel y funciones.Formulas de excel y funciones.
Formulas de excel y funciones.Pipe Estrada
 
tabla de multiplicar
tabla de multiplicartabla de multiplicar
tabla de multiplicarPipe Estrada
 
Bitacora de tecnologia
Bitacora de tecnologiaBitacora de tecnologia
Bitacora de tecnologiaPipe Estrada
 
Plantilla con-normastrabajo2.0
Plantilla con-normastrabajo2.0Plantilla con-normastrabajo2.0
Plantilla con-normastrabajo2.0Pipe Estrada
 
9797 lme user_guide
9797 lme user_guide9797 lme user_guide
9797 lme user_guidePipe Estrada
 
trabajo 2.0 madafaka
trabajo 2.0 madafakatrabajo 2.0 madafaka
trabajo 2.0 madafakaPipe Estrada
 
Sopa de letras 2.0
Sopa de letras 2.0Sopa de letras 2.0
Sopa de letras 2.0Pipe Estrada
 
Trabajo informatica 01
Trabajo informatica 01Trabajo informatica 01
Trabajo informatica 01Pipe Estrada
 
Respuestas de la epu
Respuestas de la epuRespuestas de la epu
Respuestas de la epuPipe Estrada
 
trabajo informatica
trabajo informaticatrabajo informatica
trabajo informaticaPipe Estrada
 
trabajo de imagenes
trabajo de imagenestrabajo de imagenes
trabajo de imagenesPipe Estrada
 
ticestradasaavedra801
ticestradasaavedra801ticestradasaavedra801
ticestradasaavedra801Pipe Estrada
 

Más de Pipe Estrada (20)

36647
3664736647
36647
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerra Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
 
Trabajo de plantilla actualizado very actualizado 3
Trabajo de plantilla actualizado very actualizado 3Trabajo de plantilla actualizado very actualizado 3
Trabajo de plantilla actualizado very actualizado 3
 
Formulas de excel y funciones.
Formulas de excel y funciones.Formulas de excel y funciones.
Formulas de excel y funciones.
 
tabla de multiplicar
tabla de multiplicartabla de multiplicar
tabla de multiplicar
 
Bitacora de tecnologia
Bitacora de tecnologiaBitacora de tecnologia
Bitacora de tecnologia
 
Plantilla con-normastrabajo2.0
Plantilla con-normastrabajo2.0Plantilla con-normastrabajo2.0
Plantilla con-normastrabajo2.0
 
9797 lme user_guide
9797 lme user_guide9797 lme user_guide
9797 lme user_guide
 
trabajo 2.0 madafaka
trabajo 2.0 madafakatrabajo 2.0 madafaka
trabajo 2.0 madafaka
 
Sopa de letras 2.0
Sopa de letras 2.0Sopa de letras 2.0
Sopa de letras 2.0
 
Crusigrama nxt
Crusigrama nxtCrusigrama nxt
Crusigrama nxt
 
Trabajo informatica 01
Trabajo informatica 01Trabajo informatica 01
Trabajo informatica 01
 
Respuestas de la epu
Respuestas de la epuRespuestas de la epu
Respuestas de la epu
 
trabajo informatica
trabajo informaticatrabajo informatica
trabajo informatica
 
travajo jfi
travajo jfitravajo jfi
travajo jfi
 
trabajo pt
trabajo pttrabajo pt
trabajo pt
 
carnet de trabajo
carnet de trabajocarnet de trabajo
carnet de trabajo
 
trabajos
trabajos trabajos
trabajos
 
trabajo de imagenes
trabajo de imagenestrabajo de imagenes
trabajo de imagenes
 
ticestradasaavedra801
ticestradasaavedra801ticestradasaavedra801
ticestradasaavedra801
 

Último

SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxYadi Campos
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfAngélica Soledad Vega Ramírez
 
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfCurso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfFrancisco158360
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaDecaunlz
 
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJOACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJOBRIGIDATELLOLEONARDO
 
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdfMiNeyi1
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptxdeimerhdz21
 
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VSSEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VSYadi Campos
 
Infografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdfInfografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdfAlfaresbilingual
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docxEliaHernndez7
 
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONALMiNeyi1
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOluismii249
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dstEphaniiie
 
Abril 2024 - Maestra Jardinera Ediba.pdf
Abril 2024 -  Maestra Jardinera Ediba.pdfAbril 2024 -  Maestra Jardinera Ediba.pdf
Abril 2024 - Maestra Jardinera Ediba.pdfValeriaCorrea29
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024IES Vicent Andres Estelles
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSYadi Campos
 
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Katherine Concepcion Gonzalez
 
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...JAVIER SOLIS NOYOLA
 

Último (20)

SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
 
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfCurso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
 
Medición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptxMedición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptx
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativa
 
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJOACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
 
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
6.-Como-Atraer-El-Amor-01-Lain-Garcia-Calvo.pdf
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptx
 
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VSSEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
 
Infografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdfInfografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdf
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
 
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdfTema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
 
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes d
 
Abril 2024 - Maestra Jardinera Ediba.pdf
Abril 2024 -  Maestra Jardinera Ediba.pdfAbril 2024 -  Maestra Jardinera Ediba.pdf
Abril 2024 - Maestra Jardinera Ediba.pdf
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
 
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
 
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
 

Trabajo 5

  • 1. COLEGIO NACIONAL NICOLAS ESGURRA EDIFICAMOS FUTURO JUAN DAVID ESTRADA MORALES JUAN FELIPE ESTRADA SAAVEDRA 904 PAGINA WEB V TABLAS Tabla <table> Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna. Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habrá que especificar las filas y columnas que formarán la tabla. Fila <tr> Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas deberán insertarse entre las etiqetas <table> y </table>. Por ejemplo, para crear una tabla con cinco filas escribiríamos: <table> <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr>...</tr>
  • 2. </table> Columna o celda <td> Para crear una tabla no basta con especificar el número de filas, es necesario también especificar el número de columnas. Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos especificar el número de celdas por fila, que equivale a especificar el número de columnas por fila. Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las etiquetas <tr> y </tr>. Entre las etiquetas <td> y </td> se podrá especificar el contenido de cada una de las celdas. Por ejemplo, para insertar la siguiente tabla: Habría que escribir: <table border="1"> <tr> <td>Sabado</td> <td>Domingo</td> </tr> <tr> <td>Curso HTML</td> <td>Curso Dreamweaver</td> </tr> <tr> <td>Curso Frontpage</td> <td>Curso Flash</td> </tr> </table>
  • 3. Formato de la tabla Es posible modificar los siguientes atributos de una tabla: Por ejemplo, para modificar la tabla de la página anterior para que quedase como la siguiente: Habría que escribir: <table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99"> ...
  • 4. </table> Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de la ventana (lo puedes comprobar cambiando el ancho de la ventana de tu navegador y verás que el ancho de la tabla varía para ocupar siempre la mitad de la ventana), que el borde (border) tiene un grosor de dos píxeles (es más ancho que las separaciones internas de la tabla que tienen grosor 1), que la tabla está alineada al centro (center) de la ventana, que no hay espacio entre las celdas (cellspacing="0"), que el borde la tabla es negro (#000000) y el fondo naranja (#FFCC99). Formato de las celdas Es posible modificar los siguientes atributos de una celda: También es posible modificar estos atributos de toda una fila, especificándolos en la etiqueta <tr>, en lugar de en la etiqueta <td>.
  • 5. Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos para una celda que cuando son establecidos para una fila completa. Al mismo tiempo, tienen más prioridad los atributos establecidos para una fila que los establecidos para toda la tabla. Por ejemplo, si escribiéramos el siguiente código: <table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99"> <tr align="center" bgcolor="#0099CC"> <td>Sabado</td> <td bgcolor="#66CC99">Domingo</td> </tr> <tr> <td>Curso HTML</td> <td>Curso Dreamweaver</td> </tr> <tr> <td>Curso Frontpage</td> <td>Curso Flash</td> </tr> </table> Obtendríamos la siguiente tabla: Se ha establecido el color naranja como fondo de toda la tabla, pero con la línea de código <tr align="center" bgcolor="#0099CC"> se ha establecido el color azul como color de fondo de la primera fila, por lo que dicha fila se mostrará de color azul, y no de color naranja. Al mismo tiempo, se ha cambiado el color de la segunda celda de la primera fila por el color verde, a través de la línea <td bgcolor="#66CC99">Domingo</td> por lo que esta fila en vez de ser azul será verde, los atributos de celda tienen prioridad sobre los de la fila. Existe otro atributo que puede establecerse sobre las celdas. Se trata del atributo nowrap, que hace que el contenido de la celda no se ajuste de manera automática al ancho de la columna sino que el ancho de la celda se adapta al ancho del contenido para que el contenido ocupe una sólo fila. Este atributo no toma ningún valor, simplemente se añade o no a las etiqueta <td>.
  • 6. CODIGO: <html> <head> <title>ISLAND DONUTS 904</title> </head> <!-- pagina web elaborada por juan david y juan felipe estrada 904 //--> <body bgcolor="orange"> <hr> <marquee><b><i>BIENVENIDO A NUESTRA PAGINA WEB coperativa</b></i></marquee><br>. <img src="imagenes/1.jpg"border="6"" width="600" height="300"> <img src="imagenes/2.gif" alt="donas"border="6"" width="600" height="300"> <table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#green"> <tr align="center" bgcolor="#0099CC"> <td>productos</td> <td bgcolor="#0099CC">valor</td> </tr> <tr> <td>donas</td> <td>6000</td> </tr> <tr>
  • 7. <td>cafe o capuchino</td> <td>8000</td> </tr> </table> <hr> <h3>nuestra empresa brinda los mejores servicios y calidad</h3><br> <font color="003399" size="10" face="arial"><b>Bienvenidos a <b></font> <font color="red" size="9" face="arial"><b>island donuts<b></font><br> <p align="center">island donuts es una empresa que fabrica la mejores donas del mundos siendo reconocida por diferentes paises en America,Europa y Asia</p> <hr align="center" widtch="50%" size="5" color="green" noshade> <pre> copyrigth 2015 colegio nacional nicolas esguerra cll 189 #64a-32 Bogots,Colombia islanddonutsclientes@gtmail.com</pre>. </body> </html>