Continuamos con las tablas en HTML que ya comenzamos en la primera parte.
Y continuamos en la segunda parte.
Para otorgar de propiedades a nuestra tabla vamos a ver algunos atributos.
Colspan
Es el atributo que se aplica directamente en la celda en la etiqueta <td> y une las columnas en una fila, de forma que si ponermos:
<td colspan="3">título</td>
Esto lo que provoca es que una celda en una fila ocupe el tamaño de 3 celdas. En este caso, si toda nuestra tabla tiene 3 celdas de ancho, si vamos a crear una celda de 3 de ancho, no incluimos más celdas.
Rowspan
Funciona igual que colspan pero en vez de trabajar con columnas trabaja con celdas uniendolas de manera vertical. Para que nos funcione debemos preveer que debajo de nuestra celda a ampliar no vaya a haber ninguna, podreis verlo más claramente en el ejemplo más abajo.
<td rowspan="3">lista</td>
Width
Width establece un ancho para la tabla, el cual podemos definir mediante un porcentaje respecto al máximo o introduciendo los pixeles de ancho.El atributo afecta a la etiqueta <table>
<table width="50%"></table>
<table width="800"></table>
Componiendo estos 3 atributos escribimos el siguiente código usando otros atributos anteriores:
<table border="1" cellpadding="2" width="80%">
<caption>La poderosa tabla</caption>
<tr>
<td>A1</td><td colspan="2">A2 y A3</td>
</tr>
<tr>
<td rowspan="2">B1 y C1</td><td>B2</td><td>B3</td>
</tr>
<tr>
<td>C2</td><td>C3</td>
</tr>
</table>
Y obtenemos el siguiente resultado:
| A1 | A2 y A3 | |
| B1 y C1 | B2 | B3 |
| C2 | C3 | |
Bgcolor
Este atributo establece el color de las celdas o de la tabla dependiendo de donde se incluya este atributo que no solo sirve dentro de las tablas.
Para afectar la tabla entera debe estar en la etiqueta <table>
Para afectar la fila debe estar en la etiqueta <tr>
Para afectar la celda entera debe estar en la etiqueta <td>
<table bgcolor="grey"></table>
Background
Es el atributo para añadir una imagen de fondo de tabla, funciona añadiendo la ruta de la imagen, así de simple y del siguiente modo:
<table background="http://blabla.com/carpeta/aquimiimagen.jpg"></table>
Bordercolor
Este atributo establece un color al borde exterior de nuestra tabla, debereis saber los colores en inglés para poder introducirlos mediante su nombre según el siguiente ejemplo:
<table bordercolor="grey"></table>
Componiendo estos 3 atributos escribimos el siguiente código usando otros atributos anteriores:
<table border="1" cellpadding="2" width="355" bordercolor="blue" background="http://i46.tinypic.com/2lj5cow.png">
<caption>La poderosa tabla</caption>
<tr>
<td bgcolor="grey">A1</td><td colspan="2">A2 y A3</td>
</tr>
<tr>
<td rowspan="2">B1 y C1</td><td>B2</td><td>B3</td>
</tr>
<tr>
<td>C2</td><td>C3</td>
</tr>
</table>
Y obtenemos el siguiente resultado:
| A1 | A2 y A3 | |
| B1 y C1 | B2 | B3 |
| C2 | C3 | |
Y aunque no me haya esmerado en esta tabla se que muchos de vosotros podreis sacarle un buen partido a las tablas.
