Cómo crear tablas

Las tablas que podemos crear en nuestro blog se basan en el código HTML. Es posible que ya hayáis utilizado alguna, quizás sin saberlo -no sería la primera vez que me ocurre a mí...

Para empezar lo primero que hemos de saber es que las tablas se crean mediante estas etiquetas:

<table>XXX</table>

Todo lo que situemos entre dichas etiquetas adoptará la forma de una tabla. Pero esto no es suficiente. La etiqueta table puede tener multitud de atributos, si bien el más importante es < tbody > < /tbody > (table body = cuerpo de la tabla), ya que sin ésta etiqueta dentro de la etiqueta table es difícil conseguir los efectos deseados. Vamos a ver cuáles son esos atributos:

Borde

Tamaño de la tabla

Alineacion del texto dentro de la tabla

Color e imagen de fondo

Separación entre celdas

Espaciado dentro de la celda

Celdas: filas y columnas

Ampliación: color de fondo para una fila o una celda

Borde

El borde de la tabla es translúcido por defecto y tiene un grosor determinado que podemos modificar. Para cambiar el color utilizaremos el atributo border, señalando entre comillas el número del grosor que deseamos para el borde general de la tabla:

<table border="1"><tbody><tr><td></td></tr></tbody></table> (tamaño por defecto)

<table border="5"><tbody><tr><td></td></tr></tbody></table>

<table border="9"><tbody><tr><td></td></tr></tbody></table>

Por el contrario, si lo que queremos es que el borde no sea visible el número a emplear será el 0:

Border="0"

Si lo que queremos es cambiar el color del borde utilizaremos el atributo bordercolor:

<table border="1" bordercolor="red"><tbody><tr><td></td></td></tbody> </table>

<table border="1" bordercolor="red"><tbody><tr><td></td></td></tbody> </table>

Tamaño de la tabla

El tamaño de la tabla se ajustará por defecto al contenido de la misma, pero podemos modificar su tamaño
en altura: height="número de pixeles",
y en anchura: width="número".

<table border="1" height="90" width="70"><tbody><tr><td></td></tr></tbody>/table>

<table border="1" height="60" width="150"><tbody><tr><td></td></tr></tbody></table>

El orden, por lo general, es: primero el borde (border), segundo la anchura (width) y tercero la altura (height), aunque, por lo general, el editor de texto de Blogger nos corrige los códigos en cuanto órden, así que tampoco le prestéis demasiada atención.

Color e imagen de fondo

El color de fondo de la tabla se añade mediante el atributo bgcolor (bgcolor="XX") dentro de la etiqueta de la tabla:

<table bgcolor="yellow"><tbody><tr><td></td></tr></tbody></table>

<table bgcolor="#ff3311"><tbody><tr><td></td></tr></tbody></table>

Mientras la imagen se añade con el atributo background (background="URL de la imagen"):

<table background="http://i176.photobucket.com/albums/w192/comerxcomer/florfondo.jpg"> <tbody><tr><td></td></tr></tbody></table>

Celdas: filas y columnas

En general, las tablas están subdivididas en filas y columnas, recibiendo el nombre de celda cada uno de los recuadros internos de las mismas. ¿Cómo se consigue crear filas y columnas en el HTML? Muy sencillo: con las etiquetas <tr></tr> (table row) creamos las filas y con <td></td> (table data) dividimos dicha fila en celdas, tantas como queramos. Veamos un ejemplo:

<table border="1"><tbody><tr>caballito de mar</tr></tbody></table>

caballito de mar

<table border="1"><tbody><tr><td>caballito de mar</td><td>pulpo</td><td>calamar</td></tr></tbody></table>

caballito de mar

pulpo

calamar

<table><tr><td>caballito de mar</td></tr><tr><td>pulpo</td></tr><tr><td>calamar</td></tr></table>

caballito de mar

pulpo

calamar

Alineación del texto dentro de la tabla

El texto que escribamos dentro de cada celda (td) puede ser alineado arriba, abajo, en el centro, a la derecha o a la izquierda. La alineación horizontal por defecto es la izquierda y la alineación vertical, en el centro. Para cambiarla nos situaremos en la etiqueta td y dentro de ella señalaremos la alineación horizontal, denominada align y la alineación vertical, valign (vertical align).

alineación por defecto: izquierda y centro

Alineación horizontal a la derecha	derecha	centro
<td align="right">XXX</td>	<td align="right">XXX</td>	<td align="center">XXX</td>
Alineación vertical en la parte superior	Arriba	Abajo
<td valign="top">XXX</td>	<td valign="top">XXX</td>	<td valign="bottom">XXX</td>

Podemos utilizar los dos atributos de celda juntos:

<table border="1"><tbody><tr><td align="center" valign="top"></td></tr></tbody></table></p>

Separación entre celdas

La separación entre celdas es de 2 pixeles por defecto, pero podemos modificar aumentarla mediante el atributo cellspacing (cellspacing="XX"):

<table border="1" cellspacing="4">

<tbody>

<tr>

<td>

Globo

</td>

<td>

Cometa

</td>

</tr> <tr>

<td>

balón

</td>

<td>

pelota

</td>

</tr>

</tbody>

</table>

Globo	Cometa
balón	pelota

<table border="1" cellspacing="10">

<tbody><tr><td>Globo</td>

<td>Cometa</td></tr>

<tr><td>balón</td>

<td>pelota</td></tr>

</tbody>

</table>

Globo	Cometa
balón	pelota

<table border="1" cellspacing="25">

<tbody>

<tr><td>Globo</td>

<td>Cometa</td></tr>

<tr><td>balón</td>

<td>pelota</td></tr>

</tbody>

</table>

Globo	Cometa
balón	pelota

Espaciado dentro de las celdas

Al igual que podemos modificar la separación entre las celdas, podemos hacer con el espacio existente entre los bordes de la celda y el texto o contenido de la misma. En este caso el atributo se denomina cellpadding (cellpadding="XX"):

<table border="1" cellpadding="9">

<tbody><tr><td>Gato</td>

<td>Pantera</td>

<td>Tigre</td></tr>

<tr><td>Puma</td>

<td>León</td>

<td>Leopardo</td></tr>

</tbody></table>

Gato	Pantera	Tigre
Puma	León	Leopardo

<table border="1" cellpadding="15">

<tbody><tr><td>Gato</td>

<td>Pantera</td>

<td>Tigre</td></tr>

<tr><td>Puma</td>

<td>León</td>

<td>Leopardo</td></tr>

</tbody></table>

Gato	Pantera	Tigre
Puma	León	Leopardo

Por supuesto, podemos mezclar el espaciado y la separación entre celdas en una misma tabla, al igual que, supuestamente, puede hacerse con cualquiera de los atributos de la tabla y las celdas, todo depende del resultado que busquéis y de las ganas que tengáis de complicaros... jaja


Como último dato, comentaros que las etiquetas pueden ir todas seguidas o en distinta línea, es indistinto, el efecto será el mismo si escribís:

<table border="1" cellpadding="15">

<tbody><tr><td>Gato</td>

<td>Pantera</td>

<td>Tigre</td></tr>

</tbody></table>


Como si lo escribís así:

<table border="1" cellpadding="15"><tbody><tr><td>Gato</td><td>Pantera</td><td>tigre</td></tr></tbody></table>

(es posible que aquí el código se corte, pero os aseguro que está todo seguido)

Ampliación: color de fondo para una fila o una celda

Aquí os presento dos tablas de prueba con distintos colores de fondo, la primera por filas y la segunda de ellas por celdas. Esta segunda me ha dado problemas, al mezclarse los colores de fondo con el de la fuente del texto, no sé bien cómo quedarán cuando publique la entrada... Espero que os sea de ayuda.

prueba de color para esta fila	se supone que debe tener color rojo de fondo	de no ser así, a ver qué pasa y cómo puedo arreglarlo
nueva fila	esta vez sin color de fondo	para comparar con la anterior
y esta tercera fila	para comprobar si funciona	con color verde de fondo

<table border="3"><tbody>

<tr bgcolor="red"><td>prueba de color para esta fila</td>

<td>se supone que debe tener color rojo de fondo</td>

<td>de no ser así, a ver qué pasa y cómo puedo arreglarlo</td></tr>

<tr><td>nueva fila</td><td>esta vez sin color de fondo</td>

<td>para comparar con la anterior </td></tr>

<tr bgcolor="green"><td>y esta tercera fila</td><td>para comprobar si funciona</td>

<td>con color verde de fondo</td></tr>

</tbody></table>

celda con fondo color verde	celda con fondo color rojo	celda con fondo color #ff6600
celda sin color de fondo	fondo azul, letra color amarillo con font	celda sin color de fondo, letra color rojo con span

<table><tbody>

<tr><td bgcolor="green">celda con fondo color verde</td>

<td bgcolor="red">celda con fondo color rojo</td>

<td bgcolor="#ff6600">celda con fondo color #ff6600</td></tr>

<tr><td>celda sin color de fondo</td>

<td bgcolor="blue">

<span style="color:yellow;">fondo azul, letra color amarillo con font</span></td>

<td><span style="color: rgb(255, 0, 0);">celda sin color de fondo, letra color rojo con span</span></td></tr>

</tbody></table>