Inducción a las tablas HTML PARTE I

La tabla es el conjunto de celdas constituidas dentro de las cuales se pueden alojar diferente información. HTML da la posibilidad de una gran distinción de etiquetas para elaborar tablas, con sus atributos, de las cuales se verá una introducción en el tema de hoy.

En un comienzo os podría parecer que las tablas son escasamente beneficiosas y que logran ser manejadas primordialmente para listar datos como agendas, deducciones y otros datos de una manera ordenada. En resumen, funcionan para personificar archivada tabulada, en filas y columnas. Esto es un hecho que se ha ido dando en los últimos años, desde que las tablas se han apartado para fines con relación a la maquetación.

Como se verá seguidamente, hay diferentes etiquetas que se tienen que manejar de una manera concreta para la creación de tablas. Por eso, puede que en un comienzo os refleje un poco complejo trabajar con estas estructuras pero, con un poco de práctica se pueden hacer tablas con absoluta soltura. Si se quiere enseñar datos de una forma fácil de leer, dispuestos en filas y columnas, más tarde que temprano apreciarán que las tablas son la mejor solución y estimarán las posibilidades que os brindan.

Etiquetas primordiales para tablas en HTML

Para comenzar, nada más fácil que por el comienzo: Las tablas son concretadas por las etiquetas <table> y </table>.

Dentro de esas dos etiquetas se pondrá todas las otras etiquetas de las tablas, hasta alcanzar las celdas. Dentro de las celdas pueden acceder a situar el texto e imagen que brindarán el contenido a la tabla.

Las tablas son explicadas por líneas de arriba a abajo (y después por columnas de izquierda a derecha). Cada una de esas líneas, llamada fila, es concretada por otra etiqueta y su cierre: <tr> y </tr>

Conjuntamente, dentro de cada línea, apelarán distintas celdas. Cada una de estas celdas será concretada por otras etiquetas: <td> y </td>. Dentro de esas etiquetas es donde pondrán vuestro contenido.

Por ello aquí conseguiréis un ejemplo de estructura de tabla:

<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 resultado:

Celda 1, linea 1 Celda 2, linea 1
Celda 1, linea 2 Celda 2, linea 2

Propiedades para tablas, filas y celdas

Partiendo de esta idea fácil y sencilla, las tablas obtienen otra dimensión cuando le incorporan toda una batería de atributos estudiosos sobre cada tipo de etiquetas que las constituyen.

En relación a los atributos para tabla hay variados. La mayoría de ellos se conocen ya de otras etiquetas, como width, height, align, etc. Hay otros que son fundamentalmente elaborados para las etiquetas TABLE.

  • cellspacing: Es el espacio entre celdas de la tabla.
  • cellpadding: Es el espacio entre el borde de la celda y su contenido.
  • border: Es el número de píxeles que poseerá el borde de la tabla.
  • bordercolor: Es el rbg que le vas a determinar al borde de la tabla.