Actualmente, una de las herramientas html más ampliamente usadas para crear artísticamente una web, son las tablas html. Si se domina la creación de las tablas html, ya no estás simplemente creando una página Web, sino que estás diseñando una. La variedad de las tablas disponibles es extensa, no tenemos desde un simple recuadro a diseños muy complejos. Hablaremos a continuación las tablas más básicas y algunos trucos y consejos para que experimentes en el diseño de tu propia página Web, y que ha la gente le encantará visitar.
De nuevo, comentamos que toda la información que quieres que aparezca en la ventana de tu navegador, debe ir entre las etiquetas <body> y su terminación </body> en el documento html. La etiqueta que comienza una tabla en tu código Web, es el siguiente:
- <table>
Cada fila horizontal en una tabla, empieza con la etiqueta:
- <tr>
Y cada parte de los datos dentro de estas filas debe comenzar con la etiqueta siguiente:
- <td>
Conociendo estas tres etiquetas, ya podemos empezar a crear tablas sencillas como la del ejemplo siguiente. Crearemos una tabla con dos filas y dos columnas que tendrán que llevar el código mostrado después de la tabla:
| (A1) | (A2) |
| (B1) | (B2) |
Para crear la tabla anterior, lo primero que tendremos que hacer es abrir la etiqueta correspondiente:
- <table> – empieza la tabla
- <tr> – Empieza la primera fila
- <td> – Comienza la primera celda de datos donde está el A1
- </td> – Cierra la celda de datos
- <td> – Comienza la segunda celda con el A2
- </td> – Cierra la celda de datos
- </tr> – Cierra la primera fila
- <tr> – Empieza la segunda fila
- <td> – Empieza la primera celda de datos en la segunda fila B1
- </td> – Cierra la celda de datos
- <td> – Empieza la celda con el B2
- </td> – Cierra la celda de datos
- </tr> – Cierra la segunda fila
- </table> – Cierra la tabla de ejemplo
A muchos diseñadores les gusta dar diferentes tipos de formato a las tablas para que sean más fáciles de leer. Un ejemplo de esto, es poner unos bordes al esqueleto de la tabla. Para ello también existe una etiqueta de bordeado que se pone en la etiqueta inicial de la tabla y que sería la siguiente: (border=”value”).
Puedes especificar en el campo ”value” como de gruesa quieres que sea la línea de bordeado, aplicando un valor. En nuestro caso hemos puesto un uno. Es aconsejable experimentar con los diferentes valores para ver como se mostrarán en nuestro navegador. Si no quieres que se muestre ningún borde, asigna un valor de “cero”.
Hay muchos atributos que se puede asociar a una tabla. En la siguiente sección veremos algunas de estos atributos como por ejemplo, cambiar el color de fondo de nuestras tablas html. Haz clic en el enlace para poder verlo: