En una reciente limpieza a mi disco duro he encontrado esta guia que tenia guardada por ahi y creo que esta muy buena para empezar y conocer las nociones basicas del HTML.Tabla.
El objetivo fundamental de las tablas es mostrar una serie de datos en forma ordenada, organizado en filas y columnas.
Algo importante es que no utilizaremos las tablas para organizar la página completa (esto se hace en la actualizad mediante CSS, es decir hojas de estilo. Una vez que avance en este curso puede visitar CSS Ya)
Para la creación de una tabla intervienen una serie de elementos:
<table> Es la marca de comienzo de la tabla. Este elemento requiere la marca de cierre.
<tr> Es la marca de comienzo de una fila. Esta marca debe estar dentro del elemento table. Este elemento requiere la marca de cierre.
<td> Es la marca de comienzo de una celda. Esta marca debe estar dentro del elemento tr. Este elemento requiere la marca de cierre.
Para recordar el nombre de estos elementos HTML:
<table>
<tr> viene de table row que significa fila de la tabla.
<td> viene de table data que significa dato de la tabla.
La mejor forma de entender y dominar este concepto es implementar tablas y ver su resultado dentro del navegador. Confeccionemos una tabla que muestre los nombre de paises en una columna y su cantidad de habitantes en otra:
<html> <head> </head> <body> <table border="1"> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html>
Lo primero que aparece es la apertura del elemento table, donde inicializamos la propiedad border con el valor 1, con esto el contorno de cada celda será visible (pruebe de asignarle el valor cero y otros valores superiores a 1)
<table border="1">
Seguidamente viene la apertura de la primer fila de la tabla con el elemento tr:
<tr>
Continuamos con la apertura de la primer celda de la primer fila de la tabla:
<td>
Luego el dato propiamente dicho de la celda:
India
Cerramos la celda:
</td>
Abrimos la proxima celda:
<td>
Disponemos el valor de la celda:
1300 millones
Cerramos la celda:
</td>
Ahora cerramos la primer fila de la tabla:
</tr>
El mecanismos de la siguiente fila es similar a la primera.
La primer característica que le vamos a agregar a una tabla son las celdas de encabezado. Normalmente la primer fila de una tabla puede representar los títulos para cada columna.
Para indicar que se trata de una celda de encabezado utilizamos el elemento <th> en lugar de <td>
El navegador representa distinto las celdas de datos y las celdas de encabezamiento.
Confeccionemos el mismo problema del concepto anterior pero agregando un título a cada columna de la tabla mediante celdas de encabezamiento:
<html> <head> </head> <body> <table border="1"> <tr> <th>Paises</th><th>Cantidad de habitantes</th> </tr> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html>
Si observamos el código de la página para indicar que se trata de una celda de tipo encabezado utilizamos el elemento th:
<tr> <th>Paises</th><th>Cantidad de habitantes</th> </tr>
El elemento th debe estar contenido entre las marcas <tr> y </tr>, es decir pertenecen a una fila.
Para recordar el nombre de este nuevo elemento HTML:
<th> viene de table header cell que significa celda de encabezado de tabla.
Tabla con título.
Para disponer un título a una tabla debemos incorporar el elemento caption inmediatamente después que abrimos la marca table. El elemento caption requiere la marca de apertura y cierre.
Dispongamos un título a nuestra tabla con la población de distintos paises:
<html> <head> </head> <body> <table border="1"> <caption>Población de los paises con mayor cantidad de habitantes.</caption> <tr> <th>Paises</th><th>Cantidad de habitantes</th> </tr> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html>
Como podemos observar la marca caption está inmediatamente después que se abre la marca de comienzo de la tabla:
<table border="1"> <caption>Población de los paises con mayor cantidad de habitantes.</caption> <tr>
Para recordar el nombre de este nuevo elemento HTML:
<caption> significa título.
Tabla y combinación de celdas.
En algunas situaciones se necesita que una celda ocupe el lugar de dos o más celdas en forma horizonzal o vertical, para estos casos el elemento td o th dispone de dos propiedades llamadas rowspan y colspan.
A estas propiedades se les asigna un valor entero a partir de 2.
Si queremos que una celda ocupe tres columnas luego inicializamos la propiedad rowspan con el valor 3:
<td colspan="3">Facturación de los últimos tres meses</td>
Si por el contrario queremos que una celda se extienda a nivel de filas luego hacemos:
<td rowspan="3">Secciones</td>
Veamos un ejemplo empleando el concepto de combinación de celdas:
<html> <head> </head> <body> <table border="1"> <tr> <th rowspan="4">Recursos</th><th colspan="4">Facturación de los últimos tres meses</th> </tr> <tr> <td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td> </tr> <tr> <td>CPU</td><td>73000</td><td>67300</td><td>51000</td> </tr> <tr> <td>Monitores</td><td>53000</td><td>72000</td><td>88000</td> </tr> </table> </body> </html>
Veamos como definimos la primer fila de la tabla:
<tr> <th rowspan="4">Recursos</th><th colspan="4">Facturación de los últimos tres meses</th> </tr>
Como podemos observar la primer celda la expandimos hacia abajo 4 casilla y la segunda celda la expandimos hacia la derecha en 4 celdas.
Cuando tenemos que disponer las celdas de la segunda fila debemos tener en cuenta que la primera está ocupada. Luego el código es:
<tr> <td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td> </tr>
Si te ha gustado el artículo inscribete al feed clicando en la imagen más abajo para tenerte siempre actualizado sobre los nuevos contenidos del blog:
0 comments:
No insertes enlaces clicables, de lo contrario se eliminará el comentario. Si quieres ser advertido via email de los nuevos comentarios marca la casilla "Notificarme". Si te ayudé con la publicación o con las respuestas a los comentarios, compártelo en Facebook, Twitter, Tumblr, Google +, Pinterest o Instagram. Gracias.