Poner una tabla en nuestra página

Hoy vamos a explicar como poner una tabla en nuestra página web, o blog.

Una tabla Html, está marcada por la etiquetas <table> >/table>

Dentro de estas etiquetas podremos definir, las celdas que queremos, las columnas, el color de los bordes, el color de las celdas, ect.

Como ya hemos explicado, al igual que la etiqueta <body>, también podemos definir con los siguientes parámetros el color de fondo de las mismas.
Puedes recordarlo en este enlace.

La etiqueta "bgcolor" es el color de fondo de nuestra tabla.
La etiqueta "background" nos permite cambiar el fondo por una imagen.
La etiqueta "border"definiremos el grosor del borde de nuestra tabla.
La etiqueta "bordercolor" hará que le demos el color que queramos al borde.

Aqui dejo un ejemplo de como lo pondríamos.


<table width="100%" border="3" bordercolor="#FF66CC" cellspacing="10" cellpadding="10"></table>

La filas

Las etiquetas <tr>y</tr>son los encabezados de las líneas.

Estos los podemos alinear tanto vertical como horizontalmente.

Para alinearlo verticalmente utilizaremos el atributo "valign" para poder alinearlo arriba de la celda ("top"), en el centro ("middle") o debajo ("bottom").

Para alinearlo horizontalmente utilizaremos el atributo "align".

Con este atributo podremos alinear el contenido de las celdas en el centro ("center"), a la izquierda ("left"), a la derecha ("right") o justificado ("justify").

Las celdas

Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta <td> y su correspondiente cierre </td>.

Al igual que en las filas, en las celdas podemos definir la alineación del contenido que está dentro con los atributos "valign" y "align".

Las celdas poseen unos atributos que nos ayudan a poder agrupar tantas celdas o tantas columnas como indiquemos en él.

Para agrupar celdas utilizaríamos el atributo "colspan" y para agrupar celdas el atributo "rowspan".

Por ejemplo, para agrupar en una celda 2 columnas tenemos que escribir: <td colspan="2"></td>. Y para agrupar dos filas, la indicación sería la siguiente: <td rowspan= "2"></td>.

Las celdas

Las celdas escritas con la etiqueta <th> y <td> y funcionan de la misma forma, salvo que el contenido que esté dentro de una etiqueta <th> está considerado como el encabezado de la tabla, por lo que se creará en negrita y centrado sin que nosotros se lo indiquemos.

Ejemplo:


<table width="100%"border="1" cellpadding="0"cellspacing="0"


bordercolor="#000000"><tr> 

<th>Encabezado 1</th>

<th>Encabezado 2</th>

<th>Encabezado 3</th></tr><tr> 

<td rowspan="2" valign="middle"align="left">Este texto está alineado al centro verticalmente y a la izquierda horizontalmente</td><td>&nbsp;</td<td>&nbsp;</td></tr><tr> <td

colspan="2">&nbsp;</td></tr>

</table>

Así nos quedaría:

Encabezado 1	Encabezado 2	Encabezado 3
Este texto está alineado al centro verticalmente y a la izquierda horizontalmente

Nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligará al navegador a no romper esa línea, o sea, a no hacer ningún salto de línea.

Con este atributo en la celda, el navegador no respeta el ancho predefinido de la tabla, si es que lo hubiera, y respeta el ancho de la frase, ya que no puede partirla.

Por tanto, si la frase es más larga que el ancho definido de la tabla, ésta se estirará todo lo necesario para albergar la frase sin saltos de línea. El siguiente código nos mostrará como escribir este atributo en la etiqueta de la celda:


<table width="400"


border="1"
cellpadding="10" cellspacing="0"

bordercolor="#000000">

<tr>

<td nowrap>Aunque este texto sea m&aacute;s ancho que los
400p&iacute;xeles de la tabla, &eacute;sta no puede dividir mediante
saltos del&iacute;nea 

el contenido de la misma, por lo que se estira para albergar toda la frase.</td></tr>

</table>

Y a continuación podemos ver el efecto del atributo:

Aunque este texto sea más ancho que los 400píxeles de la tabla, ésta no puede dividir mediante saltos de línea el contenido de la misma, por lo que se estira para albergar toda la frase.

Aunque este texto sea más ancho que los 400 píxeles de la tabla, ésta no puede dividir mediante saltos de línea el contenido de la misma, por lo que se estira para albergar toda la frase.

Etiqueta “caption”

Esta etiqueta sirve para poder ponerle un título o encabezado a la tabla. Puedes poder el encabezado arriba o abajo, dónde tu prefieras, mediante la etiqueta "align": "align=top" para ponerlo arriba y "align=bottom" para ponerlo abajo.
En el siguiente ejemplo nosotros lo hemos puesto abajo.





<table width="50%"

border="1"
align="center" cellpadding="0" cellspacing="0"
bordercolor="#000000">

<caption align="bottom">Encabezado de la
tabla.</caption><tr>

<td align="center">Tablita de ejmplo para la etiqueta
"caption"</td></tr>

</table>.