Tablas en HTML
Tablas en HTML.<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos contenidos.
Para empezar, nada más sencillo que por el principio: las tablas son definidas por las etiquetas <table> y </table>.
Dentro de estas dos etiquetas colocaremos todas las otras etiquetas, textos e imágenes que darán forma y contenido a la tabla. Las tablas son descritas por líneas de izquierda a derecha.
Cada una de estas líneas es definida por otra etiqueta y su cierre: <tr> y </tr>
Asimismo, dentro de cada línea, habrá diferentes celdas. Cada una de estas celdas será definida por otro par de etiquetas: <td> y </td>. Dentro de estas etiquetas será donde coloquemos nuestro contenido.
Ejemplo.
<table>
<tr>
<td>Celda 1, linea 1
</td>
<td> Celda 2, linea 1
</td>
</tr>
<tr>
<td> Celda 1, linea 2
</td>
<td> Celda 2, linea 2
</td>
</tr>
</table>
El objetivo fundamental de las tablas es mostrar una serie de datos en forma ordenada, organizado en filas y columnas.
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.
Ejemplo 01.
Realizar una tabla que muestre los nombre de países 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>
Tabla con encabezado (<th>)
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.
Ejemplo 02.
Realizar 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>
Tabla con título (<caption>)
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.
Ejemplo 03.
Agregar 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>
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>
Ejemplo 04.
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>
Tablas en HTML. Atributos de la tabla.
Además de los atributos específicos de cada celda o línea, las tablas pueden ser adicionalmente formateadas a partir de los atributos que nos ofrece la propia etiqueta <table>.
| 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. |
Tablas anidadas.
De la misma forma que podíamos incluir listas dentro de otras listas, las tablas pueden ser incluidas dentro de otras. Así, podemos incluir una tabla dentro de la celda de otra.
Ejemplo 05.
Anidación de tablas.
<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" />
Ejemplos 06.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Ejemplo de tabla</title>
</head> <body> <table align="center" cellspacing="2" cellpadding="2" border="1" bgcolor=dddddd> <tr> <td colspan="4" align="center" bgcolor="666666"><font color="#FFFFFF"><strong>Animales en peligro de extinción</strong></font></td>
</tr> <tr bgcolor="aaaaaa">
<td>Nombre</td>
<td align="center">Cabezas</td>
<td align="center">Previsión 2010</td>
<td align="center">Previsión 2020</td>
</tr> <tr> <td>Ballena</td> <td align="center">6000</td> <td align="center">4000</td> <td align="center">1500</td> </tr> <tr> <td>Oso Pardo</td>
<td align="center">50</td> <td rowspan="2" colspan="2" align="center" bgcolor="red">0</td> </tr> <tr> <td>Lince</td> <td align="center">10</td> </tr> <tr> <td>Tigre</td> <td align="center">300</td> <td colspan="2" align="center">210</td> </tr> </table> </body> </html>
Ejemplos 07.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Ejemplo de tabla</title>
</head> <body> <table cellspacing="4" cellpadding="4" border="1" width=400 bgcolor=dddddd> <tr> <td colspan="2" bgcolor="666666" align="center"><font color="#FFFFFF"><strong>Climas de América del Sur</strong></font></td> </tr> <tr> <td width="50%"> <table align="right" cellspacing="1" cellpadding="1" border="1"> <tr>
<td bgcolor="#cccccc" align="center">Venezuela</td>
</tr> <tr> <td bgcolor="#cccccc" align="center">Colombia</td>
</tr> <tr> <td bgcolor="#cccccc" align="center">Ecuador</td>
</tr> <tr> <td bgcolor="#cccccc" align="center">Perú</td> </tr>
</table> Parte de arriba de América del Sur. Países como:
</td> <td width="50%">
<table align="right" cellspacing="1" cellpadding="1" border="1"> <tr> <td bgcolor="#cccccc" align="center">Argentina</td> </tr> <tr> <td bgcolor="#cccccc" align="center">Chile</td> </tr>
<tr> <td bgcolor="#cccccc" align="center">Uruguay</td> </tr> <tr> <td bgcolor="#cccccc" align="center">Paraguay</td> </tr> </table>
Parte de abajo de América del Sur. Países como:
</td> </tr> <tr> <td bgcolor="#358391">Bosque tropical, clima de sabana, clima marítimo con inviernos secos.</td>
<td bgcolor="#358391">Climas marítimos con veranos secos, con inviernos secos, climas frios, clima de estepa, clima desértico.</td>
</tr> </table> </body> </html>