Dejamos atrás las listas y nos adentramos en las tablas. Con lo que vamos a aprender ahora, podremos estructurar nuestra pagina, gráficamente.
Con las tablas podremos organizar la información, los textos, imágenes, vínculos, etc.
Conseguiremos un diseño agradable y vistoso para nuestros documentos html, podremos crear horarios, calendarios, listados, incluso tomando los datos desde bases de datos.
La estructura de las tablas nos permiten ordenar en filas y columnas cualquier elemento, es mas profesional y controlado diseñar con tablas que con los atributos align, width, etc.
Para crear una tabla se utiliza el elemento <table>, que como casi las demás etiquetas que hemos visto requiere un inicio y un fin.
Entre esta etiqueta se utiliza la etiqueta <tr> para describir las filas (table row), y la etiqueta <td> para describir las columnas (table data), ambas requieren etiqueta de inicio y de fin.
Cuando se define una celda en una fila, esa celda en otra fila será igual. También hay que tener en cuenta que si se definen mas celdas en una fila que en otra, las celdas "sobrantes" se extienden por el lado derecho dejando una tabla construida incorrectamente.
Código de Ejemplo de una tabla simple:
<html>
<head>
<title>Tablas - formato básico</title>
</head>
<body>
<table border=1>
<tr>
<td>Pepe</td>
<td>622 622 622</td>
</tr>
<tr>
<td>Maria</td>
<td>588 588 588</td>
</tr>
<tr>
<td>Juan</td>
<td>888 555 444</td>
</tr>
<tr>
<td>Abundancia</td>
<td>99 99 99 99</td>
</tr>
</table>
</body>
</html>
Representación en el navegador:
| Pepe | 622 622 622 |
| Maria | 588 588 588 |
| Juan | 888 555 444 |
| Abundancia | 99 99 99 99 |
En el ejemplo hemos agregado el atributo "border" para que se muestren los bordes de las celdas.
Podéis encontrar más información sobre este tema en: Universidad de MurciaABUNDANCIA ABUNDANCIA ABUNDANCIA ABUNDANCIA ABUNDANCIA
Temas anteriores * http://bobuu.blogspot.com
71.- HTML - Listas anidadas
70.- HTML - listas y párrafos
69.- HTML - Listas descriptivas <dl><dt>...</dt><dd>...</dd></dl>
mas ... acceder al índice de temas ...
** Agradecemos visitéis nuestros Sponsors. 
No hay comentarios:
Publicar un comentario
Gracias por tu comentario, en un maximo de 48 horas sera publicado.