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>
Otros ejemplos
de 1
<table border="1" cellpadding="4"><tbody>
<tr><td>Mesa</td>
</tbody></table>
de 2
tabla de 2 uno al lado del otro
<table border="1" cellpadding="4"><tbody>
<tr><td>Mesa</td>
<td>Silla</td></tr></tr>
</tbody></table>
uno arriba del otro
<table border="1" cellpadding="4"><tbody>
<tr><td>Mesa</td></tr>
<tr><td>Carro</td></tr>
</tbody></table>
de 4
<table border="1" cellpadding="4"><tbody>
<tr><td>Mesa</td>
<td>Silla</td></tr>
<tr><td>Carro</td>
<td>Barco</td></tr>
</tbody></table>
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.
| Tabla con borde "5" |
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"
| Tabla con borde verde |
Si quieres usar un color de fondo en toda la tabla agrega bgcolor="yellow" después de <table. El color lo puedes cambiar.
| Tabla con fondo amarillo |
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 agrega background="URL de la imagen" después de <table. Yo he puesto una imagen animada (.gif) en el ejemplo.
<table background="URL de la imagen" border="1" cellpadding="100">
<tbody><tr><td>Tabla con fondo de imagen</td>
<td>Tabla con fondo de imagen</td></tr>
</tbody></table>
| Tabla con fondo de imagen | Tabla con fondo de imagen |
Centrado de tablas en HTML
Cuando tenemos una tabla dentro de un texto, muchas veces nos parece lo más bonito de colocarla centrada. Sin embargo, hay una diferencia entre navegadores a la hora de colocar una tabla en el centro de la línea. No es posible conseguirlo únicamente con atributos de estilo. Es necesario especificar el atributo align de la tabla.
El siguiente código es una tabla dentro un elemento DIV con alineamiento centrado:
<div style="border: 1pt solid #fbb; text-align: center;">
Una tabla con una celda
<table border="1">
<tr>
<td>Una celda</td>
</tr>
</table>
</div>
Esto aparece en el navegador del lado izquierdo:
Una tabla con una celda
| Una celda |
Esto aparece en el navegador del lado izquierdo:
Si tienes abierto este artículo en Mozilla Firefox o Opera, entonces la tabla se encuentra alineado a la izquierda. Si lo tienes abierto en Internet Explorer, entonces la tabla se encuentra centrada – aunque no dentro de este artículo (el autor de CSS de WordPress sabrá como). Hay que copiar el código en un fichero HTML vacío para ver este efecto.
Para poder centrar la tabla en los otros navegadores, es imprescindible de usar el atributo align:
div style="border: 1pt solid #bfb;">
Otra tabla con una celda
<table border="1" align="center">
<tr>
<td>Una celda</td>
</tr>
</table>
</div>
El navegador muestra este código así: div style="border: 1pt solid #bfb;"> Otra tabla con una celda
| Una celda |
Esta representación aparece con el mismo alineamiento en todos los navegadores.
Poner tabla al lado de otra
Tabla izquierda y tabla derecha, por ejemplo
<table align="center" border=1 cellspacing=1 cellpadding=1>
<tr>
<td><table align="center" border=1 cellspacing=1 cellpadding=1>
<tr><td>Tabla izquierda</td></tr></table></td>
<td><table align="center" border=1 cellspacing=1 cellpadding=1>
<tr><td> Tabla derecha </td></tr></table></td>
</tr>
</table>
|
|
Hay que acomodar los atributos, border...colores...bg...etc, Estan en "1" para que se noten
No hay comentarios.:
Publicar un comentario