27 julio 2007

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 marpulpocalamar


<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 derechaderechacentro
<td align="right">XXX</td><td align="right">XXX</td><td align="center">XXX</td>
Alineación vertical en la parte superior
ArribaAbajo
<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>




GloboCometa
balónpelota




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




GloboCometa
balónpelota



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



GloboCometa
balónpelota




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>



GatoPanteraTigre
PumaLeónLeopardo



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



GatoPanteraTigre
PumaLeónLeopardo



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 filase supone que debe tener color rojo de fondode no ser así, a ver qué pasa y cómo puedo arreglarlo
nueva filaesta vez sin color de fondopara comparar con la anterior
y esta tercera filapara comprobar si funcionacon 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 verdecelda con fondo color rojocelda con fondo color #ff6600
celda sin color de fondo fondo azul, letra color amarillo con fontcelda 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>


20 comentarios:

Graciela dijo...

Hola como estás!!!, intructiva ésta entrada. Gracias y la voy a utilizar. Hasta cada momento.

Miranda dijo...

Bienvenida, Graciela.
Me alegra que sea de ayuda!
Un saludo.

guarabayo dijo...

Hola, que tal? Muchas gracias por tu ayuda, yo he aplicado las tablas para una clasificatoria de un blog de fútbol, pero no se si me puedes ayudar para saber cómo puedo darle color a simplemente una fila, o sólo el texto... gracias de antemano...

Miranda dijo...

Hola, guarabayo, bienvenido!

puedes cambiar el color del texto utilizando el siguiente código, aún dentro de la tabla:
<span style="color: rgb(255, 0, 0);">Para cambiar de color (aqui­, rojo)</span>

Si no recuerdo mal también se puede utilizar <font color="red/blue/green... o #ff0066">texto</font>

En cuanto a darle color a una sola fila o columna,lo único que se me ocurre es utilizar un color de subrayado del texto para cada celda (dudo que pueda hacerse de otra forma), pero desgraciadamente no sé cómo se hace. Si me entero de algo, te aviso.

Un saludo.

guarabayo dijo...

Muchas gracias, no me esperaba una respuesta tan rápida y la verdad es que dice mucho de ti, en cuanto tenga tiempo pruebo a aplicar tus instrucciones a ver como queda, me alegra que te gustara mi blog, saludos!!! Por cierto, admito sugerencias...

Jorval dijo...

Excelente tutorial, pero tengo un problema: al ver la tabla en el blog esta aparece dejando un inmenso espacio en blanco respecto al texto que le antecede ¿cómo puedo acortarlo? Gracias.

Miranda dijo...

Hola, Jorval, bienvenido.

He estado buscando en tus blogs a ver si veía la tabla que comentas; imagino que no la has utilizado porque no te gustaba como quedaba (eso o que mi búsqueda ha sido mala!).
En principio no depende de la tabla, pues éstas siempre se visualizan pegadas al texto. Se me ocurre que puede ser:
1. por haber utilizado el atributo párrafo (< p >) y que éste acabe justo antes de la tabla, aunque en principio no debería afectar a la tabla para nada.
2. que te hayas pasado al editor de texto (el otro que ofrece Blogger, distinto al editor en HTML de las entradas) y éste entienda que lo has separado demasiado.

No se me ocurre nada más, la verdad, no me ha pasado hasta ahora con ninguna tabla, y no creo que sea por el tamaño de la tabla, porque ésta tenga una foto demasiado grande o algo así, ¿no?
¿Te pasa sólo en las entradas o es en la barra lateral?

Un saludo, y disculpa que no te conteste al blog, voy con prisas hoy.

Jorval dijo...

Gracias por tu respuesta. En mi blog, si le das clic a “Ver todo mi perfil" encontraras un blog que denomino “Mis Apuntes de Ciencias”. La famosa tabla aparece en la entrada “Los ácidos nucleicos”.
Estuve viendo en la Ayuda de blogger y alli encontré: “Cuando inserto tablas en mis entradas, aparecen líneas adicionales en blanco. ¿Cómo puedo eliminarlas?” Hice lo que alli indican , pero el asunto continúa igual. Si es que puedes darle un segundo vistazo mucho te lo agradecerá. Saludos.

mister x dijo...

oh!

excelente tutorial amigo ;)

esta no la conocia y me ayudara un buen resto en el blog

saludos!

Eloir Maciel dijo...

Hola, excelente trabajo de ayuda. Y es de ayuda que necesito. Cuando publico mi tabla como "nueva entrada" queda un espacio muy grande entre ella y el título y No consigo eliminarlo.

Karenvon dijo...

Hola miranda hace mucho te escribí con una duda, porque siempre saco truquitos de tu blog. Ahora nuevamente estoy dudosa, y es que trato de utilizar el atributo de las tablas para ponerle borde a una foto dentro de mi blog, pero resulta que me queda por defecto alineada la imagen (y la tabla por cierto) a la izquierda y por más que trato de centrarla de mil formas, no me resulta. HELP ME

Saludos desde chile

Karen ;=)

Ivan CF dijo...

hola!!!..gracias por la información es buena;...permitanme colaborar -->>esto le va para "Eloir Maciel "...k tiene el problema k le sale el espacio grande cuando publica una tabla; sabes blogger completa los saltos de linea automaticamente un es decir cuando tu codifiques procura hacerlo todo en una linea, si el codigo es muy grande procura en lo maximo no hacer saltos de linea, tu solo escribe y k solo vaya saltando pork si tu haces saltos de linea, blogger entiende k debe agregar mas saltos para adaptarlo...asi k solo junta más tu codigo ...claro se vera amontonado, y es horrible pero bueno solo haci lograras eliminar ese espacio...espero te sirva esta información, yo tuve le mismo problema pero lo soluciones así...suerte!!!! más información aki:--->>>> http://help.blogger.com/bin/answer.py?answer=41592&topic=12508

Persio dijo...

Gracias por toda la información que aportas.
Me va a ser muy útil.

Federico dijo...

Muy buena esta información! Aún así, no logro solucionar lo que intento.. :(

Yo he creado una tabla, luego, le coloque una imagen de fondo, que no se repite y se encuentra arriba a la izquierda. Hata ahí, todo perfecto... Ahora, como hago para darle una separación para que la imagen no se posicione justo pegada a la parte de arriba. (recorda que es una imagen de fondo, no una que se enceuntra en la tabla).

Muchas gracias y espero que puedas ayudarme!

Saludos,

Carol. Schroder dijo...

Miranda, espero que puedas ayudarme, he creado una tabla en mi blog, pero por ser novata no logro dar con este punto, y es que entre el titulo de la entrada y la tabla queda bastante espacio y no se ve bien.

si quieres por favor comprueba para que me entiendas...

es http://orquiadictosdominicanos.blogspot.com

ALGUIEN EN EL MUNDO dijo...

Un gusto conocerte realmente exelente explicacion del uso de tablas, claro como el agua y de mucha utilidad
nos seguiremos viendo
cariños
Noemi

Nane dijo...

Muchas gracias, me quedó todo más que claro. La tabla me quedo mucho mejor de lo que esperaba!. De verdad se agradece la ayuda n_n

Rafoso dijo...

Hola, no le entendi,, necesito poner unas listas en mi blog para calificaciones de mis alumnos, soy maestro, podrias ayudarme? espero que si, saludos desde mexico, rafael torres, te dejo mi email, espero me puedas ayudar:
rafoso30@hotmail.com

Flash dijo...

Está muy currada la información,muy intuitiva y tremendamente útil.

kuhurobe dijo...

pimples are really annoying, you can kill them using benzoyl peroxide but it will also make your skin red.

cialis online