SlideShare una empresa de Scribd logo
1 de 10
Tablas en HTML
Karina Sandoval Peña
Profa. Azucena Cervantes Ponce
Informática
29/Mayo/2015
Colegio Bucerias
Tablas en HTML
• Las tablas nos permiten representar y ordenar cualquier
elemento de nuestra presentación en diferentes filas y
columnas.
• Las tablas más sencillas de HTML se definen con tres
etiquetas: <table> para crear la tabla, <tr> para crear
cada fila y <td> para crear cada columna.
“tr”- “td”
• <tr> viene de table row que significa fila de la
tabla.
• <td> viene de table data que significa dato de
la tabla.
Borde Simple y Tabla Invisible
• El atributo border establece el grosor del borde de la
tabla. Si el valor es 0 o el atributo no está presente, los
navegadores no dibujan ni el borde exterior de la tabla ni
los bordes interiores de las celdas.
Colspan & Rowspan
• Colspan, indica el número de columnas que ocupará la
celda.
• Rowspan, indica el número de filas que ocupará la celda.
• Ejemplo:
CELLPADING-CELLSPACING
• Cellpading es la anchura del interior de la celda.
• Cellspacing es el espacio que va a haber entre
cada celda. Esto se usa cuando tiene un borde
doble.
Color de fondo en una tabla
• Para cambiar el color de fondo de una tabla se
debe de usar el siguiente código:
• <TABLE BGCOLOR="codigo de color">
• Para colocar una imagen de fondo de una tabla
se pone:
• <table width="630" border="2" align="center"
background=“url de la imagen”>
Imagen de fondo en una tabla
Alineación de texto
• Si quieres que el texto esté alineado a la
izquierda, no tienes que hacer nada, es la
alineación que se establece por defecto. <td
align="left">).
• Para alinear el texto en el centro: <td
align="center">.
• Para alinear el texto a la derecha: <td
align="right">.
FORMATO APA
• Libroweb( )Tablas
• Recuperado el 28/Mayo/2015
• De:http://librosweb.es/libro/xhtml/capitulo_7/tablas_basicas.html
• Htmlya( ) “tr”- “td”
• Recuperado el 28/Mayo/2015
• De:http://www.htmlya.com.ar/temarios/descripcion.php?cod=83&punto=19
• Mclibre(2015) Borde simple y tabla invisible
• Recuperado el 28/Mayo/2015
• De:http://www.mclibre.org/consultar/htmlcss/xhtml/xhtml_tablas_atributos.html
#atributo1
• Usabilidad(2015) Colspan y Rowspan
• Recuperado el 28/Mayo/2015
• De: http://www.usabilidad.tv/tutoriales_html/colspan_y_rowspan.asp
• Ccd.uab( ) Cellpading, Cellspacing
• Recuperado el 29/Mayo/2015
• De:http://ccd.uab.es/~sergi/manuals/html/tables/lesson07.html
• Mailxmail(2010) Color de fondo
• Recuperado el 29/Mayo/2015
• De: http://www.mailxmail.com/curso-html/color-fondo-tablas
• Roble.pntic(2006) Alineació´n de texto
• Recuperado el 29/Mayo/2015
• De: http://roble.pntic.mec.es/apuente/html/paginas/doce.htm

Más contenido relacionado

La actualidad más candente

Modelo entidad relación de base de datos
Modelo entidad relación de base de datosModelo entidad relación de base de datos
Modelo entidad relación de base de datos
ani_tuza
 
Normalizaciòn
NormalizaciònNormalizaciòn
Normalizaciòn
omarzon
 
Componentes de un sistema de base de datos
Componentes de un sistema de base de datosComponentes de un sistema de base de datos
Componentes de un sistema de base de datos
Isabel
 
programacion orientada a objetos
programacion orientada a objetosprogramacion orientada a objetos
programacion orientada a objetos
ale8819
 

La actualidad más candente (20)

Html (ppt)
Html (ppt)Html (ppt)
Html (ppt)
 
Listas, pilas y colas
Listas, pilas y colasListas, pilas y colas
Listas, pilas y colas
 
Modelo entidad relación de base de datos
Modelo entidad relación de base de datosModelo entidad relación de base de datos
Modelo entidad relación de base de datos
 
Tipos de listas en estructura de datos
Tipos de listas en estructura de datosTipos de listas en estructura de datos
Tipos de listas en estructura de datos
 
Programacion Orientada a Objetos
Programacion Orientada a ObjetosProgramacion Orientada a Objetos
Programacion Orientada a Objetos
 
Herramientas de Desarrollo de Software
Herramientas de Desarrollo de SoftwareHerramientas de Desarrollo de Software
Herramientas de Desarrollo de Software
 
Normalizaciòn
NormalizaciònNormalizaciòn
Normalizaciòn
 
Importancia de la implementación de las listas para la estructura de datos
Importancia de la implementación de las listas para la estructura de datosImportancia de la implementación de las listas para la estructura de datos
Importancia de la implementación de las listas para la estructura de datos
 
Modelo Entidad Relacion E-R
Modelo Entidad Relacion E-RModelo Entidad Relacion E-R
Modelo Entidad Relacion E-R
 
Estructuras condicionales
Estructuras condicionalesEstructuras condicionales
Estructuras condicionales
 
Manual de Uso PseInt
Manual de Uso PseIntManual de Uso PseInt
Manual de Uso PseInt
 
Componentes de un sistema de base de datos
Componentes de un sistema de base de datosComponentes de un sistema de base de datos
Componentes de un sistema de base de datos
 
Listado etiquetas html 5
Listado etiquetas html 5Listado etiquetas html 5
Listado etiquetas html 5
 
programacion orientada a objetos
programacion orientada a objetosprogramacion orientada a objetos
programacion orientada a objetos
 
Get & post
Get & postGet & post
Get & post
 
Modelo entidad
Modelo entidadModelo entidad
Modelo entidad
 
Pseudocodigo.pptx
Pseudocodigo.pptxPseudocodigo.pptx
Pseudocodigo.pptx
 
Modelo Entidad Relación
Modelo Entidad RelaciónModelo Entidad Relación
Modelo Entidad Relación
 
ELEMENTOS PARA INTERPRETAR EL MODELO CONCEPTUAL DE DATOS
ELEMENTOS PARA INTERPRETAR EL MODELO CONCEPTUAL DE DATOSELEMENTOS PARA INTERPRETAR EL MODELO CONCEPTUAL DE DATOS
ELEMENTOS PARA INTERPRETAR EL MODELO CONCEPTUAL DE DATOS
 
Modelo Entidad Relación
Modelo Entidad RelaciónModelo Entidad Relación
Modelo Entidad Relación
 

Destacado

النهاية في الفتن والملاحم لابن كثير
النهاية في الفتن والملاحم لابن كثيرالنهاية في الفتن والملاحم لابن كثير
النهاية في الفتن والملاحم لابن كثير
wayislam
 
Document type definition
Document type definitionDocument type definition
Document type definition
Raghu nath
 
Hyperlinks in HTML
Hyperlinks in HTMLHyperlinks in HTML
Hyperlinks in HTML
Aarti P
 
CSS-Cascading Style Sheets - Introduction
CSS-Cascading Style Sheets - IntroductionCSS-Cascading Style Sheets - Introduction
CSS-Cascading Style Sheets - Introduction
Mukesh Tekwani
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
vikasgaur31
 

Destacado (20)

النهاية في الفتن والملاحم لابن كثير
النهاية في الفتن والملاحم لابن كثيرالنهاية في الفتن والملاحم لابن كثير
النهاية في الفتن والملاحم لابن كثير
 
Document type definition
Document type definitionDocument type definition
Document type definition
 
HTML Link - Image - Comments
HTML  Link - Image - CommentsHTML  Link - Image - Comments
HTML Link - Image - Comments
 
Hyperlinks in HTML
Hyperlinks in HTMLHyperlinks in HTML
Hyperlinks in HTML
 
XML Schema
XML SchemaXML Schema
XML Schema
 
XML Document Object Model (DOM)
XML Document Object Model (DOM)XML Document Object Model (DOM)
XML Document Object Model (DOM)
 
CSS-Cascading Style Sheets - Introduction
CSS-Cascading Style Sheets - IntroductionCSS-Cascading Style Sheets - Introduction
CSS-Cascading Style Sheets - Introduction
 
Html table tags
Html table tagsHtml table tags
Html table tags
 
XML and DTD
XML and DTDXML and DTD
XML and DTD
 
XML, DTD & XSD Overview
XML, DTD & XSD OverviewXML, DTD & XSD Overview
XML, DTD & XSD Overview
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
 
Images and Lists in HTML
Images and Lists in HTMLImages and Lists in HTML
Images and Lists in HTML
 
Css Ppt
Css PptCss Ppt
Css Ppt
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
 
Documentation Types
Documentation TypesDocumentation Types
Documentation Types
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
Difference between dtd and xsd
Difference between dtd and xsdDifference between dtd and xsd
Difference between dtd and xsd
 

Similar a Tablas html

Colegio nacional nicoles esguerra
Colegio nacional nicoles esguerraColegio nacional nicoles esguerra
Colegio nacional nicoles esguerra
Monsalve Sergio
 
Info p1 b_exce15_andrea salgado
Info p1 b_exce15_andrea salgadoInfo p1 b_exce15_andrea salgado
Info p1 b_exce15_andrea salgado
gandyforlife
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
Mateo Remolina
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
Mateo Torres
 

Similar a Tablas html (20)

Htmlexc15 unidad 3 html_mayrafranco
Htmlexc15 unidad 3 html_mayrafrancoHtmlexc15 unidad 3 html_mayrafranco
Htmlexc15 unidad 3 html_mayrafranco
 
Factores de HTML_Andrea Sofia
Factores de HTML_Andrea SofiaFactores de HTML_Andrea Sofia
Factores de HTML_Andrea Sofia
 
Inf2 p1 a_danna gd
Inf2 p1 a_danna gdInf2 p1 a_danna gd
Inf2 p1 a_danna gd
 
Trabajo tablas
Trabajo tablasTrabajo tablas
Trabajo tablas
 
Colegio nacional nicoles esguerra
Colegio nacional nicoles esguerraColegio nacional nicoles esguerra
Colegio nacional nicoles esguerra
 
Inf2 p1b exc15_celin_valenzuela
Inf2 p1b exc15_celin_valenzuelaInf2 p1b exc15_celin_valenzuela
Inf2 p1b exc15_celin_valenzuela
 
Web 5
Web 5Web 5
Web 5
 
Info p1 b_exce15_andrea salgado
Info p1 b_exce15_andrea salgadoInfo p1 b_exce15_andrea salgado
Info p1 b_exce15_andrea salgado
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Codigo de tab
Codigo de tabCodigo de tab
Codigo de tab
 
Olivarko
OlivarkoOlivarko
Olivarko
 
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
 
HTML_Tablas en lenguaje HTML y CSS3 dinamicos
HTML_Tablas en lenguaje HTML y CSS3 dinamicosHTML_Tablas en lenguaje HTML y CSS3 dinamicos
HTML_Tablas en lenguaje HTML y CSS3 dinamicos
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
CODIGOS HTML
CODIGOS HTMLCODIGOS HTML
CODIGOS HTML
 
Trabajo 6
Trabajo 6Trabajo 6
Trabajo 6
 
Trabajo 5
Trabajo 5Trabajo 5
Trabajo 5
 
Html
HtmlHtml
Html
 
Tablas en html _informatica_mitzi_1b
Tablas en html _informatica_mitzi_1bTablas en html _informatica_mitzi_1b
Tablas en html _informatica_mitzi_1b
 

Último

QUINTA SEXTA GENERACION de COMPUTADORAS
QUINTA  SEXTA GENERACION de COMPUTADORASQUINTA  SEXTA GENERACION de COMPUTADORAS
QUINTA SEXTA GENERACION de COMPUTADORAS
Marc Liust
 
Editorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdfEditorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdf
Yanitza28
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
nicho110
 

Último (18)

QUINTA SEXTA GENERACION de COMPUTADORAS
QUINTA  SEXTA GENERACION de COMPUTADORASQUINTA  SEXTA GENERACION de COMPUTADORAS
QUINTA SEXTA GENERACION de COMPUTADORAS
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
Editorial. Grupo de 12B. La Salle Margarita.pdf
Editorial. Grupo de 12B. La Salle Margarita.pdfEditorial. Grupo de 12B. La Salle Margarita.pdf
Editorial. Grupo de 12B. La Salle Margarita.pdf
 
Editorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdfEditorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdf
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdf
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdfpresentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdf
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdf
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
Función del analizador léxico.pdf presentacion
Función del analizador léxico.pdf presentacionFunción del analizador léxico.pdf presentacion
Función del analizador léxico.pdf presentacion
 
infor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptx
infor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptxinfor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptx
infor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptx
 
2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendida
2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendida2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendida
2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendida
 
10°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-810°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-8
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptx
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
AVANCES TECNOLOGICOS DEL SIGLO XXI. 10-08..pptx
AVANCES TECNOLOGICOS  DEL SIGLO XXI. 10-08..pptxAVANCES TECNOLOGICOS  DEL SIGLO XXI. 10-08..pptx
AVANCES TECNOLOGICOS DEL SIGLO XXI. 10-08..pptx
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXI
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
 
Guia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosGuia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos Basicos
 
presentación del desensamble y ensamble del equipo de computo en base a las n...
presentación del desensamble y ensamble del equipo de computo en base a las n...presentación del desensamble y ensamble del equipo de computo en base a las n...
presentación del desensamble y ensamble del equipo de computo en base a las n...
 

Tablas html

  • 1. Tablas en HTML Karina Sandoval Peña Profa. Azucena Cervantes Ponce Informática 29/Mayo/2015 Colegio Bucerias
  • 2. Tablas en HTML • Las tablas nos permiten representar y ordenar cualquier elemento de nuestra presentación en diferentes filas y columnas. • Las tablas más sencillas de HTML se definen con tres etiquetas: <table> para crear la tabla, <tr> para crear cada fila y <td> para crear cada columna.
  • 3. “tr”- “td” • <tr> viene de table row que significa fila de la tabla. • <td> viene de table data que significa dato de la tabla.
  • 4. Borde Simple y Tabla Invisible • El atributo border establece el grosor del borde de la tabla. Si el valor es 0 o el atributo no está presente, los navegadores no dibujan ni el borde exterior de la tabla ni los bordes interiores de las celdas.
  • 5. Colspan & Rowspan • Colspan, indica el número de columnas que ocupará la celda. • Rowspan, indica el número de filas que ocupará la celda. • Ejemplo:
  • 6. CELLPADING-CELLSPACING • Cellpading es la anchura del interior de la celda. • Cellspacing es el espacio que va a haber entre cada celda. Esto se usa cuando tiene un borde doble.
  • 7. Color de fondo en una tabla • Para cambiar el color de fondo de una tabla se debe de usar el siguiente código: • <TABLE BGCOLOR="codigo de color"> • Para colocar una imagen de fondo de una tabla se pone: • <table width="630" border="2" align="center" background=“url de la imagen”> Imagen de fondo en una tabla
  • 8. Alineación de texto • Si quieres que el texto esté alineado a la izquierda, no tienes que hacer nada, es la alineación que se establece por defecto. <td align="left">). • Para alinear el texto en el centro: <td align="center">. • Para alinear el texto a la derecha: <td align="right">.
  • 9. FORMATO APA • Libroweb( )Tablas • Recuperado el 28/Mayo/2015 • De:http://librosweb.es/libro/xhtml/capitulo_7/tablas_basicas.html • Htmlya( ) “tr”- “td” • Recuperado el 28/Mayo/2015 • De:http://www.htmlya.com.ar/temarios/descripcion.php?cod=83&punto=19 • Mclibre(2015) Borde simple y tabla invisible • Recuperado el 28/Mayo/2015 • De:http://www.mclibre.org/consultar/htmlcss/xhtml/xhtml_tablas_atributos.html #atributo1 • Usabilidad(2015) Colspan y Rowspan • Recuperado el 28/Mayo/2015 • De: http://www.usabilidad.tv/tutoriales_html/colspan_y_rowspan.asp
  • 10. • Ccd.uab( ) Cellpading, Cellspacing • Recuperado el 29/Mayo/2015 • De:http://ccd.uab.es/~sergi/manuals/html/tables/lesson07.html • Mailxmail(2010) Color de fondo • Recuperado el 29/Mayo/2015 • De: http://www.mailxmail.com/curso-html/color-fondo-tablas • Roble.pntic(2006) Alineació´n de texto • Recuperado el 29/Mayo/2015 • De: http://roble.pntic.mec.es/apuente/html/paginas/doce.htm