SlideShare una empresa de Scribd logo
1 de 20
TEMAS O TEMARIO
1-QUE ES UNA TABLA DE CODIGO HTML
2-QUE SIGNIFICA TR EN HTML?
3-QUE SIGNIFICA TD?
4-COMO INSERTAS UN SIMPLE BORDE EN UNA TABLA DE HTML
5-ESCRIBE EL CÓDIGO PARA COLOCAR UNA TABLA INVISIBLE
6-QUE ES UN COLSPAND?
7-QUE ES UN ROWSPAN?
8-ESCRIBE UN CÓDIGO USANDO AMBAS ETIQUETAS
9-QUE ES UN PADDING?
10-QUE ES CELL SPACING?
11-COMO INSERTAS COLOR DE FONDO EN UNA CELDA DE UNA TABLA?
12-COMO INSERTAS UNA IMAGEN DE FONDO EN UNA TABLA?
13-COMO ALINEAS EL CONTENIDO DE TU TABLA?
EJEMPLOS
<TABLE WIDTH=500>
</TABLE>
<TABLE WIDTH=50%>
</TABLE>
•
2-QUE SIGNIFICA TR EN HTML?
Una tabla básica
Las tablas se usan con profusión en las páginas Web, muchas veces
debido a que son el único instrumento con el que se cuenta, para
asegurarse que las cosas estarán en su sitio. Para definir una tabla se
usan las etiquetas:
<TABLE> y </TABLE> son las etiquetas donde está contenida la tabla
<TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila
(<th> y </th> si es una fila de cabecera)
3-Que Significa td?
<TD> y </TD> señalan una celda.
La tabla se va definiendo declarando una fila y a continuación las celdas
que contiene esa fila, luego otra fila y sus celadas, etc. No es necesario
que todas las filas contengan el mismo número de celdas.
La tabla (2x2) más sencilla que podemos hacer es la siguiente
El resultado no es muy brillante, pero vamos a ir viendo las distintas
posibilidades que tenemos para mejorarlo.
PARA INSERTAR UNA TABLA EN UNA PÁGINA DE INTERNET DEBES
INCLUIR EL CÓDIGO QUE APARECE A CONTINUACIÓN. ESTE PUEDE
SER MODIFICADO PARA OBTENER DIFERENTES RESULTADOS Y
ESTILOS DE TABLAS.
CÓDIGO:
<TABLE BORDER=1><TD>AQUI VA EL CONTENIDO DE LA TABLA,
TEXTO, IMÁGENES, ETC.</TD></TABLE>
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.
ADEMÁS DE UNA SIMPLE TABLA PODEMOS ADJUDICAR VARIOS CÓDIGOS PARA OBTENER UNA TABLA
DIVIDIDA EN COLUMNAS Y ENCASILLADOS. VEAMOS LOS SIGUIENTES EJEMPLOS.
CÓDIGO:
<TABLE BORDER=1><TD>COLUMNA #1</TD><TD>COLUMNA #2</TD></TABLE>
RESULTADO:
Columna #1 Columna #2
5-ESCRIBE EL CODIGO PARA COLOCAR UNA TABLA
INVISIBLE
• Código:
• <table border=1 bordercolor="silver" bgcolor="black"><td><font
color="white">Tabla con borde de color plateado (silver) y fondo negro
(black).
• El color de letra (font color) es blanco</font></td></table>
• Resultado:
Tabla con borde de color plateado (silver) y
fondo negro (black). El color de letra (font
color) es blanco
6-QUE ES COLSPAN?
ESTA ATRIBUTO DE HTML SIRVE PARA CREAR CELDAS QUE SE
EXTIENDEN VARIAS COLUMNAS. SE INDICA EL NUMERO DE
COLUMNAS NECESARIAS PARA UNA CELDA. POR LO GENERAL,
PARA UNA CELDA SÓLO SE NECESITA UNA COLUMNA, Y EN
ESE CASO NO ES NECESARIO INDICAR NINGÚN VALOR. PERO
SI UNA CELDA SE HA DE EXTENDER, POR EJEMPLO, EN TRES
COLUMNAS, DEBERÁ ASIGNAR EL VALOR COLSPAN="3". EL
SUCESOR DE ESTE ATRIBUTO ES OPCIONAL.
LOS VALORES VÁLIDOS PARA ESTE ATRIBUTO SON LOS
NÚMEROS ENTEROS. EL NÚMERO DEBE CONTENER AL
MENOS UNA CIFRA ENTRE 0 Y 9 (POR EJEMPLO, "9").
celda 1 celda 2
celda 3
EJEMPLO DE COLUMNA EXPANDIDA <COLSPAN>
ITEM 1 ITEM 2
ITEM 3 ITEM 4 ITEM 5
<TABLE BORDER>
<TR>
<TD>ITEM 1</TD>
<TD COLSPAN=2>ITEM 2</TD>
</TR>
<TR>
<TD>ITEM 3</TD> <TD>ITEM 4</TD>
<TD>ITEM 5</TD>
</TR>
</TABLE>
6-Que es un colspand?
A
B
C
D E
Ejemplo:
<table border="1">
<tr>
<td rowspan="2" bordercolor="#FF0000" width="100">A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>E</td>
<td>D</td>
</tr>
Lo cual se vería así:
7-QUE ES ROWSPAN? ROWSPAN
ESTE ATRIBUTO DE HTML SE ENCARGA DE UNIR CELDAS
REPARTIDAS POR VARIAS LÍNEAS. CON AYUDA DE ESTE
ATRIBUTO SE PUEDEN UNIR VARIAS CELDAS DE UNA TABLA
REPARTIDAS POR VARIAS LÍNEAS.
ESTA OPCIÓN ES NECESARIA POR EJEMPLO, CUANDO UNA DE
LAS CELDAS DE LA TABLA DEBE SER MÁS ALTA QUE LAS
DEMÁS. EN LUGAR DE DEFINIR VARIAS CELDAS, INDIQUE UNA
SOLA CELDA Y ASÍGNELE EL TARIBUTO ROWSPAN.
COMO VALOR, TRANSMÍTALE AL ATRIBUTO EL NÚMERO DE
LÍNEAS QUE DESEA UNIR. EL USO DE ESTE ATRIBUTO ES
OPCIONAL. LOS VALORES VÁLIDOS PARA ESTE ATRIBUTO SON
TODOS LOS NÚMEROS ENTEROS. EL NÚMERO DEBE
CONTENER AL MENOS UNA DE LAS CIFRAS ENTRE 0 Y 9 (="9").
EJEMPLOS
A
B
C
D E
<table border="1">
<tr>
<td rowspan="2" bordercolor="#FF0000" width="100">A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>E</td>
<td>D</td>
</tr>
Lo cual se vería así:
8-QUE ES CELLPANDING
CELLPADDING: ESTE ATRIBUTO NOS PERMITE ESPECIFICAR LA DISTANCIA ENTRE EL MARGEN
INTERIOR DE LA CELDA Y SU CONTENIDO. EN EL CASO DE ESTE ATRIBUTO, SI SU VALOR ES
EN PIXELES LOS CUATRO BORDES DE LA CELDA DEBERÍAN ESTAR A LA DISTANCIA INDICADA
DEL CONTENIDO. EN CAMBIO SI EL VALOR ES UN PORCENTAJE, LOS BORDES SUPERIOR E
INFERIOR ESTARÁN SEPARADOS A UNA DISTANCIA PORCENTUAL DEL VALOR DISPONIBLE
VERTICALMENTE Y LO MISMO PARA LOS BORDES DERECHO E IZQUIERDO QUE ESTARÁN
SEPARADOS AL PORCENTAJE INDICADO DEL ESPACIO DISPONIBLE HORIZONTALMENTE.
9-QUE ES CELLSPACING?
CELLSPACING: ESTE ATRIBUTO PERMITE DETERMINAR O
ESPECIFICAR LA DISTANCIA ENTRE LAS CELDAS Y ENTRE LAS
CELDAS Y EL MARGEN EXTERIOR DE LA TABLA. EL VALOR DE
ESTE ATRIBUTO SE MIDE EN PIXELES Y ES VÁLIDO PARA TODAS
LAS CELDAS.
EL COLOR DE FONDO DE UNA CELDA SE DETERMINA CON LA PROPIEDAD
"BACKGROUNDCOLOR".
QUE EL RATON PASE POR ENCIMA DE UN ELEMENTO LO DETECTAS CON EL
EVENTO "ONMOUSEOVER".
QUE EL RATON DEJE DE ESTAR ENCIMA DE UN ELEMENTO LO DETECTAS CON EL
EVENTO "ONMOUSEOUT".
ASI QUE LO QUE TIENES QUE HACER ES PONER A CADA CELDA QUE QUIERES QUE
CAMBIE EL COLOR UN GESTOR DE EVENTO "ONMOUSEOVER". PONLE TAMBIEN
UN GESTOR DE EVENTO "ONMOUSEOUT" SI QUIERES QUE EL CAMBIO DE COLOR
SEA SOLO MIENTRAS EL RATON ESTA ENCIMA, SINO EL CAMBIO DE COLOR
PERDURARA UNA VEZ QUE EL RATON SE DESPLACE FUERA DE LA CELDA.
EL CODIGO SERIA ALGO ASI.
CODIGO:
<TD ONMOUSEOVER="CHANGEBGCOLOR(THIS)"
ONMOUSEOUT="CHANGEBGCOLOR(THIS)">
11-Como insertas color de fondo en una celda de una tabla?
12-Como Insertas una imagen de fondo en una tabla?
12-Como Insertas una imagen de
fondo en una tabla?
11-Como insertas color de fondo en
una celda de una tabla?
<TABLE CLASS="TABLA" WIDTH="100%" CELLPADDING="5" CELLSPACING="0">
<TR CLASS="TABLA_TITULO"><TD>ÚLTIMOS TEMAS ACTIVOS</TD></TR>
<TR CLASS="TABLA_TEXTO_1"><TD><DIV
CLASS="ULTIMOSTEMASACTIVOS"></DIV></TD></TR>
</TABLE>
ENCONTRÉ ESTA OPCIÓN QUE CENTRARÍA EL CONTENIDO DE LA CELDA (
DOY POR HECHO QUE AHORA EL CONTENIDO ESTÁ LINEADO A LA
IZQUIERDA) Y DEJA LA TABLA TAL CUAL:
<DIV STYLE="TEXT-ALIGN:CENTER;">
<TABLE CLASS="TABLA" WIDTH="100%" CELLPADDING="5"
CELLSPACING="0">
<TR CLASS="TABLA_TITULO"><TD>ÚLTIMOS TEMAS ACTIVOS</TD></TR>
<TR CLASS="TABLA_TEXTO_1"><TD><DIV
CLASS="ULTIMOSTEMASACTIVOS"></DIV></TD></TR>
</TABLE>
</DIV>
13-Como Alineas el contenido de tu tabla?
13-COMO ALINEAS EL CONTENIDO DE TU TABLA?
FORMATO APA
• HTTP://BOBUU.BLOGSPOT.COM/2010/09/83-HTML-TABLAS-
ATRIBUTOS-CELLSPACING-Y.HTML
RECUPERADO POR ALONSO DUEÑAS 27-05-2015
LUNES, 17 DE MARZO DE 2014
• HTTP://SOPORTE.MIARROBA.ES/1364/10853971-CENTRAR-EL-
CONTENIDO-DE-UNA-TABLA/
RECUPERADO POR ALONSO DUEÑAS 27-05-15
#1 · 06/Oct/2012, 17:16
• HTTP://WWW.MCLIBRE.ORG/CONSULTAR/AMAYA/CSS/CSS_TA
BLAS_MODOS_BORDES.HTML
RECUPERADO POR ALONSO DUEÑAS FLETES
• HTTP://PLATEA.PNTIC.MEC.ES/~ABERCIAN/GUIAHTML/TABLAS
.HTM
RECUPERADO POR ALONSO DUEÑAS FLETES 26-05-2015
• HTTP://DALECLICK.BLOGSPOT.MX/2005/02/TABLAS.HTML
RECUPERADO POR ALONSO DUEÑAS FLETES 26-05-2015
• HTTP://HTML.HAZUNAWEB.COM/116.PHP
• RECUPERADO POR ALONSO DUEÑAS FLETES
27-05-2015
• HTTP://JCAROCOTA.TRIPOD.COM/COLSPAN.HTML
RECUPERADO POR ALONSO DUEÑAS 27-05-2015

Más contenido relacionado

La actualidad más candente

Tabla de etiquetas y atributos (Photoshop)
Tabla de etiquetas y atributos (Photoshop)Tabla de etiquetas y atributos (Photoshop)
Tabla de etiquetas y atributos (Photoshop)Cat Lunac
 
Etiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlEtiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlDoraliza Hugo Vera
 
.Como insertar codigos de tablas en html
.Como insertar codigos de tablas en html.Como insertar codigos de tablas en html
.Como insertar codigos de tablas en htmlSñrta Barahona
 
DBER N° 2 blog blogger blogspot
DBER N° 2 blog blogger blogspotDBER N° 2 blog blogger blogspot
DBER N° 2 blog blogger blogspotJIMENAESPANA
 
Programación avanzada etiquetas de html
Programación avanzada   etiquetas de htmlProgramación avanzada   etiquetas de html
Programación avanzada etiquetas de htmlEvelyncita Perea
 
Qué son los frames
Qué son los framesQué son los frames
Qué son los framesUEB
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas htmlAna Lira
 

La actualidad más candente (14)

Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Tabla de etiquetas y atributos (Photoshop)
Tabla de etiquetas y atributos (Photoshop)Tabla de etiquetas y atributos (Photoshop)
Tabla de etiquetas y atributos (Photoshop)
 
HTML
HTMLHTML
HTML
 
Etiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlEtiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje html
 
Microsoft Word
Microsoft Word Microsoft Word
Microsoft Word
 
Ppp jjj 1002
Ppp jjj 1002Ppp jjj 1002
Ppp jjj 1002
 
.Como insertar codigos de tablas en html
.Como insertar codigos de tablas en html.Como insertar codigos de tablas en html
.Como insertar codigos de tablas en html
 
Diapositivas Html
Diapositivas HtmlDiapositivas Html
Diapositivas Html
 
DBER N° 2 blog blogger blogspot
DBER N° 2 blog blogger blogspotDBER N° 2 blog blogger blogspot
DBER N° 2 blog blogger blogspot
 
Programación avanzada etiquetas de html
Programación avanzada   etiquetas de htmlProgramación avanzada   etiquetas de html
Programación avanzada etiquetas de html
 
Tutorial
TutorialTutorial
Tutorial
 
Qué son los frames
Qué son los framesQué son los frames
Qué son los frames
 
Las etiquetas más utilizadas en html
Las etiquetas más utilizadas en htmlLas etiquetas más utilizadas en html
Las etiquetas más utilizadas en html
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 

Destacado (14)

Power 5.8 y 6.1
Power 5.8 y 6.1Power 5.8 y 6.1
Power 5.8 y 6.1
 
Robotica
RoboticaRobotica
Robotica
 
Higiene y seguridad industrial
Higiene y seguridad industrialHigiene y seguridad industrial
Higiene y seguridad industrial
 
Mkt de contenidos átomo educativo
Mkt de contenidos átomo educativoMkt de contenidos átomo educativo
Mkt de contenidos átomo educativo
 
Publicidad I: Imagen, Lema y Promesa del producto
Publicidad I:  Imagen, Lema y Promesa del productoPublicidad I:  Imagen, Lema y Promesa del producto
Publicidad I: Imagen, Lema y Promesa del producto
 
pi966.pdf
pi966.pdfpi966.pdf
pi966.pdf
 
pi944.pdf
pi944.pdfpi944.pdf
pi944.pdf
 
MH698.pdf
MH698.pdfMH698.pdf
MH698.pdf
 
Udemy
UdemyUdemy
Udemy
 
EquityDaily.pdf
EquityDaily.pdfEquityDaily.pdf
EquityDaily.pdf
 
Text EÖ-PK 2013 .pdf
Text EÖ-PK 2013 .pdfText EÖ-PK 2013 .pdf
Text EÖ-PK 2013 .pdf
 
NEU Pressedienst_TZS_SC 02.pdf
NEU Pressedienst_TZS_SC 02.pdfNEU Pressedienst_TZS_SC 02.pdf
NEU Pressedienst_TZS_SC 02.pdf
 
Guia cableado estructurado
 Guia cableado estructurado Guia cableado estructurado
Guia cableado estructurado
 
Edgar informe sistema de información
Edgar informe  sistema de informaciónEdgar informe  sistema de información
Edgar informe sistema de información
 

Similar a Herramientas de html (Tablas)

Similar a Herramientas de html (Tablas) (20)

CODIGOS HTML
CODIGOS HTMLCODIGOS HTML
CODIGOS HTML
 
DEBER DE PROGRAMACION (ORGANIGRAMAS DE CCS)
DEBER DE PROGRAMACION (ORGANIGRAMAS DE CCS)DEBER DE PROGRAMACION (ORGANIGRAMAS DE CCS)
DEBER DE PROGRAMACION (ORGANIGRAMAS DE CCS)
 
Diplomado en computacion
Diplomado en computacionDiplomado en computacion
Diplomado en computacion
 
Conceptos y procedimientos
Conceptos y procedimientosConceptos y procedimientos
Conceptos y procedimientos
 
Access
AccessAccess
Access
 
Fundamentos de BD - Unidad 6 lenguaje sql
Fundamentos de BD - Unidad 6 lenguaje sqlFundamentos de BD - Unidad 6 lenguaje sql
Fundamentos de BD - Unidad 6 lenguaje sql
 
Tablas de HTML
Tablas de HTMLTablas de HTML
Tablas de HTML
 
Portada
PortadaPortada
Portada
 
Instituto tecnologico del no1 meery
Instituto tecnologico del no1 meeryInstituto tecnologico del no1 meery
Instituto tecnologico del no1 meery
 
2. creación de tablas 2007
2. creación de tablas 20072. creación de tablas 2007
2. creación de tablas 2007
 
Tablas en html _informatica_mitzi_1b
Tablas en html _informatica_mitzi_1bTablas en html _informatica_mitzi_1b
Tablas en html _informatica_mitzi_1b
 
Guia 5 de html tablas
Guia 5 de html   tablasGuia 5 de html   tablas
Guia 5 de html tablas
 
Operaciones basicas de sql
Operaciones basicas de sqlOperaciones basicas de sql
Operaciones basicas de sql
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
emded/Retro2011brandon
emded/Retro2011brandonemded/Retro2011brandon
emded/Retro2011brandon
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 

Último

Clasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptxClasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptxCarolina Bujaico
 
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guia
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guiaORIENTACIONES DE INFORMÁTICA-2024.pdf-guia
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guiaYeimys Ch
 
Trabajando con Formasy Smart art en power Point
Trabajando con Formasy Smart art en power PointTrabajando con Formasy Smart art en power Point
Trabajando con Formasy Smart art en power PointValerioIvanDePazLoja
 
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docxTALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docxobandopaula444
 
certificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdfcertificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdfFernandoOblitasVivan
 
Trabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfTrabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfedepmariaperez
 
Nomisam: Base de Datos para Gestión de Nómina
Nomisam: Base de Datos para Gestión de NóminaNomisam: Base de Datos para Gestión de Nómina
Nomisam: Base de Datos para Gestión de Nóminacuellosameidy
 
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docxPLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docxhasbleidit
 
Slideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan GerenciaSlideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan Gerenciacubillannoly
 
PROYECCIÓN DE VISTAS planos de vistas y mas
PROYECCIÓN DE VISTAS planos de vistas y masPROYECCIÓN DE VISTAS planos de vistas y mas
PROYECCIÓN DE VISTAS planos de vistas y maslida630411
 
Viguetas Pretensadas en concreto armado
Viguetas Pretensadas  en concreto armadoViguetas Pretensadas  en concreto armado
Viguetas Pretensadas en concreto armadob7fwtwtfxf
 
Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)JuanStevenTrujilloCh
 
CommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 TestcontainersCommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 TestcontainersIván López Martín
 
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfLa Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfjeondanny1997
 
Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024
Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024
Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024u20211198540
 
La electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdfLa electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdfcristianrb0324
 
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdfBetianaJuarez1
 
Herramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdfHerramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdfKarinaCambero3
 
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptxHugoGutierrez99
 

Último (20)

Clasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptxClasificación de Conjuntos de Datos Desequilibrados.pptx
Clasificación de Conjuntos de Datos Desequilibrados.pptx
 
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guia
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guiaORIENTACIONES DE INFORMÁTICA-2024.pdf-guia
ORIENTACIONES DE INFORMÁTICA-2024.pdf-guia
 
Trabajando con Formasy Smart art en power Point
Trabajando con Formasy Smart art en power PointTrabajando con Formasy Smart art en power Point
Trabajando con Formasy Smart art en power Point
 
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docxTALLER DE ANALISIS SOLUCION  PART 2 (1)-1.docx
TALLER DE ANALISIS SOLUCION PART 2 (1)-1.docx
 
certificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdfcertificado de oracle academy cetrificado.pdf
certificado de oracle academy cetrificado.pdf
 
Trabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdfTrabajo de tecnología excel avanzado.pdf
Trabajo de tecnología excel avanzado.pdf
 
Nomisam: Base de Datos para Gestión de Nómina
Nomisam: Base de Datos para Gestión de NóminaNomisam: Base de Datos para Gestión de Nómina
Nomisam: Base de Datos para Gestión de Nómina
 
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docxPLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
PLANEACION DE CLASES TEMA TIPOS DE FAMILIA.docx
 
Slideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan GerenciaSlideshare y Scribd - Noli Cubillan Gerencia
Slideshare y Scribd - Noli Cubillan Gerencia
 
PROYECCIÓN DE VISTAS planos de vistas y mas
PROYECCIÓN DE VISTAS planos de vistas y masPROYECCIÓN DE VISTAS planos de vistas y mas
PROYECCIÓN DE VISTAS planos de vistas y mas
 
Viguetas Pretensadas en concreto armado
Viguetas Pretensadas  en concreto armadoViguetas Pretensadas  en concreto armado
Viguetas Pretensadas en concreto armado
 
Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)Análisis de los artefactos (nintendo NES)
Análisis de los artefactos (nintendo NES)
 
CommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 TestcontainersCommitConf 2024 - Spring Boot <3 Testcontainers
CommitConf 2024 - Spring Boot <3 Testcontainers
 
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfLa Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
 
El camino a convertirse en Microsoft MVP
El camino a convertirse en Microsoft MVPEl camino a convertirse en Microsoft MVP
El camino a convertirse en Microsoft MVP
 
Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024
Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024
Inteligencia Artificial. Matheo Hernandez Serrano USCO 2024
 
La electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdfLa electricidad y la electronica.10-7.pdf
La electricidad y la electronica.10-7.pdf
 
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
_Planificacion Anual NTICX 2024.SEC.21.4.1.docx.pdf
 
Herramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdfHerramientas que posibilitan la información y la investigación.pdf
Herramientas que posibilitan la información y la investigación.pdf
 
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
#Tare10ProgramacionWeb2024aaaaaaaaaaaa.pptx
 

Herramientas de html (Tablas)

  • 1.
  • 2. TEMAS O TEMARIO 1-QUE ES UNA TABLA DE CODIGO HTML 2-QUE SIGNIFICA TR EN HTML? 3-QUE SIGNIFICA TD? 4-COMO INSERTAS UN SIMPLE BORDE EN UNA TABLA DE HTML 5-ESCRIBE EL CÓDIGO PARA COLOCAR UNA TABLA INVISIBLE 6-QUE ES UN COLSPAND? 7-QUE ES UN ROWSPAN? 8-ESCRIBE UN CÓDIGO USANDO AMBAS ETIQUETAS 9-QUE ES UN PADDING? 10-QUE ES CELL SPACING? 11-COMO INSERTAS COLOR DE FONDO EN UNA CELDA DE UNA TABLA? 12-COMO INSERTAS UNA IMAGEN DE FONDO EN UNA TABLA? 13-COMO ALINEAS EL CONTENIDO DE TU TABLA?
  • 3.
  • 5. 2-QUE SIGNIFICA TR EN HTML? Una tabla básica Las tablas se usan con profusión en las páginas Web, muchas veces debido a que son el único instrumento con el que se cuenta, para asegurarse que las cosas estarán en su sitio. Para definir una tabla se usan las etiquetas: <TABLE> y </TABLE> son las etiquetas donde está contenida la tabla <TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una fila de cabecera) 3-Que Significa td? <TD> y </TD> señalan una celda. La tabla se va definiendo declarando una fila y a continuación las celdas que contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las filas contengan el mismo número de celdas. La tabla (2x2) más sencilla que podemos hacer es la siguiente El resultado no es muy brillante, pero vamos a ir viendo las distintas posibilidades que tenemos para mejorarlo.
  • 6. PARA INSERTAR UNA TABLA EN UNA PÁGINA DE INTERNET DEBES INCLUIR EL CÓDIGO QUE APARECE A CONTINUACIÓN. ESTE PUEDE SER MODIFICADO PARA OBTENER DIFERENTES RESULTADOS Y ESTILOS DE TABLAS. CÓDIGO: <TABLE BORDER=1><TD>AQUI VA EL CONTENIDO DE LA TABLA, TEXTO, IMÁGENES, ETC.</TD></TABLE> 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. ADEMÁS DE UNA SIMPLE TABLA PODEMOS ADJUDICAR VARIOS CÓDIGOS PARA OBTENER UNA TABLA DIVIDIDA EN COLUMNAS Y ENCASILLADOS. VEAMOS LOS SIGUIENTES EJEMPLOS. CÓDIGO: <TABLE BORDER=1><TD>COLUMNA #1</TD><TD>COLUMNA #2</TD></TABLE> RESULTADO: Columna #1 Columna #2
  • 7. 5-ESCRIBE EL CODIGO PARA COLOCAR UNA TABLA INVISIBLE • Código: • <table border=1 bordercolor="silver" bgcolor="black"><td><font color="white">Tabla con borde de color plateado (silver) y fondo negro (black). • El color de letra (font color) es blanco</font></td></table> • Resultado: Tabla con borde de color plateado (silver) y fondo negro (black). El color de letra (font color) es blanco
  • 8. 6-QUE ES COLSPAN? ESTA ATRIBUTO DE HTML SIRVE PARA CREAR CELDAS QUE SE EXTIENDEN VARIAS COLUMNAS. SE INDICA EL NUMERO DE COLUMNAS NECESARIAS PARA UNA CELDA. POR LO GENERAL, PARA UNA CELDA SÓLO SE NECESITA UNA COLUMNA, Y EN ESE CASO NO ES NECESARIO INDICAR NINGÚN VALOR. PERO SI UNA CELDA SE HA DE EXTENDER, POR EJEMPLO, EN TRES COLUMNAS, DEBERÁ ASIGNAR EL VALOR COLSPAN="3". EL SUCESOR DE ESTE ATRIBUTO ES OPCIONAL. LOS VALORES VÁLIDOS PARA ESTE ATRIBUTO SON LOS NÚMEROS ENTEROS. EL NÚMERO DEBE CONTENER AL MENOS UNA CIFRA ENTRE 0 Y 9 (POR EJEMPLO, "9"). celda 1 celda 2 celda 3
  • 9. EJEMPLO DE COLUMNA EXPANDIDA <COLSPAN> ITEM 1 ITEM 2 ITEM 3 ITEM 4 ITEM 5 <TABLE BORDER> <TR> <TD>ITEM 1</TD> <TD COLSPAN=2>ITEM 2</TD> </TR> <TR> <TD>ITEM 3</TD> <TD>ITEM 4</TD> <TD>ITEM 5</TD> </TR> </TABLE> 6-Que es un colspand?
  • 10. A B C D E Ejemplo: <table border="1"> <tr> <td rowspan="2" bordercolor="#FF0000" width="100">A</td> <td>B</td> </tr> <tr> <td>C</td> </tr> <tr> <td>E</td> <td>D</td> </tr> Lo cual se vería así:
  • 11. 7-QUE ES ROWSPAN? ROWSPAN ESTE ATRIBUTO DE HTML SE ENCARGA DE UNIR CELDAS REPARTIDAS POR VARIAS LÍNEAS. CON AYUDA DE ESTE ATRIBUTO SE PUEDEN UNIR VARIAS CELDAS DE UNA TABLA REPARTIDAS POR VARIAS LÍNEAS. ESTA OPCIÓN ES NECESARIA POR EJEMPLO, CUANDO UNA DE LAS CELDAS DE LA TABLA DEBE SER MÁS ALTA QUE LAS DEMÁS. EN LUGAR DE DEFINIR VARIAS CELDAS, INDIQUE UNA SOLA CELDA Y ASÍGNELE EL TARIBUTO ROWSPAN. COMO VALOR, TRANSMÍTALE AL ATRIBUTO EL NÚMERO DE LÍNEAS QUE DESEA UNIR. EL USO DE ESTE ATRIBUTO ES OPCIONAL. LOS VALORES VÁLIDOS PARA ESTE ATRIBUTO SON TODOS LOS NÚMEROS ENTEROS. EL NÚMERO DEBE CONTENER AL MENOS UNA DE LAS CIFRAS ENTRE 0 Y 9 (="9").
  • 12. EJEMPLOS A B C D E <table border="1"> <tr> <td rowspan="2" bordercolor="#FF0000" width="100">A</td> <td>B</td> </tr> <tr> <td>C</td> </tr> <tr> <td>E</td> <td>D</td> </tr> Lo cual se vería así:
  • 13. 8-QUE ES CELLPANDING CELLPADDING: ESTE ATRIBUTO NOS PERMITE ESPECIFICAR LA DISTANCIA ENTRE EL MARGEN INTERIOR DE LA CELDA Y SU CONTENIDO. EN EL CASO DE ESTE ATRIBUTO, SI SU VALOR ES EN PIXELES LOS CUATRO BORDES DE LA CELDA DEBERÍAN ESTAR A LA DISTANCIA INDICADA DEL CONTENIDO. EN CAMBIO SI EL VALOR ES UN PORCENTAJE, LOS BORDES SUPERIOR E INFERIOR ESTARÁN SEPARADOS A UNA DISTANCIA PORCENTUAL DEL VALOR DISPONIBLE VERTICALMENTE Y LO MISMO PARA LOS BORDES DERECHO E IZQUIERDO QUE ESTARÁN SEPARADOS AL PORCENTAJE INDICADO DEL ESPACIO DISPONIBLE HORIZONTALMENTE.
  • 14. 9-QUE ES CELLSPACING? CELLSPACING: ESTE ATRIBUTO PERMITE DETERMINAR O ESPECIFICAR LA DISTANCIA ENTRE LAS CELDAS Y ENTRE LAS CELDAS Y EL MARGEN EXTERIOR DE LA TABLA. EL VALOR DE ESTE ATRIBUTO SE MIDE EN PIXELES Y ES VÁLIDO PARA TODAS LAS CELDAS.
  • 15. EL COLOR DE FONDO DE UNA CELDA SE DETERMINA CON LA PROPIEDAD "BACKGROUNDCOLOR". QUE EL RATON PASE POR ENCIMA DE UN ELEMENTO LO DETECTAS CON EL EVENTO "ONMOUSEOVER". QUE EL RATON DEJE DE ESTAR ENCIMA DE UN ELEMENTO LO DETECTAS CON EL EVENTO "ONMOUSEOUT". ASI QUE LO QUE TIENES QUE HACER ES PONER A CADA CELDA QUE QUIERES QUE CAMBIE EL COLOR UN GESTOR DE EVENTO "ONMOUSEOVER". PONLE TAMBIEN UN GESTOR DE EVENTO "ONMOUSEOUT" SI QUIERES QUE EL CAMBIO DE COLOR SEA SOLO MIENTRAS EL RATON ESTA ENCIMA, SINO EL CAMBIO DE COLOR PERDURARA UNA VEZ QUE EL RATON SE DESPLACE FUERA DE LA CELDA. EL CODIGO SERIA ALGO ASI. CODIGO: <TD ONMOUSEOVER="CHANGEBGCOLOR(THIS)" ONMOUSEOUT="CHANGEBGCOLOR(THIS)"> 11-Como insertas color de fondo en una celda de una tabla?
  • 16. 12-Como Insertas una imagen de fondo en una tabla?
  • 17. 12-Como Insertas una imagen de fondo en una tabla? 11-Como insertas color de fondo en una celda de una tabla?
  • 18. <TABLE CLASS="TABLA" WIDTH="100%" CELLPADDING="5" CELLSPACING="0"> <TR CLASS="TABLA_TITULO"><TD>ÚLTIMOS TEMAS ACTIVOS</TD></TR> <TR CLASS="TABLA_TEXTO_1"><TD><DIV CLASS="ULTIMOSTEMASACTIVOS"></DIV></TD></TR> </TABLE> ENCONTRÉ ESTA OPCIÓN QUE CENTRARÍA EL CONTENIDO DE LA CELDA ( DOY POR HECHO QUE AHORA EL CONTENIDO ESTÁ LINEADO A LA IZQUIERDA) Y DEJA LA TABLA TAL CUAL: <DIV STYLE="TEXT-ALIGN:CENTER;"> <TABLE CLASS="TABLA" WIDTH="100%" CELLPADDING="5" CELLSPACING="0"> <TR CLASS="TABLA_TITULO"><TD>ÚLTIMOS TEMAS ACTIVOS</TD></TR> <TR CLASS="TABLA_TEXTO_1"><TD><DIV CLASS="ULTIMOSTEMASACTIVOS"></DIV></TD></TR> </TABLE> </DIV> 13-Como Alineas el contenido de tu tabla?
  • 19. 13-COMO ALINEAS EL CONTENIDO DE TU TABLA?
  • 20. FORMATO APA • HTTP://BOBUU.BLOGSPOT.COM/2010/09/83-HTML-TABLAS- ATRIBUTOS-CELLSPACING-Y.HTML RECUPERADO POR ALONSO DUEÑAS 27-05-2015 LUNES, 17 DE MARZO DE 2014 • HTTP://SOPORTE.MIARROBA.ES/1364/10853971-CENTRAR-EL- CONTENIDO-DE-UNA-TABLA/ RECUPERADO POR ALONSO DUEÑAS 27-05-15 #1 · 06/Oct/2012, 17:16 • HTTP://WWW.MCLIBRE.ORG/CONSULTAR/AMAYA/CSS/CSS_TA BLAS_MODOS_BORDES.HTML RECUPERADO POR ALONSO DUEÑAS FLETES • HTTP://PLATEA.PNTIC.MEC.ES/~ABERCIAN/GUIAHTML/TABLAS .HTM RECUPERADO POR ALONSO DUEÑAS FLETES 26-05-2015 • HTTP://DALECLICK.BLOGSPOT.MX/2005/02/TABLAS.HTML RECUPERADO POR ALONSO DUEÑAS FLETES 26-05-2015 • HTTP://HTML.HAZUNAWEB.COM/116.PHP • RECUPERADO POR ALONSO DUEÑAS FLETES 27-05-2015 • HTTP://JCAROCOTA.TRIPOD.COM/COLSPAN.HTML RECUPERADO POR ALONSO DUEÑAS 27-05-2015