Manual HTML Básico 22 TABLAS: Estructura de una tabla: 1. Una tabla tiene un comienzo y un fin; adentro, todos los atributos necesarios para las filas y columnas. Todo el código debe ir entre <BODY> y </BODY>. ui a 2 <TABLE> [resto de las etiquetas] </TABLE> G Para que los bordes puedan verse en el navegador, le agregamos la etiqueta BORDER a <TABLE> do 4 2. El siguiente nivel corresponde a las etiquetas para formar cada fila (row) de la tabla, que son <TR> y </TR>. Hay que repetirlas tantas veces como filas queremos que tenga la tabla. Para una tabla con dos filas quedaría así su estructura: a 11 °P er io <TABLE BORDER> <TR> [etiquetas de las distintas celdas de la primera fila] </TR> <TR> [etiquetas de las distintas celdas de la segunda fila] </TR> </TABLE> cn ol og i 3. En el último nivel están las etiquetas de cada celda, que son <TD> y </TD>, que dan lugar al contenido de cada celda concreta (texto, imágenes, etc.). Hay que repetirla tantas veces como celdas queremos que haya en esa fila teniendo cuidado de que en cada fila tengamos el mismo número de celdas para formar las columnas. En el siguiente ejemplo tendremos 2 columnas y en cada fila 2 celdas: Te <TABLE BORDER> <TR> <TD>fila1-celda1</TD> <TD>fila1-celda2</TD> </TR> <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> </TR> </TABLE> Profesor Federico Martín Maglio Manual HTML Básico 23 Dibujada en la hoja quedaría... a ui G 4 do io er og i a 11 °P <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> <TABLE BORDER> <TR> <TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD> </TR> <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-celda3</TD> </TR> </TABLE> </BODY> </HTML> 2 Para ir apreciando los cambios realizados, creamos un archivo llamado tabla.htm con el siguiente código... cn ol Probamos sacando la celda 3 de la fila 2 para ver qué pasa... Luego restituimos la etiqueta quitada... Te Ahora le agregamos un título a la tabla. Lo creamos con las etiquetas <CAPTION> y </CAPTION> que deben ubicarse después de <TABLE BORDER>. Entre las etiquetas tipeamos el título. Ahora vamos a variar el espesor de los bordes. A esto lo hacemos poniendo un signo = y un número. El listado ahora debe estar así: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> Profesor Federico Martín Maglio Manual HTML Básico 2 a ui G 4 do <BODY> <TABLE BORDER=5> <CAPTION>Título de la tabla</CAPTION> <TR> <TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD> </TR> <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-celda3</TD> </TR> </TABLE> </BODY> </HTML> 24 io Celdas de cabecera: °P er Seguidamente, pondremos título a cada columna. Es como poner otra fila pero el texto aparecerá en negrita y centrado. La etiqueta es <TH> y </TH> (en vez de la normal <TD> y </TD>). og i a <TR> <TH>Columna 1</TH> <TH>Columna 2</TH> <TH>Columna 3</TH> </TR> 11 Entonces, el agregado será... cn ol Agregamos el texto de arriba, guardamos el archivo y lo visualizamos en el navegador... Te Contenido de las celdas: Dentro de las celdas podemos poner todo lo que querramos. Se hace como hicimos anteriormente pero con el cuidado de introducir todas las órdenes dentro de la celda correspondiente. Para poner un texto... <TD>Este texto está dentro de una celda</A></TD> Profesor Federico Martín Maglio Manual HTML Básico 25 Para poner una imagen... <TD><IMG SRC="imagen1.jpg"></TD> Para poner un enlace... ui a 2 <TD><A HREF="primera.htm">Ir a la primera página</A></TD> G Posicionar contenido en una celda: io er <TD ALIGN=CENTER> Al centro </TD> <TD ALIGN=RIGHT> A la derecha </TD> <TD ALIGN=LEFT> A la izquierda </TD> do 4 Normalmente, el contenido de una celda está alineado a la izquierda. Pero se puede cambiar esto añadiendo dentro de la etiqueta de la celda los siguientes atributos: °P También podemos controlar el alineamiento vertical (que por defecto es en el medio). Se puede cambiar añadiendo dentro de la etiqueta de la celda los siguientes atibutos: og i a 11 <TD VALIGN=TOP> Arriba </TD> <TD VALIGN=BOTTOM> Abajo </TD> Variando las dimensiones de la tabla: Te cn ol El navegador se encarga dimensionar automáticamente el tamaño total de la tabla de acuerdo con el número de filas, de columnas, por el contenido de las celdas, espesor de los bordes, etc. Pero a veces nos puede convenir forzar el dibujo a una forma determinada en cuanto a su tamaño. Para ello están las etiquetas WIDTH (horizontal) y HEIGHT (vertical) que deberán estar acompañadas por el signo = más el número del porcentaje que queramos y su símbolo. Para una tabla que ocupe sólo el 60 % de la página pondremos... <TABLE WIDTH=60% HEIGHT=200> Como podemos ver, estira las 3 columnas en forma automática hasta ocupar el porcentaje indicado y cada celda ahora es más ancha. Profesor Federico Martín Maglio Manual HTML Básico 26 Celdas que abarcan a otras varias: Con la etiqueta COLSPAN=número una celda se extiende en lo horizontal sobre otras (depende del número). Con la etiqueta ROWSPAN=número la celda se extiende en lo vertical sobre otras. 2 Por ejemplo, si queremos que una celda que abarque a dos columnas agregamos... a <TR> ui <TD COLSPAN=2> Celda en 2 columnas </TD> G </TR> 4 Color de fondo en las tablas: er En esto hay varias posibilidades... io do Para que una tabla tenga un color de fondo, debemos seguir los mismos parámetros que con la página (color de fondo). °P 1. Que la totalidad de la tabla tenga un color de fondo. El encabezado nos quedará... 11 <TABLE BORDER=5 WIDTH=60% HEIGHT=200 BGCOLOR="#00FF00"> og i a 2. Si queremos que una celda determinada tenga un color de fondo colocamos el atributo dentro de la etiqueta de la celda correspondiente. Por ejemplo, vamos a hacer que sólo la celda 1 de la fila 1 tenga un color azul. Nos quedará así... cn ol <TD BGCOLOR="#0000FF">fila1-celda1</TD> Hasta ahora, el listado total de la tabla debería ser... Te <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> <TABLE BORDER=5 WIDTH=60% HEIGHT=200 BGCOLOR="#00FF00"> <CAPTION>Título de la tabla</CAPTION> <TR> <TH>Columna 1</TH> <TH>Columna 2</TH> <TH>Columna 3</TH> Profesor Federico Martín Maglio Manual HTML Básico 27 </TR> <TR> <TD BGCOLOR="#0000FF">fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD> </TR> <TR> 2 <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-celda3</TD> 4 G ui a </TR> </TABLE> </BODY> </HTML> do Imágenes de fondo en las tablas: er io Si en vez de color queremos una imagen de fondo, procedemos como ya hemos hecho con la etiqueta BACKGROUND="fondo5.gif" a continuación de TABLE o de alguna celda en particular. °P Separación entre las celdas de una tabla: a 11 Por defecto, la separación entre las distintas celdas de una tabla es de dos pixels. Pero se puede variar esto con el atributo CELLSPACING, que se pone dentro de la etiqueta TABLE. og i Para obtener una separación de 20 pixels entre celdas ponemos... cn ol <TABLE BORDER=5 CELLSPACING=20> Separación entre el borde y el contenido dentro de las celdas: Te Por defecto, la separación entre el borde y el contenido dentro de las celdas es de un pixel. Se puede cambiar esto con el atributo CELLPADDING, que se pone dentro de la etiqueta TABLE. Para obtener una separación de 20 pixels entre el contenido y los bordes, dentro de cada celda ponemos... <TABLE BORDER=5 CELLPADDING=20> Profesor Federico Martín Maglio Manual HTML Básico 28 EJERCITACIÓN: 4 G ui a 2 1. Realizar una tabla con 2 filas, con una celda cada una. La primera como cabecera, con el texto "Esto es un gran lío" y la segunda con una imagen cualquiera. 2. La tabla deberá tener un ancho del 80 % y un borde de tamaño 3. 3. Agregar dos filas con 3 celdas cada una. 4. Poner un color de fondo a toda la tabla. 5. A la cabecera ponerle un color diferente. do SONIDOS: °P er io A nuestra página podemos agregarle música de fondo pero sólo se escuchará si la computadora del visitante está preparada para procesarlo y un navegador que soporte su recepción y reproducción. Los formatos más comunes son los .mid y .wav aunque actualmente hay otros que son de mejor calidad. Pero para el ejemplo trabajaremos con los más comunes. Hay que tener en cuenta que no todos los navegadores soportan sonido ni las mismas órdenes para su reproducción. 11 Internet Explorer utiliza la siguiente etiqueta... a <BGSOUND SRC="fichero_de_sonido" LOOP=n> cn ol og i El atributo LOOP (en inglés, lazo) sirve para especificar el número (n) de veces que se debe ejecutar el fichero de sonido. Si se escoje el número n=-1 o se pone LOOP=infinite, el sonido se ejecutará indefinidamente. Si se omite este atributo, y entonces el fichero se ejecutará una sola vez. Netscape utiliza otra etiqueta... Te <EMBED SRC="fichero_de_sonido" WIDTH=xxx HEIGHT=yy> WIDTH es la anchura y HEIGHT la altura de una consola de control que aparece y que tiene diferentes teclas (play, stop, pausa, etc.). El valor recomendado para xxx es de 200 y para yyy es de 60. Dentro de la etiqueta se pueden añadir los siguientes atributos... AUTOSTART="true" (arranca automáticamente). LOOP="true" (se ejecuta ininterrumpidamente). Profesor Federico Martín Maglio Desarrollo Debe de realizar los ejercicios de EJERCITACIÓN, contemplados en el documento, estos ejercicios debe realizarlos con un editor de texto o plataforma en línea que ejecuten código HTML y enviar los pantallazos del código como la página web ejecutada. Te cn ol og i a 11 °P er io do 4 G ui a 2 Nota Aclaratoria: Si no cuenta con las herramientas necesaria para la ejecución del código HTML, debe de realizar las etiquetas necesarias para resolver EJERCITACIÓN en un trabajo escrito con las normas APA.
