|  |
Buenos Aires, 26 de octubre de 2000 - 20:08 hs.
Última actualización 16:02
Guía práctica de HTML (3era entrega)
Cómo hacer un sitio ordenado
El éxito o el fracaso de un sitio web dependen en gran parte de la forma en que esté estructurada la información en sus páginas. En la tercera entrega del curso para construir sitios web aprenderemos a manipular las "tablas" para poner distribuir la información en forma ordenada.
De todas las cosas que se pueden hacer con una página web, ordenarla en forma correcta es, sin duda, una de las más complicadas. La herramienta por excelencia para ordenar la información son las tablas. Aunque muchas veces no se ven, las tablas están presentes en la gran mayoria de los sitios de Internet y son tan importantes que sin ellas prácticamente no se puede organizar la información de una manera clara.
Las tablas son, lisa y llanamente, el recurso más poderoso para diseñar páginas, consiguiendo efectos imposibles de obtener en HTML por otros medios. Por esto que dedicamos toda esta entrega a este elemento, sus utilidades y atributos.
Las etiquetas básicas para construir una tabla son:<TABLE></TABLE> Marca el principio y el fin de la tabla.
<TR></TR> Establece las filas dentro de la tabla (TR es por Table Row)
<TD></TD> Engloba una celda de datos de la tabla (Table Data)
<TH> Engloba una celda de encabezados de la tabla (Table Header)
Para incluir en la página información sobre, por ejemplo, la distancia de los planetas con respecto al sol según las mediciones de diferentes científicos, el código de una tabla ordenada sería:
<html>
<head>
<title> Ejercicio de Tablas </title>
</head>
<body>
<table>
<caption> Distancias medias estimadas en los planetas con respecto al sol <tr bgcolor= "#008080">
<td></td>
<td> Copernico </td>
<td> Kepler </td>
<td> Siglo XX </td>
<tr bgcolor= "#C0C0C0">
<td> Mercurio </td>
<td> 0.3736 </td>
<td> 0,5566 </td>
<td> 0.7783 </td>
<tr bgcolor= "#008080">
<th> Venus </th>
<td> 0.71893 </td>
<td> 0.33545 </td>
<td> 0.65436 </td>
</table>
</body>
</html>
En éste ejemplo se usa la etiqueta captionpara darle una descripción o título a la tabla (únicamente puede ir inmediatamente despues de la etiqueta de inicio de la etiqueta table y sólo puede haber un caption por tabla).
Aemás, en esta tabla se le asignó color a cada fila con el atributo bgcolor ("back ground", o color de fondo), dandole el valor en hexadecimal o mediante palabras como ya vimos en la entrega anterior (clic aquí para ir a la entrega anterior).
La etiqueta <table> </table> encierra toda la estuctura. TR delimita las filas actuando como un contenedor de celdas, y estas se definen mediante la etiqueta TD. Por defecto presenta el contenido de los elementos TD alineados a la izquierda, y establece automáticamente el ancho total de la tabla y el de cada una de las celdas.
Este ejemplo se muestra así en el navegador: Distancias medias estimadas en los planetas con respecto al sol | Copernico | Kepler | Siglo XX | | Mercurio | 0.3736 | 0,5566 | 0.7783 | | Venus | 0.71893 | 0.33545 | 0.65436 |
Próxima página » 1. Cómo crear tablas reforzadas
Terra
| Los mensajes publicados
por los usuarios no sufren revisión ortográfica o de redacción
alguna. Ver reglamento de aprobación. | | Mensajes publicados en esta nota: 0 | | |  
 |
| |
 Partes de esta nota |
 Noticias
relacionadas |
|
|
Descargá Terra en tu computadora de mano
Siga por mail sólo los temas que le interesan.
Flashes, cotización del dólar, clima y horóscopo.
)
Descargá tus programas preferidos
Las noticias de la era digital
Tutoriales para construir sitios web