oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS
Curso HTML - Lección 10: ¿Qué son las tablas?
Las tablas resultan especialmente útiles cuando necesitamos mostrar "datos en forma de tabla".
Al principio el código utilizado al crear tablas puede parecer algo confuso pero vamos a tratar de explicarlo para que quede lo más claro posible. Veamos un ejemplo:
Ejemplo 1:
<table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
y todo este código lo interpretará de la siguiente forma nuestro navegador:
| Celda 1 | Celda 2 | Celda 3 |
| Celda 4 | Celda 5 | Celda 6 |
¿Direfencias entre <tr> y <td>?
Bien pues <table> es el elemento que utilizaremos para insertar una tabla y evidentemente inician y finalizan la tabla. El elemento <tr> significa "linea de tabla" con lo cuál inicia y finaliza las líneas horizontales de la tabla. Por otra parte <td> significa "datos de tabla" e iniciará y finalizará cada una de las celdas que componen las filas de la tabla.
Ahora mira el código del ejemplo anterior y verás como tiene su lógica. Sencillo ¿no? si no lo ves claro preguntanos en el Foro OTW.
Pero para darte una descripción todavía más detallada te dire que: las filas son líneas horizontales de celdas y las columnas son líneas verticales de celdas.
En el ejemplo anterior la celda 1, la celda 2 y la celda 3 forman una fila y la celda 1 y la celda 4 forman una columna.
Atributos para el elemento "table".
Vamos a ver algún atributo para el elemento "table"
Empezaremos por el atributo "border" que se usa para especificar el grosor que le queremos dar al borde de la tabla. Veamos un ejemplo:
Ejemplo 2:
<table border="1">
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
lo veremos de la siguiente manera en el navegador:
| Celda 1 | Celda 2 | Celda 3 |
| Celda 4 | Celda 5 | Celda 6 |
¿Qué podemos insertar en las tablas?
Supuestamente se puede colocar cualquier cosa que deseemos, texto, imágenes, enlaces, etc... pero para utilizar las tablas correctamente lo suyo es insertar solamente datos en forma de tabla. No hace muchos años usabamos las tablas para diseñar todo el contenido de las webs pero quedaba todo un poco ortopédico, en los nuevos tiempos lo suyo es diseñar la web mediante capas (div) y usando CSS (ya veremos que es CSS más adelante).
Para quedarte bien de como hacer tablas tirate una hora más o menos creando tablas, es lo mínimo que puedes hacer para quedarte bien con el concepto y luego sigue con la segunda parte de las tablas en la lección siguiente.
©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es
Design By: JTole®