5.CREACIÓN DE TABLAS.

Transcripción

1 5.CREACIÓN DE TABLAS. Cómo se crea una tabla?. Para crear las tablas será necesario usar una nueva etiqueta: TABLE, que significa, en inglés, tabla. Esta etiqueta consta de instrucción de inicio,, e instrucción de fin,. Entre ambas debemos introducir otras tres etiquetas, que definirán la estructura de la tabla. Estas etiquetas son: TR: La etiqueta Table Row nos permitirá insertar filas en la tabla. La tabla tendrá tantas filas como apariciones de esta etiqueta haya entre y. La instrucción de inicio de TR,, marca el comienzo de la línea, la instrucción de fin,, marca su final.entre el comienzo y el fin de la línea debemos insertar las celdas de la tabla. TH: Este es el primero de los dos tipos de celdas existentes en el lenguaje HTML. El nombre de la etiqueta proviene del inglés Table Header, encabezado de tabla. Al igual que la etiqueta anterior el comienzo del encabezado viene dado por la instrucción de inicio, y finaliza con la instrucción de fin,. En general entre el comienzo y el fin se suele insertar texto, que será mostrado en negrita o subrayado y centrado. TD: Este es el segundo tipo de celda de las tablas HTML. El nombre de la etiqueta, Table Data (Datos de tabla), nos induce a pensar que su función será introducir todos los datos que queramos en las celdas definidas de esta forma. Y así será, de hecho podemos insertar cualquier elemento de HTML: imágenes, listas, texto formateado e incluso otras tablas. La diferencia de esta celda con la anterior es principalmente que el texto de los encabezados de tabla aparecerá resaltado y centrado y el de las celdas normales (TD) no. Con una mera descripción de las etiquetas es difícil entender por completo como se crean tablas en HTML, así que vamos a ver unos ejemplos. Para empezar crearemos una tabla sencilla de dos filas y dos elementos. Vayamos por pasos: 1. En primer lugar ponemos la instrucción de inicio y fin de la etiqueta TABLE dejando un espacio entre ellas para insertar posteriormente el resto de etiquetas:...otras etiquetas A continuación insertamos las filas. La tabla que nos hemos propuesto crear consta de dos filas. Por tanto debemos usar la etiqueta TR dos veces. Lo que insertemos en la primera (entre la instrucción de inicio y la instrucción de fin) será el contenido de la primera fila y lo que insertemos en la segunda será el contenido de la segunda fila: 3. El tercer paso será definir el contenido de cada fila. Como nos habíamos propuesto

2 que la tabla tuviese dos columnas en cada fila debemos insertar dos celdas en cada una. Como hemos explicado antes, para crear una celda debemos usar la etiqueta TD. Entre la instrucción de inicio y la instrucción de fin de está etiqueta será donde insertaremos el verdadero contenido de la tabla. En este primer ejemplo sencillo será simplemente texto, pero puede ser cualquier otro elemento web como imágenes o listas. Volviendo a nuestro ejemplo, para cada fila debemos escribir el siguiente código: Columna1 Columna2 4. El cuarto paso es ponerlo todo junto, repitiendo el código anterior para cada fila. El código final de la tabla será: Fila1,Columna1 Fila1,Columna2 Fila2,Columna1 160 Creación de tablas HTML Borde de las tablas El siguiente paso en el aprendizaje de las tablas consiste en añadirles un borde. Esto es tan sencillo como añadir un nuevo atributo a la instrucción de inicio de la etiqueta TABLE. El atributo del que hablamos es BORDER, que significa borde en inglés. Este atributo puede tomar un valor en pixeles que representa el grosor del borde a mostrar. Si incluimos BORDER sin ningún valor es equivalente a BORDER="1".Veamos un ejemplo: <TABLE BORDER="5"> Encabezado1 Encabezado2 Encabezado3 Fila1,Columna1

3 Fila1,Columna2 Fila2,Columna1 Un aspecto interesante a resaltar del ejemplo es que las celdillas que están vacías, es decir, que no tienen ni texto ni ningún otro elemento en su interior, no son dibujadas por los navegadores.si queremos que sí sean dibujadas debemos insertar la etiqueta TD con un salto de línea (<BR>).Esto es, en el caso anterior podíamos haber escrito. <TABLE BORDER="5"> Encabezado1 Encabezado2 Encabezado3 Fila1,Columna1 Fila1,Columna2 <BR> Fila2,Columna1 Creación de tablas HTML Insertar un título para la tabla El siguiente elemento importante a destacar en las tablas y del que todavía no hemos hablado es el título. Este será un texto que acompaña a la tabla podrá estar situado

4 encima o debajo de ella. Para insertarlo haremos uso de una nueva etiqueta: CAPTION (que se puede traducir al español como título), que deberá ser usada entre las instrucciones y </TABLE >, de la siguiente manera: <CAPTION> Titulo de la tabla </CAPTION> La etiqueta CAPTION permite el uso de un atributo (cuyo nombre nos resultará familiar), ALIGN, que nos permitirá elegir que dichos títulos sean mostrados como pie de la tabla. El atributo ALIGN, puede tomar dos valores top y bottom. El primero de ellos, top, significa en inglés arriba o parte superior y su efecto será que el título sea mostrado encima de la tabla. Bottom, por su parte puede ser traducido como abajo o parte inferior. <CAPTION ALIGN="bottom"> Pie de la tabla </CAPTION> Alineamiento de tablas. El lenguaje HTML nos permite tener un mayor control sobre la disposición de las tablas con el uso de un nuevo atributo de la etiqueta TABLE: ALIGN. Este atributo nos permitirá alinear la tabla a la derecha, a la izquierda o centrada respecto a la ventana del navegador, para ello toma los siguientes valores: ALIGN="left", right, center. Hasta ahora hemos estudiado el alineamiento de las tablas con respecto a la ventana del navegador. El siguiente paso será aprender los diferentes tipos de alineamiento de los elementos de las diferentes celdas con respecto a estas. Estos tipos de alineamiento se dividen en dos: alineamiento vertical y alineamiento horizontal. Alineamiento horizontal: Para seleccionar el tipo de alineamiento horizontal de las celdas hay que usar el atributo ALIGN de las etiquetas TH o TD en función del tipo de celda. Este atributo permitirá seleccionar entre un alineamiento a la izquierda (ALIGN="left"), centrado (ALIGN="center") o a la derecha (ALIGN="right ). Alineamiento vertical: En este caso usaremos un nuevo atributo: VALIGN (Vertical Align, alineamiento vertical). Alineamiento con la parte superior de la celda (VALIGN="top"), alineamiento en medio de la celda (VALIGN="middle") y alineamiento con la parte inferior de la celda (VALIGN=" bottom"). Por defecto las celdas de encabezado (TH) están centradas tanto horizontal como verticalmente, mientras que las celdas normales (TD) están alineadas a la izquierda y verticalmente se sitúan en el centro de la celda. Ancho de tablas y celdas Como vimos antes en este capítulo, el ancho de las tablas queda determinado por el tamaño necesario para mostrar el contenido de sus celdas. Sin embargo el lenguaje HTML nos permite especificar el tamaño que deseemos por medio de un nuevo atributo

5 de la etiqueta TABLE: WIDTH (que traducido significa ancho). Este atributo se usa igual que los vistos hasta ahora, y su valor representará el ancho en pixeles de la tabla: <TABLE WIDTH="500"> Es importante resaltar que si con ese tamaño no se pueden mostrar todos los elementos de la tabla, por ejemplo si en la tabla anterior hay una imagen de ancho 550 que no cabe en una tabla de 500 pixeles de ancho, el navegador ignorará el atributo WIDTH. Si la tabla únicamente contiene texto la etiqueta WIDTH tiene una mayor utilidad, ya que el texto se adaptará a ese ancho, ocupando más líneas si es necesario. Nota El tamaño del ancho de una tabla tambien se puede especificar en porcentaje respecto al ancho total de la ventana del navegador. Por ejemplo: <TABLE WIDTH="50%"> hace que la tabla sea la mitad de la ventana. Si el usuario hace más pequeña la ventana la tabla también se hará más pequeña. Tamaño de las celdas Al igual que hemos modificado el ancho de la tabla completa también podremos modificar el tamaño de cada celda por separado. En este caso tendremos más posibilidades aún, ya que podremos modificar también la altura de la celda usando el atributo HEIGHT. Al igual que antes, las dimensiones que especifiquemos con WIDTH y HEIGHT sólo serán respetadas si en ese espacio cabe su contenido. Por ejemplo en el siguiente caso: <TD WIDTH="50" HEIGHT="50"> <IMG SRC="img.gif" WIDTH="100" HEIGHT="100"> la única celda de la tabla tendrá un tamaño de 100 por 100, que es el tamaño de la imagen que hemos insertado en ella. En este caso no pueden respetarse los atributos WIDTH y HEIGHT de la etiqueta TD ya que en una celda de las dimensiones indicadas en ellas no cabría la imagen. Si en su lugar hubiésemos usado < TD WIDTH="150" HEIGHT="150"> estas dimensiones SI se hubiesen respetado. Celdas que abarcan varias filas o columnas Es hora ya de comenzar con dos de los atributos más interesantes en la creación de tablas: ROWSPAN y COLSPAN.Gracias a estos atributos podremos crear tablas mucho

6 más complejas y que se adapten a nuestras necesidades.estos dos atributos sirven tanto para las celdas normales, TD, como para las celdas encabezado, TH, y su función será extender una fila (ROWSPAN) o una columna (COLSPAN) para que ocupen el tamaño de varias. Para comprender el significado del concepto extender lo mejor es ver un ejemplo: <TABLE BORDER="1"> <TH COLSPAN="2"> Celda de dos columnas <TD ROWSPAN="2"> Celda de dos filas Fila3,Columna2 como vemos la primera celda se extiende para ocupar dos columnas y la primera celda de la segunda fila ocupa dos filas. En este momento invitamos al lector a practicar con los atributos ROWSPAN y COLSPAN incluso con celdas de mayor tamaño, ya que esta es la mejor manera de habituarse a ellos, más adelante seguiremos realizando ejemplos prácticos con estos y otros atributos de las tablas. PRÁCTICA 5. En esta práctica vas a realizar un álbum de fotos, un ejemplo es tomar las carátulas de los discos de tu grupo de música favorito, aunque se pueden utilizar otras fotorgrafías. Este album tendrá que realizarse de la siguiente manera: Debe de aparecer título, texto introductorio y fondo de pantalla (color o fotografía). Las fotografías (en tamaño pequeño) han de estar colocadas en una tabla, y que al pinchar sobre ellas se abrá una nueva página donde se aprecie la fotografía a mayor tamaño (debe haber un link de vuelta a la página principal). NOTA: Para cambiar el tamaño de las fotografías nos ayudamos del GIMP, y la herramienta escalar imagen que aparece dentro del menú Imagen.