INFORMATICA II

Tablas
Ing. William Len Velsquez williamleon20@yahoo.com

CLASE 03

DEFINICIN
Las tablas son una de las herramientas

mas tiles de que disponemos en HTML, ya que nos permite cierto modo organizar y presentar nuestro documento, ayudndonos a situar dentro del mismo los diferentes elementos que lo componen, siendo esta la nica forma coherente de distribucin que haba antes de la introduccin de las Hojas de Estilo y de las capas
2 Elaborado por: Ing. William Len V

ESTRUCTURA DE UNA TABLA

Las tablas estn formadas

por filas, columnas y celdas. Cada espacio horizontal continuado es una fila y cada espacio vertical continuado es una columna, definindose una celda como el espacio formado por la interseccin de una fila y una columna.
3 Elaborado por: Ing. William Len V

ETIQUETA QUE FORMA UNA TABLA

Las etiquetas necesarias para

confeccionar las tablas son: 1. La etiqueta general, que engloba a todas las dems, es <TABLE> y </TABLE>. Ejemplo:

<TABLE>
[resto de las etiquetas]

</TABLE>
4 Elaborado por: Ing. William Len V

ETIQUETA QUE FORMA UNA FILA

2.-En el siguiente nivel, dentro de la anterior, estn las etiquetas para formar cada fila (row) de la tabla, que son <TR> y </TR>. Se deben repetir tantas veces como filas queremos que tenga la tabla. Por ejemplo si se quiere obtener una tabla con dos filas, la codificacin sera: <TR> [etiquetas de celdas de la 1 fila] </TR> <TR> [etiquetas de celdas de la 2 fila] </TR>
5 Elaborado por: Ing. William Len V

ETIQUETA QUE FORMA UNA CELDA

3.-En el ltimo nivel (dentro de las anteriores) estn las etiquetas de cada celda, que son <TD> y </TD>, que engloban el contenido de cada celda concreta (texto, imgenes, etc.). Se debe repetir tantas veces como celdas queremos que exista en una fila. <TD> [Contenido de las celdas]

</TD>

Elaborado por: Ing. William Len V

ETIQUETAS QUE FORMAN UNA TABLA

De esta forma, y siguiendo con nuestra tabla inicial de Ejemplo,

el esquema de etiquetas sera el siguiente:

Elaborado por: Ing. William Len V

Insertar una tabla con Dw

Elaborado por: Ing. William Len V

ETIQUETAS QUE FORMAN UNA TABLA

Ejemplo de una tabla con dos filas: ejem0301.html.

Cada fila va a tener tres celdas. Dentro de cada celda vamos a

poner un texto indicativo de la posicin de dicha celda:

Elaborado por: Ing. William Len V

<TABLE BORDER=2> <TR><TD>fila1-celda1</TD> <TD>fila1celda2</TD> <TD>fila1-celda3</TD></TR> <TR><TD>fila2-celda1</TD> <TD>fila2celda2</TD> <TD>fila2-celda3</TD></TR> </TABLE>

COLOR DE LOS BORDES

El atributo BORDERCOLOR coloca un

determinado color al borde. <TABLE BORDERCOLOR=nombre>

Si en el ejemplo anterior se coloca: <TABLE BORDER=1 BORDERCOLOR=blue>

10

Elaborado por: Ing. William Len V

Editar tabla con Dw

11

Elaborado por: Ing. William Len V

Editar tabla con Dw

12

Elaborado por: Ing. William Len V

COLOR DE LOS BORDES

Ejemplo de la tabla del : ejem0301.html.

Dar color al borde 4 color rojo ancho 500 px

13

Elaborado por: Ing. William Len V

TTULO DE LA TABLA
Se puede aadir un titulo (caption) a la tabla, es decir un

texto situado encima de la tabla que indica cul es su contenido. Se consigue con la etiqueta <CAPTION> y </CAPTION>. Si en el ejemplo anterior aadir la siguiente lnea despus de la etiqueta <TABLE>: <TABLE> <CAPTION> Ejemplo de tabla de 3 x 3 </CAPTION>

14

Elaborado por: Ing. William Len V

CELDAS DE CABECERA
Adems de las celdas que contienen datos

normales, se puede emplear, celdas de cabecera (header), que se distinguen por estar el texto de dichas celdas en negrita y centrado. Esto se consigue con la etiqueta <TH> y </TH> (en vez de la celda normal <TD> y </TD>) Ejemplo: Aadir, en el ejemplo anterior, una fila de estas celdas de cabecera, antes de las otras dos que ya existan: <TR> <TH>Columna 1</TH> <TH>Columna 2</TH> <TH>Columna 3</TH> Elaborado por: Ing. William Len V 15 </TR>

CELDAS DE CABECERA
Ejemplo Crear una tabla del : ejem0302.html.

Definir la primera fila como cabecera e ingrese el siguiente texto

16

Elaborado por: Ing. William Len V

CELDAS DE CABECERA
Ejemplo de la tabla del : ejem0301.html.

Definir la primera fila como cabecera e ingrese el siguiente texto

17

Elaborado por: Ing. William Len V

<table width="500" border="2"> <tr> <th scope="col">TITULO 1</th> <th scope="col">TITULO 2</th> </tr> <tr> <td>contenido 1</td> <td>contenido 2</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table>

CONTENIDO DE LAS CELDAS

Crear una tabla que contenga lo siguiente dar el nombre de ejem0303.html

18

Elaborado por: Ing. William Len V

CONTENIDO DE LAS CELDAS

Verificar el codigo <table border=2> <tr align=center> <td> <img src=img/122.gif"><br> Imagenes</td> <td> <a href="#Contents">Contenidos</a><br> Hipertexto </td></tr> <tr align=center> <td> Algn<br>Texto </td> <td> <table border=2><caption>Otra tabla</caption> <tr> <td>1</td><td>2</td> <td>3</td></tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </td> </tr></table>
19 Elaborado por: Ing. William Len V

ALINEACIN DEL CONTENIDO DE CELDA

ALINEACIN HORIZONTAL

Normalmente, el contenido de una celda est alineado a la izquierda. Pero se puede cambiar esto aadiendo dentro de la etiqueta de la celda los siguientes atributos: <TR> <TD > A la izquierda por defecto </TD> <TD ALIGN=CENTER> Al centro </TD> <TD ALIGN=RIGHT> A la derecha </TD> <TH ALIGN=LEFT> Cabecera a la izquierda </TH>
20

</TR> Elaborado por: Ing. William Len V

ALINEACIN DEL CONTENIDO DE CELDA

ALINEACIN VERTICAL El alineamiento por defecto en el sentido vertical es en el medio. Tambin se puede cambiar, aadiendo dentro de la etiqueta de la celda los siguientes atibutos: <TR> <TD > <img src=IMAGES3.JPG> </TD> <TD VALIGN=TOP> Arriba </TD> <TD VALIGN=BOTTOM> Abajo </TD> </TR>

21

Elaborado por: Ing. William Len V

DIMENSIONES DE LA TABLA
A veces nos puede convenir forzarle para que la tabla tenga unas

dimensiones totales mayores que las que le corresponden, tanto en anchura como en longitud. Esto se consigue aadiendo dentro de la etiqueta de la tabla los atributos WIDTH y HEIGHT igual a un porcentaje de la dimensin de la pantalla, o a una cifra que equivale al

22

Elaborado por: Ing. William Len V

DIMENSIONES DE LA TABLA
Crear una tabla con las siguientes caracteristicas

Escribir el siguiente codigo con el nombre de ejem0503.html <table border=1 width=75%> <tr> <td width=20%>20%</td> <td width=50%>50%</td> <td width=15%>15%</td> <td width=15%>15%</td> </tr> </table>

23

Elaborado por: Ing. William Len V

CELDAS QUE ABARCAN MS DE UNA FILA O COLUMNA

A veces puede interesarnos que una celda se extienda sobre

otras varias.
Esto se consigue aadiendo dentro de la etiqueta de la celda: TD

los atributos:
COLSPAN=nmero para extenderse sobre un nmero

determinado de columnas, o
ROWSPAN=nmero para extenderse verticalmente sobre un

nmero determinado de filas.

24 Elaborado por: Ing. William Len V

Combinar con Dw

25

Elaborado por: Ing. William Len V

CELDAS QUE ABARCAN MS DE UNA FILA O COLUMNA

Crear una tabla tal como se observa en la figura

26

Elaborado por: Ing. William Len V

<table border=2> <tr> <td colspan=3>fila 1- celda1</td></tr> <tr> <td>fila 2- celda 1</td> <td>fila 2- celda 2</td> <td>fila 2- celda 3</td> </tr> <tr> <td>fila 2- celda 1</td> <td>fila 2- celda 2</td> <td>fila 2- celda 3</td> </tr> </table>

CELDAS QUE ABARCAN MS DE UNA FILA O COLUMNA

Crear una tabla tal como se observa en la figura

27

Elaborado por: Ing. William Len V

<table border=2> <tr> <td rowspan=3>fila 1- celda 1</td> <td>fila 1- celda 2</td> <td>fila 1- celda 3</td> </tr><tr> <td>fila 2- celda 1</td> <td>fila 2- celda 2</td> </tr> <tr> <td>fila 2- celda 1</td> <td>fila 2- celda 2</td> </tr> </table>

EJERCICIOS
Crear una tabla tal como se observa en la figura

28

Elaborado por: Ing. William Len V

COLOR DE FONDO EN LAS TABLAS

Las tablas pueden tener un color de fondo, siguiendo un

procedimiento totalmente anlogo al empleado para que una pgina tenga un color de fondo uniforme Para ello debemos utilizar el atributo BGCOLOR Ejemplo <TABLE BORDER=1 BGCOLOR="#00FF00>

29

Elaborado por: Ing. William Len V

IMGENES DE FONDO EN LAS TABLAS

Se utiliza el atributo BACKGROUND="imagen.gif" o

BACKGROUND="imagen.jpg", Si se utiliza dentro de la etiqueta <TABLE> la imagen en cuestin se multiplicar detrs de todas las celdas. Puede utilizarse tambin en las celdas Por ejemplo, si ponemos: <TABLE BORDER=1 BACKGROUND="IMAGES4.JPG">

30

Elaborado por: Ing. William Len V

EJERCICIO FINAL
Construir una tabla con la siguiente presentacin, dar el nombre de ejem0305.html

31

Elaborado por: Ing. William Len V

EJERCICIO FINAL
Verifique el codigo

<table WIDTH=100% HEIGHT =100% border=0 bgcolor="#FFFF33" > <tr> <td ALIGN=CENTER VALIGN=MIDDLE > BIENVENIDO<P> A LA PAGINA DE<P> NOMBRE </td> </tr> </table>
32 Elaborado por: Ing. William Len V

FIN