tablas en html _informatica_mitzi_1b

17
TABLAS EN HTML MITZI MELINA GARCIA HERNANDEZ. PROF.AZUCENA CERVANTES INFORMATICA II 1B 28-05-15

Upload: mitzi-melina-garcia-hernandez

Post on 14-Aug-2015

141 views

Category:

Internet


2 download

TRANSCRIPT

Page 1: Tablas en html _informatica_mitzi_1b

TABLAS EN HTML

MITZI MELINA GARCIA HERNANDEZ.PROF.AZUCENA CERVANTES INFORMATICA II 1B 28-05-15

Page 2: Tablas en html _informatica_mitzi_1b

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?

Page 3: Tablas en html _informatica_mitzi_1b

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

Page 4: Tablas en html _informatica_mitzi_1b

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”?

Page 5: Tablas en html _informatica_mitzi_1b

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”?

Page 6: Tablas en html _informatica_mitzi_1b

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?

Page 7: Tablas en html _informatica_mitzi_1b

<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

Page 8: Tablas en html _informatica_mitzi_1b

para la unificación horizontal de celdas, utilizaremos el atributo de celda “colspan”.

COLSPAN

Page 9: Tablas en html _informatica_mitzi_1b

para la unificación vertical de celdas, utilizaremos el atributo de celda “rowspan”.

¿Qué es “rowspand?

Page 10: Tablas en html _informatica_mitzi_1b

Aplicación de COLSPAN Y ROWSPAN

Page 11: Tablas en html _informatica_mitzi_1b

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”?

Page 12: Tablas en html _informatica_mitzi_1b

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”?

Page 13: Tablas en html _informatica_mitzi_1b

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?

Page 14: Tablas en html _informatica_mitzi_1b
Page 15: 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?

Page 16: Tablas en html _informatica_mitzi_1b

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?

Page 17: Tablas en html _informatica_mitzi_1b

FORMATO APAConclase(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#Modosplatea(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&view=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=20070726132643AAQjAhu