Curso de HTML Básico

Clase 4
Temas: Tablas
¾Crear una tabla
¾Atributos de una tabla
¾Combinar celdas
¾ Tablas anidadas
¾Creación de frames
¾Tamaño de Frames
¾Apariencia de Frames
 Crear una Tabla
Para crear una tabla se utilizan las etiquetas <table> y
</table>. Entre dichas etiquetas habrá que especificar las
filas y columnas que formarán la tabla.

¾Por cada una de las filas de la tabla, es necesario insertar

las etiquetas <tr> y </tr>.

¾Por cada fila, deberemos especificar el número celdas, es

decir el de columnas, ingresando las etiquetas <td> y
</td>. Habrá que colocar esas etiquetas entre las
etiquetas <tr> y </tr>.

¾Las etiquetas <th> y </th> se utilizan para especificar el

encabezado de tabla.
 Ejemplo de Tabla
Por ejemplo, para insertar la siguiente tabla:
<table border="1">
Lunes Martes
<tr>
Matemáticas Lengua <th>Lunes</th> Encabezado
Fila 1
Música Plastica <th>Martes</th> de tabla
</tr>
<tr>
<td>Matematicas</td>
Fila 2 <td>Lengua</td>
</tr>
<tr>
<td> Musica</td>
Fila 3
<td> Ed. Fisica</td>
</tr>
</table>
 Atributos de la Tabla
El atributo Width se utiliza para especificar el ancho de la
tabla.

El atributo Higth se utiliza para especificar el alto de la

tabla (este atributo no funciona en todos los navegadores).

Por ejemplo:

<td width="80"> o <td width="80%">

El atributo Cellpadding marca la distancia desde el texto

de la celda hasta el borde del marco de la tabla (en
píxeles).

El atributo Cellspacing marca la distancia entre los cantos

del marco de la tabla (en píxeles).
 Ejemplo de Tabla
Un ejemplo utilizando el atributo cellspacing:

<table border
cellspacing=10><tr>
Comida Bebida Dulce
<th>Comida</th>
<th>Bebida</th>
A B C
<th>Dulce</th></tr>
<tr><td>A</td>
<td>B</td>
<td>C</td></tr>
</table>
 Ejemplo de Tabla
Un ejemplo utilizando el atributo cellpadding:

<table border
cellpadding=10><tr> Comida Bebida Dulce
<th>Comida</th>
<th>Bebida</th> A B C
<th>Dulce</th></tr>
<tr><td>A</td>
<td>B</td>
<td>C</td></tr>
</table>
 Atributos de la Tabla
El atributo Border, contiene un valor numérico que
especifica el grosor del borde.

El atributo Align se utiliza para alinear la tabla dentro de la

página (left, rigth, center).

El atributo bgcolor, contiene un valor hexadecimal que

especifica el color de fondo.

El atributo Bordercolor, contiene un valor hexadecimal que

especifica el color del borde.

El atributo background, contiene un valor hexadecimal que

especifica el color del borde.
 Ejemplo de Tabla
Un ejemplo utilizando el atributo align:

<table border align=“center”>

<tr>
<th>Comida</th>
Comida Bebida Dulce
<th>Bebida</th>
<th>Dulce</th></tr> A B C
<tr><td align=left>A</td>
<td align=center>B</td>
<td align=right>C</td>
</tr>
</table>
 Ejemplo de Tabla
Un ejemplo utilizando el atributo border:

<table border=8><tr>
<th>Comida</th>
Comida Bebida Dulce
<th>Bebida</th>
<th>Dulce</th></tr> A B C
<tr><td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
 Titulo de la Tabla
Es posible establecer un título para la tabla mediante las
etiquetas <caption> y </caption>. Dicha etiqueta puede
contener los atributos align con los valores: bottom,
center, left, right y top; y valign con los valores: bottom
y top. Por ejemplo:
<table width="50%" border="1" align="center">
<caption align="right" valign="top">Titulo de la tabla
</caption>
<tr>
<th>Lunes</th>
....
El título aparecerá ajustado en el margen derecho de la tabla
(align="right") y encima de la tabla (valign="top").
 Combinar Celdas
Para las etiquetas <td> y <th> existen los atributos
colspan y rowspan, que se utilizan para combinar celdas.
A través del atributo colspan se especifica el número de
columnas por las que se extenderá la celda, y a través del
atributo rowspan se especifica el número de filas por las que
se extenderá la celda. Por Ejemplo:

Dias de la semana
<td colspan="2">
Lunes Miércoles

Practico 1
<td rowspan="2"> Teoría 1
Practico 2
 Tablas Anidadas
Presentamos un ejemplo de tabla anidada, a traves del
siguiente código:

<table cellspacing="10" cellpadding="10" border="3">

<tr> <td align="center"> Celda de la tabla principal
</td> <td align="center">
<table cellspacing="2" cellpadding="2" border="1">

Celda de la Tabla anidada Tabla anidada

tabla principal celda a celda b
Tabla anidada Tabla anidada
celda c celda d
 Frames
La utilidad que brindan los marcos o frames es la de distribuir
mejor la información de las páginas, ya que permiten
mantener fijas algunas partes, (como pueden ser el logotipo y
la barra de navegación), mientras que otras sí pueden
cambiar.

Además, permitan mejorar la funcionalidad y la apariencia de

las paginas.

Los marcos son varias páginas en una sola, ya que hay un

documento HTML principal que posee referencias al contenido
de cada uno de ellos.

No hay que insertar las etiquetas <body> y </body>, ya

que el cuerpo del documento será el cuerpo de las páginas que
se carguen en cada uno de los marcos.
 Creación de Frames
Los conjuntos de marcos se definen a través de las etiquetas
<frameset> y </frameset>.
A través de estas etiquetas se indica el número de marcos
en que se dividirá la ventana. Por ejemplo:

<FRAMESET ROWS/COLS=”Medidas” > </FRAMESET>

ROWS/COLS dependerá de si la división de los frames es

verticial (COLS) u horizontal (ROWS).
El valor de ROWS o COLS son las “Medidas” de cada uno de
los frames, separadas por comas, expresadas en porcentaje de
pantalla o pixeles.
 Un Ejemplo de Frames
Para cada marco se incluye la etiqueta <FRAME>
seguida de atributo src, cuyo valor es la referencia a
la pagina que contiene el marco. Por ejemplo:

<frameset cols=30%,20%,50%>
<frame src="A.html">
<frame src="B.html">
A B C
<frame src="C.html">
</frameset>
 Un Ejemplo de Frames
Un ejemplo con un frame vertical y 2 frames horizontales.

<frameset cols=20%,*>
<frame src="A.html"> B
<frameset rows=40%,*> A
<frame src="B.html"> C
<frame src="C.html">
</frameset>
</frameset>
 Atributos de Frames
El atributo BORDER, especifica el ancho de la línea que
separa los marcos, se utiliza en la línea de navegadores de
Netscape .

Los atributos FRAMEBORDER y FRAMESPACING, que

cumplen la misma función que BORDER, pero para Internet
Explorer.

El atributo SCROLLING indica si aparecen o no las barras de

desplazamiento (YES o NO).

El atributo NAME especifica el nombre del marco.

 Un Ejemplo de Frames
Un ejemplo de frames utilizando los atributos name y
framespacing:

<frameset rows=30%,*
framespacing=80>
<frame src="A.html“ name=“Hola”>
A
<frameset cols=30%,*>
<frame src="B.html">
<frame src="C.html"> B C
</frameset>
</frameset>