Cómo hacer una tabla en html (nivel básico)

• Elementos básicos de las tablas
• Los Atributos
• Alineación de las celdas
• Anchura de la tabla y de las celdas

Elementos básicos de las tablas

• la tabla
• filas
• celdas

Generalmente las páginas web se hacen a partir de tablas para asegurar que los contenidos mantienen una estructura fija.
Las tablas están formadas por muchos elementos. La forma de diseñaras es un sistema rígido y claro que determina la tabla completamente.
Vamos a ver un ejemplo:


<table border="1">
<tr>
<td>celda 1</td><td>celda 2</td>
</tr>
<tr>
<td>celda 3</td><td>celda 4</td>
</tr>
</table>



Con este código lo que sale es:

celda 1	celda 2
celda 3	celda 4

Esto es una tabla muy simple.



Los elementos que encontramos en ella son:

• <table> comienzo de la tabla.

• <tr> comienza una fila (Table Row).
El fin de la fila se indica: </tr>.

• <td> significa Table Data, es una celda. Cada elemento de estos que pongamos en esa fila quedará como una nueva celda a continuación de la anterior. Indicamos el final de la celda poniendo </td>.

• </table> Final de la tabla.

Las celdas se redimensionan para adaptarse a los datos que contienen por defecto. Todas las filas de la tabla tienen que tener el mismo número de celdas a menos que se usen atributos especiales que veremos luego.

Para escribir algo en una tabla es necesario que esté en una celda ( entre el <td>, </td> correspondiente de la celda). Y la celda debe de estar en una fila (entre el <tr> y </tr> correspondiente de la fila).

Hay que tener cuidado de cerrar todas las etiquetas porque como los elementos se contienen entre sí, por ejemplo los tr contienen a los tds y así, la tabla entera puede quedar arruinada cuando un navegador intente interpretarla.


Los Atributos

• border
• align
• width
• cellpadding
• cellspacing

Los atributos más básicos que vamos a definir son:

• border el borde alrededor de la tabla y entre sus

celdas se puede fijar a cualquier valor. la mayoría de las tablas tienen el border a 0 - es decir invisible.

• align indica el alineamiento, puede ser center (centrado), left (a la izquierda) o right (a la derecha)

• width especifica la anchura, puede dares en pixels o en porcentage de la anchura de la pantalla.



Ahora vamos con dos atributos que pueden parecer la misma cosa pero no lo son: cellpadding y cellspacing.

• cellpadding is es el espacio alrededor cualquier

cosa en la celda. Por ejemplo, en la primera celda de esta tabla, el cellpadding se fija a 0, y en el segundo es 5.

<table align="center" border="0"><tbody><tr>
<th><table bg border="1" cellpadding="0" width="150">
<tbody><tr><td>cell content</td></tr></tbody></table></th>

<th><table bg border="1" cellpadding="5" width="150">
<tbody><tr><td>cell content</td></tr></tbody></table></th>
</tr></tbody></table>

Con este código lo que sale es:

celda content	celda content

Notar que en la primera celda, el contenido toca con el borde, mientras que en la otra celda se ha desplazado hacia la derecha un poco.

• cellspacing es el espacio entre las celdas.

Las celdas están separadas unas de otras por una “frontera” . Ponemos un ejemplo donde los valores son de nuevo 0 y 5:


<table align="center" border="0"><tbody><tr>
<th><table bg border="1" cellspacing="0" width="200">
<tbody><tr><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td></tr></tbody></table></th>

<th><table bgcolor="#ffffff" border="1" cellspacing="5" width="200">
<tbody><tr><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td></tr></tbody></table></th>
</tr></tbody></table>


Queda:

celda celda celda celda	celda celda celda celda

El valor que se fija por defecto es 2 para ambos atributos si no se realiza ningún cambio.


Alineación de las celdas

No hay porqué alinear toda la tabla homogéneamente, se puede alinear solo una fila o una celda en concreto. Simplemente hay que poner el atributo align/valign en la etiqueta de la fila o celda en cuestión. Si lo ponemos en la etiqueta de la tabla se aplicará a todas las celdas de la tabla.

• <td align="right"> para alinear en una celda (a la derecha)

• <tr align="right"> para que el alineamiento afecte e la fila entera

Además hay que notar que se puede alinear texto, imágenes o lo que sea que contenga una celda.

Podemos alinear tanto en sentido horizontal como en vertical:

• align significa alineamiento horizontal. En la primera celda vemos un

alineamiento del texto centrado, y en la segunda está alineado a la derecha.

center

right

• valign significa alineamiento vertical (Vertical Align). En la primera celda el valor del valign es bottom y en la segunda valign="top" y en la tercera esta alineada al centro de la vertical.

bottom

top

middle

El valor por defecto de align es left y el valor de valign por defecto es middle.


Anchura de la tabla y de las celdas

Se puede añadir la cualidad width en la etiqueta de la tabla o en las celdas individuales.
Podemos fijar la anchura de la tabla y las celdas bien mediante pixeles o por porcentajes.

• Si se fija la anchura para toda la tabla es mejor mantener las anchuras por debajo de 750 pixeles. Al fijar el ancho como porcentaje se toma el porcentaje de la pantalla, y no hay que olvidar el % de la marca.

• Si se fija la anchura para cada celda en particular, en este caso se podrá dar la anchura en pixels o en porcentage de la tabla a la que estas celdas pertenecen.

Normalmente las celdas se adaptan dependiendo de lo que tienen dentro, pero si se quiere se puede especificar su ancho.
Una vez que se fije el ancho de una celda, las demás se establecerán conforme al espacio restante.
Hay que recordar que una celda puede contener imágenes, texto… cualquier cosa. De esta forma una tabla puede ser usada para poner todo el contenido de una página, y usarse para dejarlo con una presentación y unas alineaciones determinadas.