INFORMÁTICA 4°: CLASE 59 TABLAS EN HTML

Fin en mente: Aplicar en un programa de HTML la etiqueta de TABLAS <table> </table>

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 etiquetas <table> y </table>.

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

<table>

</table>

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

Además de los atributos específicos de cada celda o línea, las tablas pueden ser adicional mente formateadas a partir de los atributos que nos ofrece la propia etiqueta <table>. He aquí aquellos que pueden parecernos en un principio importantes:

align	Alinea horizontalmente la tabla con respecto a su entorno.
background	Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen.
bgcolor	Da color de fondo a la tabla.
border	Define el número de pixels del borde principal.
bordercolor	Define el color del borde.
cellpadding	Define, en pixels, el espacio entre los bordes de la celda y el contenido de la misma.
cellspacing	Define el espacio entre los bordes (en pixels).
height	Define la altura de la tabla en pixels o porcentaje.
width	Define la anchura de la tabla en pixels o porcentaje.

Los atributos que definen las dimensiones, height y width, funcionan de una manera análoga a la de las celdas tal y como ya lo hemos visto. Contrariamente, el atributo align no nos permite justificar el texto de cada una de las celdas que componen la tabla, sino más bien, justificar la propia tabla con respecto a su entorno.

Vamos a poner tres ejemplos de alineado de tablas, centradas, alineadas a la derecha y a la izquierda.

Ejemplo de tabla centrada

Esta tabla está centrada (aling="center"). Solo tiene una celda.

Este sería un texto cualquiera colocado al lado de una tabla centrada

Ejemplo de tabla alineada a la izquierda

Esta tabla está alineada a la izquierda (aling="left"). Solo tiene una celda.

Para que se vea el efecto de alineado a la tabla debemos colocar un texto al lado y el texto rodeará la tabla, igual que ocurría con las imágenes alineadas a un lado.

Los atributos cellpading y cellspacing nos ayudaran a dar a nuestra tabla un aspecto más estético. En un principio puede parecernos un poco confuso su uso pero un poco de practica será suficiente para hacerse con ellos.

En la siguiente imagen podemos ver gráficamente el significado de estos atributos

EJEMPLO DE TABLAS

<html>

<head>

<title> Tabla 1 </title>

</head>

<body>

<h3> Esto es una tabla con 3 columnas y una fila </h3>

Hola

</TD> </p> </font>

Hola

</TD> </p> </font>

Hola

</TD> </p> </font>

</TABLE>

<h3> Esto es una tabla con 3 columnas y 2 filas </h3>

<TR>

<TD WIDTH=100 bgcolor="yellow"> <p align="center"> <font face="arial" color="blue"> 1

</TD> </p> </font>

<TD WIDTH=100 bgcolor="yellow"> <p align="center"> <font face="arial" color="blue">2

</TD> </p> </font>

<TD WIDTH=100 bgcolor="yellow"> <p align="center"> <font face="arial" color="blue">3

</TD> </p> </font>

</TR>

<TR>

<TD WIDTH=100 bgcolor="sky blue"> <p align="center"> <font face="arial" color="blue">4

</TD> </p> </font>

<TD WIDTH=100 bgcolor="sky blue"> <p align="center"> <font face="arial" color="blue">5

</TD> </p> </font>

<TD WIDTH=100 bgcolor="sky blue"> <p align="center"> <font face="arial" color="blue">6

</TD> </p> </font>

</TR>

</TABLE>

<h3> Esto es una tabla combinada con columnas y filas </h3>

<th colspan="4"> <font face="arial" color="blue"> DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th>

</tr>

<th rowspan="2"> <font face="arial" color="blue"> DIFERENCIAS</th>

<th colspan="2"> <font face="arial" color="blue">PERRO</th>

<th rowspan="2"> <font face="arial" color="blue"> HOMBRE</th>

</tr>

<th> <font face="arial">PEQUEÑO</th>

<th> <font face="arial">GRANDE</th>

</tr>

<td> <font face="arial">Duración crecimiento</td>

<td>10 meses</td>

<td>18 a 24 meses</td>

</tr>

<td> <font face="arial">Tiempo de gestación</td>

<td>9 meses</td>

</tr>

<td> <font face="arial">Duración de vida del pelo/cabello</td>

</tr>

</table>

</body>

</html>

INFORMÁTICA 4°

Translate

sábado, 6 de marzo de 2021

CLASE 59 TABLAS EN HTML

No hay comentarios:

Publicar un comentario

Seguidores Miss Informática

Reloj