Dejamos atrás las listas y nos adentramos en las tablas. Con lo que vamos a aprender ahora, podremos estructurar nuestra página, 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 más 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 más 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>
Programa 54
Representación en el navegador:
En el ejemplo hemos agregado el atributo "border" para que se muestren los bordes de las celdas.
No hay comentarios:
Publicar un comentario