2018 Noveno Tecnología e Informática: abril 2018

Fecha: Abril 20 de 2018

Asignatura: Tecnología e Informática

Formación en Valor: Liderazgo.

Núcleo Integrador: Tablas.

Indicador de desempeño: Aplica tablas a una página Web.

Exploración Cognitiva

¿Qué utilidad crees que tienen las tablas en las páginas Web?

Tabla <table>

Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna.

Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habrá que especificar las filas y columnas que formarán la tabla.

Fila <tr>

Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas deberán insertarse entre las etiqetas <table> y </table>.

Por ejemplo, para crear una tabla con cinco filas escribiríamos:

Columna o celda <td>

Para crear una tabla no basta con especificar el número de filas, es necesario también especificar el número de columnas.

Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos especificar el número de celdas por fila, que equivale a especificar el número de columnas por fila.

Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las etiquetas <tr> y </tr>.

Entre las etiquetas <td> y </td> se podrá especificar el contenido de cada una de las celdas. Por ejemplo, para insertar la siguiente tabla:

Habría que escribir:

Sabado	Domingo
Curso HTML	Curso Dreamweaver
Curso Frontpage	Curso Flash

<table border="1">
  <tr>
    <td>Sabado</td>
    <td>Domingo</td>
  </tr>
  <tr>
    <td>Curso HTML</td>
    <td>Curso Dreamweaver</td>
  </tr>
  <tr>
    <td>Curso Frontpage</td>
    <td>Curso Flash</td>
  </tr>
</table>

Formato de la tabla

Es posible modificar los siguientes atributos de una tabla:

Atributo	Significado	Posibles valores
width	ancho de la tabla	un número, acompañado de % cuando se desee que sea en porcentaje
height	altura de la tabla	un número, acompañado de % cuando se desee que sea en porcentaje
cellpadding	espacio entre el contenido de las celdas y el borde	un número
cellspacing	espacio entre celdas	un número
border	grosor del borde	un número
align	alineación de la tabla dentro de la página	left (izquierda) right (derecha) center (centro)
bgcolor	color de fondo	número hexadecimal
background	imagen de fondo	número hexadecimal
bordercolor	color del borde	número hexadecimal

Por ejemplo, para modificar la tabla de la página anterior para que quedase como la siguiente:

abado	Domingo
Curso HTML	Curso Dreamweaver
Curso Frontpage	Curso Flash

Habría que escribir:

Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de la ventana (lo puedes comprobar cambiando el ancho de la ventana de tu navegador y verás que el ancho de la tabla varía para ocupar siempre la mitad de la ventana), que el borde (border) tiene un grosor de dos píxeles (es más ancho que las separaciones internas de la tabla que tienen grosor 1), que la tabla está alineada al centro (center) de la ventana, que no hay espacio entre las celdas (cellspacing="0"), que el borde la tabla es negro (#000000) y el fondo naranja (#FFCC99).

Visita Aula Clic

ejemplo:

<HTML>
<HEAD> <TITLE> TABLAS </TITLE> </HEAD>
<BODY BACKGROUND="FONDO.GIF" TEXT="WHITE">
<TABLE BORDER="2" WIDTH="100%">
<TR>
<TD> NOMBRES </TD>
<TD> CURSOS </TD>
<TD> VALOR </TD>
<TD> IMAGEN </TD>
</TR>
<TR>
<TD> ISABELLA </TD>
<TD> COSTURA </TD>
<TD> 200.000 </TD>
<TD> <IMG SRC="FOTO.JPG" WIDTH="200"> </TD>
</TR>
<TR>
<TD> MARA LUZ </TD>
<TD> SISTEMAS</TD>
<TD> 500.000 </TD>
<TD> <IMG SRC="FOTO.JPG" WIDTH="200"> </TD>
</TR>
<TR>
<TD> IAN SOMERHALDER </TD>
<TD> ACTOR</TD>
<TD> 600.000 </TD>
<TD> <IMG SRC="FOTO1.JPG" WIDTH="200"> </TD>
</TR>
</TABLE>
</BODY>
</HTML>

viernes, 20 de abril de 2018

Tablas