Pregunta Ricardo de Alicante, España cómo crear tablas en las entradas del blog. Si bien es algo sencillo requiere de un poco de atención para poder entender, así que haré mi mayor esfuerzo para explicarme.
El código básico para insertar una tabla es el siguiente:
El resultado es este:
Nótese que las tres primeras palabras forman la primera fila, luego las otras tres forman la segunda fila y las tres últimas la tercera fila. Si deseas insertar una fila más agrega esta parte antes de </tbody></table>
Del mismo modo si quisieras que cada fila tuviera más celdas entonces agrega las que quieras añadiendo las palabras entre las etiquetas <td> </td> antes de cada </tr>
Ya teniendo claro esto, ahora podemos personalizar las tablas añadiendo unos atributos.
El borde de la tabla es el más delgado, si lo quieres más grueso cambia border="1" por un número más alto, si lo dejas en "0" se quedará sin borde.
Para cambiar el color del borde de la tabla añadimos después de <table el atributo
bordercolor="green" el color lo puedes cambiar, por ejemplo "red"
Si quieres usar un color de fondo en toda la tabla agrega bgcolor="yellow" después de <table. El color lo puedes cambiar.
Este efecto también lo puedes agregar sólo a las celdas que quieras para que cada fila tenga distintos colores. Para hacer eso se usa el mismo atributo, pero en vez de ponerlo después de<table lo pones después de la etiqueta <tr por ejemplo:
Este fue el código para hacer eso:
También puedes poner una imagen de fondo en la tabla, para lograr eso agregabackground="URL de la imagen" después de <table. Yo he puesto una imagen animada (.gif) en el ejemplo.
Como verás después de entender el código básico todo lo demás resulta fácil. De cualquier modo puedes probar los resultados y variaciones en un blog de pruebas antes de publicarlo.
El código básico para insertar una tabla es el siguiente:
<table border="1" cellpadding="4"><tbody>
<tr><td>Mesa</td>
<td>Silla</td>
<td>Cama</td></tr>
<tr><td>Carro</td>
<td>Barco</td>
<td>Avión</td></tr>
<tr><td>Lunes</td>
<td>Martes</td>
<td>Miércoles</td></tr>
</tbody></table>
El resultado es este:
| Mesa | Silla | Cama |
| Carro | Barco | Avión |
| Lunes | Martes | Miércoles |
Nótese que las tres primeras palabras forman la primera fila, luego las otras tres forman la segunda fila y las tres últimas la tercera fila. Si deseas insertar una fila más agrega esta parte antes de </tbody></table>
<tr><td>Palabra 1</td>
<td>Palabra 2</td>
<td>Palabra 3</td></tr>
Del mismo modo si quisieras que cada fila tuviera más celdas entonces agrega las que quieras añadiendo las palabras entre las etiquetas <td> </td> antes de cada </tr>
Ya teniendo claro esto, ahora podemos personalizar las tablas añadiendo unos atributos.
El borde de la tabla es el más delgado, si lo quieres más grueso cambia border="1" por un número más alto, si lo dejas en "0" se quedará sin borde.
| <table border="5" cellpadding="4"> <tbody><tr><td>Tabla con borde "5"</td></tr> </tbody></table> |
Para cambiar el color del borde de la tabla añadimos después de <table el atributo
bordercolor="green" el color lo puedes cambiar, por ejemplo "red"
| <table border="2" bordercolor="green" cellpadding="4"> <tbody><tr><td>Tabla con borde verde</td></tr> </tbody></table> |
Si quieres usar un color de fondo en toda la tabla agrega bgcolor="yellow" después de <table. El color lo puedes cambiar.
| <table border="2" bgcolor="yellow" cellpadding="4"> <tbody><tr><td>Tabla con fondo amarillo</td></tr> </tbody></table> |
Este efecto también lo puedes agregar sólo a las celdas que quieras para que cada fila tenga distintos colores. Para hacer eso se usa el mismo atributo, pero en vez de ponerlo después de<table lo pones después de la etiqueta <tr por ejemplo:
| Fila café | Fila café |
| Fila gris | Fila gris |
Este fue el código para hacer eso:
<table border="1" cellpadding="6">
<tbody><tr bgcolor="brown">
<td>Fila café</td><td>Fila café</td></tr>
<tr bgcolor="grey">
<td>Fila gris</td><td>Fila gris</td></tr>
</tbody></table>
También puedes poner una imagen de fondo en la tabla, para lograr eso agregabackground="URL de la imagen" después de <table. Yo he puesto una imagen animada (.gif) en el ejemplo.
| Tabla con fondo de imagen | Tabla con fondo de imagen |
<table background="URL de la imagen" border="1" cellpadding="4">
<tbody><tr><td>Tabla con fondo de imagen</td>
<td>Tabla con fondo de imagen</td></tr>
</tbody></table>
Como verás después de entender el código básico todo lo demás resulta fácil. De cualquier modo puedes probar los resultados y variaciones en un blog de pruebas antes de publicarlo.
0 comentarios: