SlideShare una empresa de Scribd logo
1 de 8
HTML
TABLAS EN HTML
MERG 2
TABLAS
 <TABLE>Es la etiqueta que engloba a todas las demás.
<TABLE>
(resto de etiquetas)
</TABLE>
 <TR> (Table Row).
Ocupa el siguiente nivel dentro de la confección de una tabla.
Se utilizan para formar cada una de las filas (row) que
queramos obtener. Se repetirán tantas veces como filas
necesitemos en la tabla. Las etiquetas son:
<TR>
(Conntenido de la fila)
</TR>
MERG 3
 <TD> (Table Data).
En el último nivel, dentro de las anteriores, tenemos las etiquetas
de cada celda, que son <TD> y </TD>, y que engloban el
contenido de cada celda concreta (texto, imágenes, enlaces, etc.).
Debemos repetirlas tantas veces como celdas queramos que haya
en esa fila.
MERG 4
Opciones de <TABLE>
 ALIGN=“CENTER” |”RIGHT”|”LEFT”
 BGCOLOR=“RRGGBB”
 BORDER=“Ancho Borde en puntos”
 BORDERCOLOR=“RRGGBB”
 CELLSPACING=“espacio entre celdas en puntos”
 CELLPADDING=“espacio entre el texto u objeto y el borde
de la celda”
 COLS=“Número de columnas”
 WIDTH=“Cantidad en puntos” | “porcentaje (ejm 50%)”
 Otras: HEIGHT, HSPACE, VSPACE
MERG 5
Opciones de <TD>
 WIDTH=”VALOR” | “PORCENTAJE”
 ALIGN=“LEFT”|”RIGHT”|”CENTER”
 VALIGN=“TOP”|”MIDDLE”|”BOTTOM”
 BGCOLOR=“RRGGBB"
 Otras opciones:
 COLSPAN
 ROWSPAN
 Investigar para qué sirve la opción <TH> y que diferencia existe
entre esta etiqueta y <TD>.
 Investigar COLSPAN y ROWSPAN (arriba)
MERG 6
Más ejemplos de tablas
<TABLE border = 4 cellspacing = 4 cellpadding = 4 width =80%>
<TH align = center>Buscadores
<TH align = center colspan = 2>Otros Links
<TR>
<TD align = LEFT>Yahoo
<TD align = LEFT>Microsoft
<TD align = LEFT>IBM
<TR>
<TD align = LEFT>Infoseek
<TD align = LEFT>Apple
<TD align = LEFT>Digital
</TABLE>
MERG 7
<TABLE width="350"
align="center" border="1">
<TR>
<TH colspan="2">fila 1 celda 1 y 2 (colspan)</TH>
<TH bgcolor="RED">fila 1 celda 3</TH>
</TR>
<TR>
<TD>fila 2 celda 1</TD>
<TD>fila 2 celda 2</TD>
<TD rowspan="2" valign="Bottom">fila 2 y 3 celda 3 (rowspan)</TD>
</TR>
<TR>
<TD align="right" BGCOLOR="yellow">
<font face="Arial" size=2>f 2 cel 1</font>
</TD>
<TD>fila 2 celda 2</TD>
</TR>
</TABLE>
MERG 8
Ejercicios

Más contenido relacionado

Similar a Tablasbdjdjdjdndndjdjdjdjdkdkdk en html.ppt (20)

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
 
Unidad 6
Unidad 6Unidad 6
Unidad 6
 
Indes.html
Indes.htmlIndes.html
Indes.html
 
Pagina web 5.
Pagina web 5.Pagina web 5.
Pagina web 5.
 
Portada
PortadaPortada
Portada
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Pagina web 5
Pagina web 5Pagina web 5
Pagina web 5
 
Pagina web 5
Pagina web 5Pagina web 5
Pagina web 5
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Trabajo 6
Trabajo 6Trabajo 6
Trabajo 6
 
Web3
Web3Web3
Web3
 
Pagina web v
Pagina web vPagina web v
Pagina web v
 
Tablas
TablasTablas
Tablas
 
Tablas
TablasTablas
Tablas
 
Tablas
TablasTablas
Tablas
 
Tablas
TablasTablas
Tablas
 
Tablas
TablasTablas
Tablas
 
sites_google_com_site_karlosnun_curso_html_tablas_html_pli_1.pdf
sites_google_com_site_karlosnun_curso_html_tablas_html_pli_1.pdfsites_google_com_site_karlosnun_curso_html_tablas_html_pli_1.pdf
sites_google_com_site_karlosnun_curso_html_tablas_html_pli_1.pdf
 
Trabajo tablas
Trabajo tablasTrabajo tablas
Trabajo tablas
 

Más de oip2007 (8)

TRABAJO INFORMATICvsjjsjsjsjjsjsA 10C.pptx
TRABAJO INFORMATICvsjjsjsjsjjsjsA 10C.pptxTRABAJO INFORMATICvsjjsjsjsjjsjsA 10C.pptx
TRABAJO INFORMATICvsjjsjsjsjjsjsA 10C.pptx
 
Formato exceiuuooioil inter 1590151
Formato exceiuuooioil inter 1590151Formato exceiuuooioil inter 1590151
Formato exceiuuooioil inter 1590151
 
tics comfenalco
tics comfenalcotics comfenalco
tics comfenalco
 
Taller de recuperacion sql 120 consultas
Taller de recuperacion sql 120 consultasTaller de recuperacion sql 120 consultas
Taller de recuperacion sql 120 consultas
 
las redes sociales
las redes socialeslas redes sociales
las redes sociales
 
Creactividad en los juegos
Creactividad en los juegosCreactividad en los juegos
Creactividad en los juegos
 
CREATIVIDAD
CREATIVIDADCREATIVIDAD
CREATIVIDAD
 
Material de entrevistas
Material de entrevistasMaterial de entrevistas
Material de entrevistas
 

Último

140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
ilvrosiebp
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
Leo Florez
 

Último (20)

Introduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxIntroduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptx
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
 
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
Anexo Nivel 3 Ficha Lectura pptjsbdkks
Anexo  Nivel 3 Ficha  Lectura pptjsbdkksAnexo  Nivel 3 Ficha  Lectura pptjsbdkks
Anexo Nivel 3 Ficha Lectura pptjsbdkks
 
Fundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principalesFundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principales
 
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxDISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
 
Manual de Construcción TATAMI - 2024.pdf
Manual de Construcción TATAMI - 2024.pdfManual de Construcción TATAMI - 2024.pdf
Manual de Construcción TATAMI - 2024.pdf
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
 
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusaArte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusa
 
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxSESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
 

Tablasbdjdjdjdndndjdjdjdjdkdkdk en html.ppt

  • 2. MERG 2 TABLAS  <TABLE>Es la etiqueta que engloba a todas las demás. <TABLE> (resto de etiquetas) </TABLE>  <TR> (Table Row). Ocupa el siguiente nivel dentro de la confección de una tabla. Se utilizan para formar cada una de las filas (row) que queramos obtener. Se repetirán tantas veces como filas necesitemos en la tabla. Las etiquetas son: <TR> (Conntenido de la fila) </TR>
  • 3. MERG 3  <TD> (Table Data). En el último nivel, dentro de las anteriores, tenemos las etiquetas de cada celda, que son <TD> y </TD>, y que engloban el contenido de cada celda concreta (texto, imágenes, enlaces, etc.). Debemos repetirlas tantas veces como celdas queramos que haya en esa fila.
  • 4. MERG 4 Opciones de <TABLE>  ALIGN=“CENTER” |”RIGHT”|”LEFT”  BGCOLOR=“RRGGBB”  BORDER=“Ancho Borde en puntos”  BORDERCOLOR=“RRGGBB”  CELLSPACING=“espacio entre celdas en puntos”  CELLPADDING=“espacio entre el texto u objeto y el borde de la celda”  COLS=“Número de columnas”  WIDTH=“Cantidad en puntos” | “porcentaje (ejm 50%)”  Otras: HEIGHT, HSPACE, VSPACE
  • 5. MERG 5 Opciones de <TD>  WIDTH=”VALOR” | “PORCENTAJE”  ALIGN=“LEFT”|”RIGHT”|”CENTER”  VALIGN=“TOP”|”MIDDLE”|”BOTTOM”  BGCOLOR=“RRGGBB"  Otras opciones:  COLSPAN  ROWSPAN  Investigar para qué sirve la opción <TH> y que diferencia existe entre esta etiqueta y <TD>.  Investigar COLSPAN y ROWSPAN (arriba)
  • 6. MERG 6 Más ejemplos de tablas <TABLE border = 4 cellspacing = 4 cellpadding = 4 width =80%> <TH align = center>Buscadores <TH align = center colspan = 2>Otros Links <TR> <TD align = LEFT>Yahoo <TD align = LEFT>Microsoft <TD align = LEFT>IBM <TR> <TD align = LEFT>Infoseek <TD align = LEFT>Apple <TD align = LEFT>Digital </TABLE>
  • 7. MERG 7 <TABLE width="350" align="center" border="1"> <TR> <TH colspan="2">fila 1 celda 1 y 2 (colspan)</TH> <TH bgcolor="RED">fila 1 celda 3</TH> </TR> <TR> <TD>fila 2 celda 1</TD> <TD>fila 2 celda 2</TD> <TD rowspan="2" valign="Bottom">fila 2 y 3 celda 3 (rowspan)</TD> </TR> <TR> <TD align="right" BGCOLOR="yellow"> <font face="Arial" size=2>f 2 cel 1</font> </TD> <TD>fila 2 celda 2</TD> </TR> </TABLE>