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 ejemplo:
<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.
<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:
<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 .
<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>