SlideShare una empresa de Scribd logo
TABLAS EN HTML
MITZI MELINAGARCIA HERNANDEZ.
PROF.AZUCENACERVANTES
INFORMATICA II 1B
28-05-15
El modelo de tablas de HTML permite a los autores organizar datos -- textos,
texto preformateado, imágenes, vínculos, formularios, campos de
formularios, otras tablas, etc. -- en filas y en columnas de celdas.
Cada tabla puede tener un título asociado que proporciona una descripción
corta del propósito de de la tabla. Se puede proporcionar también una
descripción más larga para el provecho de las personas que utilicen agentes
de usuario basados en Braille o en voz.
QUE ES UNA TABLA EN HTML?
Las filas de una tabla pueden agruparse en secciones de encabezado, pie y
cuerpo. Los autores también pueden agrupar columnas para proporcionar
información estructural adicional de la que pueden sacar partido los
agentes de usuario. Las celdas pueden ocupar varias filas y columnas.
DENTRO DE LA TABLA
La etiqueta <tr> se utiliza para definir una fila dentro de una
tabla.Este elemento puede contener una o más etiquetas <th> o
<td>.
¿Qué significa “tr”?
La etiqueta <td> define una celda que contiene datos dentro de una tabla.
El texto de esta celda se representa en tamaño regular y alineado a la
izquierda.
¿Qué significa “td”?
las tablas tienen dos modos de presentacion de los bordes que se
selecciona con la propiedad border-collapse: separado (separate) y
colapsado (collapse). en el modo eparado existe un hueco entre los
bordes cada lda, mientras que en el modo colapsao los bordes se
superponen. los navegadores aplican el modo separado.
¿Cómo insertas un simple borde
en tu tabla?
<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)
<TD> y </TD> señalan una celda.
TABLA INVISIBLE
para la unificación horizontal de celdas, utilizaremos el atributo
de celda “colspan”.
COLSPAN
para la unificación vertical de celdas, utilizaremos
el atributo de celda “rowspan”.
¿Qué es “rowspand?
Aplicación de COLSPAN Y ROWSPAN
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.
¿Qué es “cellspacing”?
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.
¿Qué es “cell spacing”?
Para cambiar del color de fondo, basta con escribir la
directiva BGCOLOR dentro del elemento que de la tabla
que se desee cambiar.
Para cambiar el color a la tabla
<TABLE BGCOLOR="codigo de color">
Para cambiar el color a la fila
<TR BGCOLOR="codigo de color">
¿Cómo insertas color de fondo en
una celda de una tabla?
Tablas en html _informatica_mitzi_1b
Para colocar una imagen defondo en tu tabla
simplemente se utiliza BACKGROUN dentro de
la etiqueta <table ….>
¿Cómo insertas una imagen de
fondo en una tabla?
Para alinear el texto se utiliza align
dentro de la etiqueta <td>
Ejemplo; <td align=“center”> </td>
¿cómo alineas el contenido de
tu tabla?
FORMATO APA
Conclase(2014)tabla html,recuperado el 28-05-15 en :
http://html.conclase.net/w3c/html401-es/struct/tables.html#h-11.1
virtual(2014)que es tr,recuperado el 28-05-15 en :
http://www.virtualnauta.com/html-etiqueta-tr
Conclase(2014)tabla html,recuperado el 28-05-15 en :
http://www.mclibre.org/consultar/amaya/css/css_tablas_modos_
bordes.html#Modos
platea(2014)guia html tabla,recuperado el 28-05-15 en :
http://platea.pntic.mec.es/~abercian/guiahtml/tablas.htm
Aprender a programar (2014)colocar img en tabla,recuperado el 28-05-
15 en :
http://aprenderaprogramar.com/index.php?option=com_content&vie
w=article&id=516:crear-tablas-html-colspan-y-rowspan-unir-celdas-
horizontal-y-vertical-tr-td-th-caption-o-titulo-
cu00719b&catid=69:tutorial-basico-programador-web-html-desde-
cero&Itemid=192
yahoo(2014)alineacion texto tabla,recuperado el 28-05-15 en :
https://mx.answers.yahoo.com/question/index?qid=2007072613264
3AAQjAhu

Más contenido relacionado

PPTX
Tablas En Html
PPTX
Unidad #3
DOCX
Olivarko
PDF
Trabajo 5
PPT
Diapositivas Html
PDF
12tablas
PPT
Diapositivashtml 091118065750 Phpapp02
DOCX
Web3
Tablas En Html
Unidad #3
Olivarko
Trabajo 5
Diapositivas Html
12tablas
Diapositivashtml 091118065750 Phpapp02
Web3

La actualidad más candente (19)

DOCX
Colegio nicolas esguerraa
DOCX
Colegio nicolas esguerra
DOCX
Las filas - html
DOCX
Colegio nacional nicoles esguerra
DOCX
Trabajo tablas
PPTX
Creación de tablas en HTML
PPTX
EXPOSICIÓN TABKAS
PDF
Una tabla..
PDF
Una tabla..
DOCX
DOCX
Pagina web v
DOCX
Indes.html
DOCX
PDF
Access Andrea - Brigitte
PPTX
Inf2 exc15 p1a_adilene
DOCX
ODP
Etiquetas HTML
DOC
Buenas prácticas en la codificación html
PPTX
Estilos css para aplicarlos en los elementos HTML
Colegio nicolas esguerraa
Colegio nicolas esguerra
Las filas - html
Colegio nacional nicoles esguerra
Trabajo tablas
Creación de tablas en HTML
EXPOSICIÓN TABKAS
Una tabla..
Una tabla..
Pagina web v
Indes.html
Access Andrea - Brigitte
Inf2 exc15 p1a_adilene
Etiquetas HTML
Buenas prácticas en la codificación html
Estilos css para aplicarlos en los elementos HTML
Publicidad

Destacado (11)

PPT
Partes de ventana de access
PDF
Guia 5 de html tablas
PPTX
Situación Significativa
PPTX
Ejemplo de situación significativa 2015
PDF
SITUACIONES DE CONTEXTO SIGNIFICATIVA
PPTX
Como se elabora una situacion significativa
PPT
Ejemplo situaciones-significativas-contexto-diversas
PPT
Material situaciones significativas del contexto copia
PDF
Situaciones significativas
PPTX
Situación significativa de la sesión de aprendizaje
PPTX
Tablas de HTML
Partes de ventana de access
Guia 5 de html tablas
Situación Significativa
Ejemplo de situación significativa 2015
SITUACIONES DE CONTEXTO SIGNIFICATIVA
Como se elabora una situacion significativa
Ejemplo situaciones-significativas-contexto-diversas
Material situaciones significativas del contexto copia
Situaciones significativas
Situación significativa de la sesión de aprendizaje
Tablas de HTML
Publicidad

Similar a Tablas en html _informatica_mitzi_1b (20)

PPTX
CODIGOS HTML
PPTX
PPTX
Unidad #3
PDF
Factores de HTML_Andrea Sofia
PPTX
Codigo de tab
PPTX
HTML_Tablas en lenguaje HTML y CSS3 dinamicos
PPTX
HTML_Tablas para la creacion de tablas.pptx
PPTX
Inf2 p1b exc15_celin_valenzuela
PPTX
Etiquetas para tablas y sus propiedades
DOCX
Colegio nacional nicolas esguerra
DOCX
Pagina web v
PPTX
Inf2 exc15 p1_a_unidad 3_html_fridaleyva
PPTX
Inf2 exc15 p1_a_unidad 3_html_fridaleyva
PPT
Diapositivas Html
PPTX
Tablas en html
PDF
Act 03 - Tablas HTML Y CSS PARA PREGRADO.pdf
PPTX
Act 03 - Tablas en html para pregrado.pptx
DOCX
Colegio nacional nicolas esguerra
DOCX
Trabajo 3
CODIGOS HTML
Unidad #3
Factores de HTML_Andrea Sofia
Codigo de tab
HTML_Tablas en lenguaje HTML y CSS3 dinamicos
HTML_Tablas para la creacion de tablas.pptx
Inf2 p1b exc15_celin_valenzuela
Etiquetas para tablas y sus propiedades
Colegio nacional nicolas esguerra
Pagina web v
Inf2 exc15 p1_a_unidad 3_html_fridaleyva
Inf2 exc15 p1_a_unidad 3_html_fridaleyva
Diapositivas Html
Tablas en html
Act 03 - Tablas HTML Y CSS PARA PREGRADO.pdf
Act 03 - Tablas en html para pregrado.pptx
Colegio nacional nicolas esguerra
Trabajo 3

Último (15)

PPTX
Qué es Google Classroom Insertar SlideShare U 6.pptx
PDF
LA INTELIGENCIA ARTIFICAL SU HISTORIA Y EL FUTURO
PPTX
Presentación de un estudio de empresa pp
PPTX
presentacion_energias_renovables_renovable_.pptx
PDF
Herramientaa de google google keep, maps.pdf
PDF
[Ebook gratuito] Introducción a la IA Generativa, Instalación y Configuración...
PPTX
FUNCIONES DE CLASSROOM EN EL FUNCIONAMIENTO ESCOLAR
PPTX
Plantilla-Hardware-Informático-oficce.pptx
PPT
laser seguridad a la salud humana de piel y vision en laser clase 4
PPTX
tema-2-interes-.pptx44444444444444444444
PDF
CAPACITACIÓN MIPIG - MODELO INTEGRADO DE PLANEACIÓN Y GESTIÓN
PDF
Frases de Fidel Castro. Compilación Norelys Morales Aguilera
PPTX
Evolución de la computadora ACTUALMENTE.pptx
PPTX
Guia de power bi de cero a avanzado detallado
PDF
Mesopotamia y Egipto.pptx.pdf historia universal
Qué es Google Classroom Insertar SlideShare U 6.pptx
LA INTELIGENCIA ARTIFICAL SU HISTORIA Y EL FUTURO
Presentación de un estudio de empresa pp
presentacion_energias_renovables_renovable_.pptx
Herramientaa de google google keep, maps.pdf
[Ebook gratuito] Introducción a la IA Generativa, Instalación y Configuración...
FUNCIONES DE CLASSROOM EN EL FUNCIONAMIENTO ESCOLAR
Plantilla-Hardware-Informático-oficce.pptx
laser seguridad a la salud humana de piel y vision en laser clase 4
tema-2-interes-.pptx44444444444444444444
CAPACITACIÓN MIPIG - MODELO INTEGRADO DE PLANEACIÓN Y GESTIÓN
Frases de Fidel Castro. Compilación Norelys Morales Aguilera
Evolución de la computadora ACTUALMENTE.pptx
Guia de power bi de cero a avanzado detallado
Mesopotamia y Egipto.pptx.pdf historia universal

Tablas en html _informatica_mitzi_1b

  • 1. TABLAS EN HTML MITZI MELINAGARCIA HERNANDEZ. PROF.AZUCENACERVANTES INFORMATICA II 1B 28-05-15
  • 2. El modelo de tablas de HTML permite a los autores organizar datos -- textos, texto preformateado, imágenes, vínculos, formularios, campos de formularios, otras tablas, etc. -- en filas y en columnas de celdas. Cada tabla puede tener un título asociado que proporciona una descripción corta del propósito de de la tabla. Se puede proporcionar también una descripción más larga para el provecho de las personas que utilicen agentes de usuario basados en Braille o en voz. QUE ES UNA TABLA EN HTML?
  • 3. Las filas de una tabla pueden agruparse en secciones de encabezado, pie y cuerpo. Los autores también pueden agrupar columnas para proporcionar información estructural adicional de la que pueden sacar partido los agentes de usuario. Las celdas pueden ocupar varias filas y columnas. DENTRO DE LA TABLA
  • 4. La etiqueta <tr> se utiliza para definir una fila dentro de una tabla.Este elemento puede contener una o más etiquetas <th> o <td>. ¿Qué significa “tr”?
  • 5. La etiqueta <td> define una celda que contiene datos dentro de una tabla. El texto de esta celda se representa en tamaño regular y alineado a la izquierda. ¿Qué significa “td”?
  • 6. las tablas tienen dos modos de presentacion de los bordes que se selecciona con la propiedad border-collapse: separado (separate) y colapsado (collapse). en el modo eparado existe un hueco entre los bordes cada lda, mientras que en el modo colapsao los bordes se superponen. los navegadores aplican el modo separado. ¿Cómo insertas un simple borde en tu tabla?
  • 7. <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) <TD> y </TD> señalan una celda. TABLA INVISIBLE
  • 8. para la unificación horizontal de celdas, utilizaremos el atributo de celda “colspan”. COLSPAN
  • 9. para la unificación vertical de celdas, utilizaremos el atributo de celda “rowspan”. ¿Qué es “rowspand?
  • 11. 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. ¿Qué es “cellspacing”?
  • 12. 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. ¿Qué es “cell spacing”?
  • 13. Para cambiar del color de fondo, basta con escribir la directiva BGCOLOR dentro del elemento que de la tabla que se desee cambiar. Para cambiar el color a la tabla <TABLE BGCOLOR="codigo de color"> Para cambiar el color a la fila <TR BGCOLOR="codigo de color"> ¿Cómo insertas color de fondo en una celda de una tabla?
  • 15. Para colocar una imagen defondo en tu tabla simplemente se utiliza BACKGROUN dentro de la etiqueta <table ….> ¿Cómo insertas una imagen de fondo en una tabla?
  • 16. Para alinear el texto se utiliza align dentro de la etiqueta <td> Ejemplo; <td align=“center”> </td> ¿cómo alineas el contenido de tu tabla?
  • 17. FORMATO APA Conclase(2014)tabla html,recuperado el 28-05-15 en : http://html.conclase.net/w3c/html401-es/struct/tables.html#h-11.1 virtual(2014)que es tr,recuperado el 28-05-15 en : http://www.virtualnauta.com/html-etiqueta-tr Conclase(2014)tabla html,recuperado el 28-05-15 en : http://www.mclibre.org/consultar/amaya/css/css_tablas_modos_ bordes.html#Modos platea(2014)guia html tabla,recuperado el 28-05-15 en : http://platea.pntic.mec.es/~abercian/guiahtml/tablas.htm Aprender a programar (2014)colocar img en tabla,recuperado el 28-05- 15 en : http://aprenderaprogramar.com/index.php?option=com_content&vie w=article&id=516:crear-tablas-html-colspan-y-rowspan-unir-celdas- horizontal-y-vertical-tr-td-th-caption-o-titulo- cu00719b&catid=69:tutorial-basico-programador-web-html-desde- cero&Itemid=192 yahoo(2014)alineacion texto tabla,recuperado el 28-05-15 en : https://mx.answers.yahoo.com/question/index?qid=2007072613264 3AAQjAhu