Herramientas de htmlALONSO DUEÑAS FLETES

MAESTRA AZUCENA PONCECOLEGIO BUCERIAS

PREPA 1 A26-08-2015

TEMAS O TEMARIO

1-QUE ES UNA TABLA DE CODIGO HTML2-QUE SIGNIFICA TR EN HTML?3-QUE SIGNIFICA TD?4-COMO INSERTAS UN SIMPLE BORDE EN UNA TABLA DE HTML5-ESCRIBE EL CÓDIGO PARA COLOCAR UNA TABLA INVISIBLE6-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?

LAS TABLAS SON UN PODEROSA HERRAMIENTA A LA HORA DE MOSTRAR Y RELACIONAR CIERTO TIPO DE INFORMACIÓN. AÚN CUANDO MUCHOS SITIOS SON CONSTRUIDOS (POR SU NATURALEZA) SIN USAR UNA SIMPLE TABLA, EXISTEN ALGUNAS OCASIONES EN QUE EL VALOR DE LAS TABLAS SE VUELVE ESENCIAL.

EN LAS PRÓXIMAS LÍNEAS INTENTAREMOS CUBRIR TODAS LAS CARACTERÍSTICAS DE LAS TABLAS PARA ESTAR LISTOS PARA UTILIZARLAS CUANDO SE NECESITE.

ENTONCES, UNA TABLA SIMPLE PUEDE SER INSERTADA EN UN DOCUMENTO HTML USANDO TRES ELEMENTOS: EL ELEMENTO HTML TABLE (ESTRUCTURA CONTENEDORA PRINCIPAL), EL ELEMENTO HTML TR (CONTENEDOR DE FILA) Y EL ELEMENTO HTML TD (CELDA).

EJEMPLOS <TABLE WIDTH=500></TABLE><TABLE WIDTH=50%></TABLE>

• Código

• <table>

• <tr>

• <td>Celda 1</td>

• <td>Celda 2</td>

• <td>Celda 3</td>

• </tr>

• <tr>

• <td>Celda 4</td>

• <td>Celda 5</td>

• <td>Celda 6</td>

• </tr>

• </table>

• Vista

• Celda 1 Celda 2 Celda 3

• Celda 4 Celda 5 Celda 6•

2-QUE SIGNIFICA TR EN HTML?

Una tabla básicaLas 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 siguienteEl 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 2celda 3

EJEMPLO DE COLUMNA EXPANDIDA <COLSPAN>ITEM 1 ITEM 2ITEM 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?

ABC

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

ABC

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-2015LUNES, 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_TABLAS_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.HTMLRECUPERADO POR ALONSO DUEÑAS FLETES 26-05-2015

• HTTP://HTML.HAZUNAWEB.COM/116.PHP

• RECUPERADO POR ALONSO DUEÑAS FLETES27-05-2015

• HTTP://JCAROCOTA.TRIPOD.COM/COLSPAN.HTMLRECUPERADO POR ALONSO DUEÑAS 27-05-2015