CAPITULO 7

1. CAPITULO 7 TABLAS

2. EL COMANDO <TABLE> • Para comenzar veamos la estructura básica de una tabla <TABLE> <TR><TD>Celda 1.1 </TD><TD>Celda 1.2</TD></TR> <TR><TD>Celda 2.1</TD><TD>Celda 2.2</TD></TR> Lo cual presentaría un aspecto como :Celda 1.1Celda 1.2 Celda 2.1Celda 2.2

3. Fácilmente se observa que para realizar una tabla hemos de utilizar el comando <TABLE> para indicar su comienzo y </TABLE> para indicar su fin. • Dentro de lo que es la estructura de la tabla se puede observar el uso de dos comandos : <TR></TR> Se utiliza para indicar el comienzo y fin de una fila respectivamente. <TD> o <TH> y </TD> o </TH> Ambas se utilizan para indicar el comienzo y fin de una columna respectivamente. Las diferencias entre una y otra son : <TD></TD> Son conocidas como celdas de datos y son celdas estándar. Han de aparecer siempre entre <TR> y </TR>, es decir, en filas. Dentro de cada celda se puede introducir cualquier elemento HTML tanto texto como imágenes.

4. <TH></TH> Son conocidas como celdas de cabecera y son idénticas a las anteriores, la diferencia radica en que utilizan fuentes en negrita y que tienen la opción ALING= center por defecto. • Para poner titulo a la tabla utilizaremos el comando <CAPTION> para comenzar y </CAPTION> para terminarla, poniendo en medio el texto deseado. Este comando se utilizara después de abrir el comando <TABLE>, y también podremos darles atributos de posición con el comando <ALING=top | bottom>.

5. ATRIBUTOS QUE AFECTAN LA TABLA • NOFLOW Impide que pueda haber texto alrededor de la tabla. • COLSPEC= “lista” Lista con valores de anchura y alineamiento para cada columna EJEMPLO COLSPEC=“Ln, Cn, Rn, Jn” Ln Left n unidades. Cn Center n unidades Rn Rigth n unidades Jn Justify n unidades

6. UNITS = en | pixel | relative En Mitad del tamaño de un punto. Pixel Utiliza pixels como unidades. Relative Indica un % del ancho de la pantalla. WIDTH = n Indica la anchura de la tabla, también se puede utilizar la n como % relativo a la anchura del documento. HEIGHT = n Indica la altura de la tabla. NOWRAP Indica al lector de paginas que no parta automáticamente la pantalla cuando quepan en ellas las líneas de texto (se utiliza el comando <BR>) BORDER=n Establece el ancho del borde de la tabla, donde n es el ancho. CELLSPACING = n Espacio a dejar entere las celdas de la tabla. El valor por defecto es 2. CELLPADDING= n Espacio a dejar entre el borde de la tabla y el contenido de la misma. El valor por defecto es 1

7. ATRIBUTOS QUE AFECTAN A LAS FILAS Y CELDAS ALING= left | center | right | justify | char CHAR se utiliza para alinear el texto alrededor de un carácter especificado. CHAR= carácter sobre el que alineamos en la opción ALING de arriba. CHAROFF= longitud del offset al carácter de alineamiento VALING= top | middle | bottom | baseline BASELINE sigue la base de la 1ª línea de texto de cada celda. NOWRAP Se utiliza igual que el definido anteriormente, pero para celdas. COLSPAN = n Se utiliza para variar la anchura de una celda respecto alas otras, n indica el numero de celdas contiguas por la derecha que se expande. ROWSPAN = n Es idéntico al COLSPAN, pero para mezclar celdas en vertical. ALING Se utiliza igual que el ultimo mencionado, pero aplicado a una celda. VALING = top | middle | bottom | baseline Es igual a el anterior pero aplicado a celdas.

8. EJEMPLO 1. Se trata de una tabla 2x2 celdas de tamaño 5x5 utilizando las celdas <TH> <TABLE UNITS = relative BORDER=3 WIDTH=20% HEIGHT=20%> <CAPTION ALING=top>EJEMPLO 3 </CAPTION> <TR><TH>celda 1.1</TH><TH>celda 1.2</TH></TR> <TR><TH>celda 2.1</TH><TH>celda 2.2</TH></TR> </TABLE> Que quedaría de la siguiente forma

9. EJEMPLO 2 Se trata de una tabla 3x3, con un borde tamaño 5 en la que hemos omitido el texto de una de las celdas. <TABLE UNITS= relative WINDTH=30% BORDER=5> <CAPTION ALING= top>Ejemplo 2</CAPTION> <TR><TD></TD><TD>celda 1.2</TD><TD>Celda 1.32</TD></TR> <TR><TD>Celda 2.1</TD><TD>Celda 2.2</TD><TD>Celda 2.3</TD></TR> <TR><TD>Celda 3.1</TD><TD>Celda 3.2</TD><TD>Celda 3.3</TD></TR> </TABLE> quedara de la siguiente manera

12. Edición avanzada de tablas

13. Nuevos atributos para table En lo que a tablas se refiere HTML 4 aporta mejoras visuales, añadiendo Regla , bordes ,fondos etc. Esto nos permite diferenciar celdas mediante el color de fondo o los bordes de la columna.

14. También se a añadido el atributo sumary en el tag <TABLE>, que no se utiliza como <CAPTION>, ya que este es para titular la tabla, y es visible , y el otro es para describir la tabla, no siendo visible.

15. ELEMENTOS QUE AGRUPAN LA INFORMACION Los elementos que agrupan la información los dividiremos en 2 grupos , los que afectan filas y los que afectan columnas. Elementos que afectan filas Los elementos que afectan filas son: <THEAD> <TBODY> <TFOOT> Los tag de final son opcionales, no obstante se recomienda Su uso para hacer mas inteligible el código fuente del documento.

16. Elementos que afectan columnas Los elementos que afectan a las columnas son: <COLGROUP> <COL> Mediante COLGROUP se indica un grupo de columnas consecutivas. Estas se agrupan para poder realizar efectos sobre ellas como resaltado, color de fondo, etc. Para indicar un grupo de columnas se utiliza el tag<COLGROUP>, el tag de fin </COLGROUP> es opcional y puede omitirse.

17. Mediante <COL > se hace referencia a una columna en particular esta pertenece al grupo indicado en COLGROUP. para entenderlo mejor veamos un ejemplo. En este ejemplo se indica mediante COLGROUP que se agrupen 20 columnas, esto se hace mediante el atributo span. Esto resulta útil cuando se trata de varias columnas de la Misma anchura.

18. Cuando se trata de columnas de distintas anchuras no hay mas Remedio que utilizar el elemento COL dentro de COLGROUP. No obstante, al elemento COL también se le puede aplicar el Atributo span. Esto resulta útil si hay columnas consecutivas de la misma amplitud.

19. ELEMENTOSQUE AFECTAN AL ASPECTO GRAFICO DE LA INFORMACION LOS ELEMENTOS UTILIZADOSPAR TRATAR ASPECTOS GRAFICOS SON: FRAME: para los bordes exteriores de la tabla. RULES: para la separación entre celdas.

20. Los valores que se pueden aplicar a FRAME son: Void: sin cuadro exterior. Valor por defecto. Above: parte superior solo Below:parte inferior de la tabla solo. Hsides: lados superior e inferior del cuadro exterior de la tabla. Vsides: lados derecho e izquierdo solo. Lhs:lado izquierdo solo. Rhs:lado derecho solo Box: los cuatro lados Border: los cuatro lados

21. Los valores que se pueden aplicar a RULES son: None: sin separación, valor por defecto Groups: solo aparecerán entre grupos . Rowrs: solo entre filas Cols: solo entre columnas All: entre todas las celdas

22. EJERCICIO WER@S!! ¬,¬ • Realizar 2 tablas.. La primer la tabla sencilla en la pagina de tu artista y la segunda tabla meterle imágenes y colores al igual en la misma pagina! Zaz? Échenle ganas!