TEMA 2. CREAR SITIOS WEB USANDO CÓDIGO HTML Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz) Sesión 10 Tablas Introducción ● ● Las tablas son posiblemente la manera más clara de organizar la información. También es el modo más adecuado de maquetar texto y gráficos de una manera algo más controlada que con los parámetros align. Estructura de una tabla (1 de 3) ● Las tablas se definen de la siguiente manera: – – – primero se definen las características de la tabla en la etiqueta TABLE después se definen las características de la fila usando la etiqueta TR y por último se definen las características de cada celda de la fila en las etiquetas TD. Estructura de una tabla (2 de 3) ● Ejemplo de una tabla de 2 filas y 3 columnas sin bordes: <TABLE> <TR> <TD>Primera</TD> <TD>Segunda</TD> <TD>Tercera</TD> </TR> <TR> <TD>Cuarta</TD> <TD>Quinta</TD> <TD>Sexta</TD> </TR> </TABLE> Estructura de una tabla (2 de 3) ● Ejemplo de una tabla de 2 filas y 3 columnas con bordes: <TABLE BORDER=" 1" > <TR> <TD>Primera</TD> <TD>Segunda</TD> <TD>Tercera</TD> </TR> <TR> <TD>Cuarta</TD> <TD>Quinta</TD> <TD>Sexta</TD> </TR> </TABLE> Ejercicio 25. (tablas sencillas) Pon el título Fondo negro, color del texto blanco H1 El texto del interior de las tablas va en negrita y el color: tabla de 3 filas x 3 columnas El borde de la tabla tiene un grosor de 5 pixels 1ªfila: aqua 2ªfila: red 3ªfila: green Atributos de la etiqueta <TABLE> ● La etiqueta <table> utiliza los siguientes atributos: – BORDER: indica que grosor tendrá el borde exterior de la tabla. Por defecto es cero, lo que significa que no dibujará borde alguno. – CELLSPACING: define el número de pixels que separarán las celdas unas de otras. – CELLPADDING: número de pixels entre el borde interno de la celda y el contenido de ésta. – WIDTH y HEIGHT: ancho y alto de la tabla. Se puede expresar en pixels o en %. Por ejemplo, <TABLE WIDTH="100%"> – ALIGN: alinear la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER) – BACKGROUND: imagen de fondo para la tabla. – BGCOLOR: color de fondo para la tabla. Ejercicio 26. (jugar con los atributos de la etiqueta TABLE 1) Crea la carpeta Ejercicio 26 y haz dentro de ella la siguiente página web (ejercicio26.html): Ejercicio 27. (jugar con los atributos de la etiqueta TABLE 2) Tipo de letra Courier a 5 pixels y en color negro Tipo de letra Courier a 3 pixels y en color blanco Tabla con borde 1 pixel. Ancho y alto: 100% El fondo se llama bg2.gif Enlace a http://www.proverbia.net Lista con viñetas. Tipo de símbolo: square. Atributos de la etiqueta <TR> ● La etiqueta <TR> utiliza los siguientes atributos: – ALIGN: alinea el contenidos de las celdas de la fila horizontalmente a izquierda (left), derecha (right) o centro (center). – VALIGN: alinea el contenido de las celdas de la fila verticalmente arriba (top), abajo (bottom) o centro (middle). – BGCOLOR: indica el color de fondo de todas las celdas de la fila. – HEIGHT: define el alto para toda la fila Ejercicio 28. (jugar con los atributos de la etiqueta TABLE y de la etiqueta TR) Crea la carpeta Ejercicio 28 y haz dentro de ella la siguiente página: Utiliza una tabla ajustada a la página web Las imágenes van centradas en la fila (verticalmente y horizontalmente) Usa el parámetro align y valign dentro de las etiquetas TR para centrar el contenidos de las celdas. La primera imagen se llama super1.jpg, la segunda super2.jpg, Ejercicio 29. (jugar con los atributos de la etiqueta TABLE y de la etiqueta TR) Duplica la carpeta Ejercicio 28, renombrala a Ejercicio 29 y modifica la página index.html para que tenga el siguiente aspecto: Quita el borde que rodea a la tabla y a sus celdas. Ejercicio 30 (1 de 2) (jugar con los atributos de la etiqueta TABLE y de la etiqueta TR) Duplica la carpeta Ejercicio 29, renombrala a Ejercicio 30 y modifica la página index.html para que tenga el siguiente aspecto: Cada imagen es un enlace a una página web. En el primer caso, la imagen super1.jpg enlaza con la página super1.html, super2.jpg con super2.html, ... Las filas 1 y 3 tienen un color de fondo rojo (usa BGCOLOR en las etiquetas TR) Ejercicio 30 (2 de 2) (jugar con los atributos de la etiqueta TABLE y de la etiqueta TR) La imagen se llama super1.jpg. Crea una tabla que abarque el 100% del ancho y alto de la página web e inserta la imagen centrada en la horizontal y en la vertical. Ten en cuenta que las dimensiones de la imagen son 200x200. Modifica esta dimensiones por 350x350 Cuando piques en la imagen haz que vaya a la página index.html Pon border=”0” a la imagen para quitarle el borde azul (éste aparece cuando conviertes una imagen en un enlace) Llama a la página super1.html y crea 8 más: super2.html, super3.html, ... cada una tendrá la imagen adecuada: super1.jpg, super2.jpg, ... Atributos de la etiqueta <TD> ● La etiqueta <TD> utiliza los siguientes atributos: – ALIGN: alinea el contenido de la celda horizontalmente a izquierda (left), derecha (right) o centro (center). – VALIGN: alinea el contenido de la celda verticalmente arriba (top), abajo (bottom) o centro (middle). – BGCOLOR: indica el color de fondo para la celda. – BACKGROUND: indica la imagen de fondo para la celda. – WIDTH: especifica la anchura de la celda. También se puede especificar tanto en pixels como en porcentaje, teniendo en cuenta que, en este último caso, será un porcentaje respecto al ancho total de la tabla (no de la ventana del navegador). – HEIGHT: alto de la celda. Ejercicio 31 (jugar con los atributos de la etiqueta TABLE) El ejercicio consiste en hacer una página web que imite un tablero de ajedrez. Haz una tabla de 8x8 que se ajuste 100% al ancho y 100% al alto de la página web. Características de la tabla: ● dimensiones: 8 filas x 8 columnas ● ancho del borde: 1 pixel. ● espacio entre celdas: 0 pixels. Ejercicio 32 (jugar con los atributos de la etiqueta TABLE, TR y TD) Duplica ejercicio31.html, renombralo a ejercicio32.html y cortalo a una carpeta llamada ejercicio 32 Características de las celdas <TD>: ● ● ancho: 12,5% alto: 12,5% Características de las celdas <TR>: ● torre.gif caballo.gif alfil.gif rey.gif reina.gif imágenes centradas en la horizontal y en la vertical Unión de las celdas de una tabla (1 de 2) ● ● ● Sabemos hacer tablas de 1x1, 2x2, 3x3, etc... Pero... ¿cómo se puede hacer una tabla de este estilo? Dicho de otro modo.. ¿cómo juntamos celdas contiguas? Unión de las celdas de una tabla (2 de 2) ● ● La solución pasa por usar los siguientes parámetros en las etiquetas <TD> que lo necesiten: – COLSPAN: indica el número de celdas de la misma fila que se van a unir para formar una sola. – ROWSPAN: indica el número de celdas de diferentes filas que se van a unir para formar una sola. Veamos como estaba hecha la tabla del ejemplo... Ejemplo de tabla con celdas contiguas Fijarse aquí (solamente un TD) y aquí <table border="6" cellspacing="6" width="30%"> <tr> <td colspan="2" background="bg2.gif"><b><font color="green">Estas dos columnas est&aacute;n unidas</font></b> </td> </tr> <tr> <td>Una celda</td> <td rowspan="3" background="bg2.gif"><b><font color="green">Estas tres filas tambi&eacute;n est&aacute;n unidas</font></b> </td> </tr> <tr> <td>Otra celda</td> </tr> <tr> <td>y otra</td> </tr> </table> Ejercicio 33 (jugar con los atributos de la etiqueta TABLE, TR y TD) Estas dos columnas están unidas COLSPAN=”2” El fondo de la página es un fichero llamado rana.gif Características de las filas <TR>: ● color de fondo: lightgreen Características de la tabla <TABLE>: ● ● Estas seis celdas están unidas ROWSPAN=”6” y tienen un color verde ● ● espacio entre celdas: 2 pixels espacio entre el borde interno y el contenido de las celdas: 15 pixels borde: 0 pixels color de fondo de la tabla: green Tablas anidadas ● ● ● ● Se llama tabla anidada a aquella tabla que forman parte, a su vez, de otra tabla. Se habla entonces de tabla interior y tabla exterior. La tabla exterior contiene a la interior y esta está contenida en la exterior. Para hacer una tabla anidada, solamente basta con escribir la tabla interior entre alguna etiqueta <TD>...</TD> de la tabla exterior. Ejemplo de tabla con celdas contiguas <table border="0" cellpadding="30" cellspacing="2" bgcolor="green"> <tr bgcolor="lightgreen"> <td>Esta es una celda de la tabla exterior</td> <td>Esta es otra celda de la tabla exterior</td> </tr> <tr bgcolor="lightgreen"> <td>y &eacute;sta es otra...</td> <td> <table border="0" cellspacing="2" bgcolor="blue"> <tr bgcolor="lightblue"> <td>Una celda de la tabla interior</td> </tr> <tr bgcolor="lightblue"> <td>Otra celda de la tabla interior</td> </tr> </table> </td> </tr> </table> Ejercicio 34 (tablas anidadas) El ejercicio consiste en hacer una tabla externa de 1x1 sin bordes que ocupe el 100% del ancho y alto de la página y que incluya a la tabla que hicimos en el ejercicio 33. El resultado debe ser este: Ejercicio 35 (tablas anidadas) El ejercicio consiste en hacer una tabla externa de 1x1 sin bordes que ocupe el 100% del ancho y alto de la página y que incluya tu horario de clase. Utiliza un color de celda para cada asignatura. El resultado debe ser este: