Herramientas de html (Tablas)

2. TEMAS O TEMARIO
1-QUE ES UNA TABLA DE CODIGO HTML
2-QUE SIGNIFICA TR EN HTML?
3-QUE SIGNIFICA TD?
4-COMO INSERTAS UN SIMPLE BORDE EN UNA TABLA DE HTML
5-ESCRIBE EL CÓDIGO PARA COLOCAR UNA TABLA INVISIBLE
6-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?

4. EJEMPLOS
<TABLE WIDTH=500>
</TABLE>
<TABLE WIDTH=50%>
</TABLE>
•

5. 2-QUE SIGNIFICA TR EN HTML?
Una tabla básica
Las 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 siguiente
El resultado no es muy brillante, pero vamos a ir viendo las distintas
posibilidades que tenemos para mejorarlo.

6. 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

7. 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

8. 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 2
celda 3

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

10. A
B
C
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í:

11. 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").

12. EJEMPLOS
A
B
C
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í:

13. 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.

14. 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.

15. 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?

16. 12-Como Insertas una imagen de fondo en una tabla?

17. 12-Como Insertas una imagen de
fondo en una tabla?
11-Como insertas color de fondo en
una celda de una tabla?

18. <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?

19. 13-COMO ALINEAS EL CONTENIDO DE TU TABLA?

20. FORMATO APA
• HTTP://BOBUU.BLOGSPOT.COM/2010/09/83-HTML-TABLAS-
ATRIBUTOS-CELLSPACING-Y.HTML
RECUPERADO POR ALONSO DUEÑAS 27-05-2015
LUNES, 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_TA
BLAS_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.HTML
RECUPERADO POR ALONSO DUEÑAS FLETES 26-05-2015
• HTTP://HTML.HAZUNAWEB.COM/116.PHP
• RECUPERADO POR ALONSO DUEÑAS FLETES
27-05-2015
• HTTP://JCAROCOTA.TRIPOD.COM/COLSPAN.HTML
RECUPERADO POR ALONSO DUEÑAS 27-05-2015