<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>
<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>
<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 agrega background="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>
<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.
No hay comentarios:
Publicar un comentario