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