Lenguaje HTML/Tablas

Tablas

Son una herramienta muy útil y muy potente para mostrar información de una manera estructurada.

Una aclaración importante:
Las tablas no son una herramienta para maquetar o dar formato a los documentos. Las tablas son para tabular datos.

Los elementos de los que nos serviremos para crearlas son:

Elementos básicos

table

(table = tabla)

Es el elemento que define y delimita la tabla.
Sus etiquetas son: <table></table> (ambas obligatorias)

Sus atributos principales son:

width - anchura de la tabla (valor en pixeles o en porcentaje)

border - grosor del borde de la tabla (valor en pixeles)

cellspacing - espacio entre celdas (valor en pixeles)

cellpadding - espacio entre el contenido y los bordes de la celda (valor en pixeles)

tr

(table row = fila de tabla, renglón de tabla)

Es el elemento que define y delimita las filas de la tabla.
Sus etiquetas son: <tr></tr>

td

(table data = datos de tabla)

Es el elemento con el que crearemos las celdas de la tabla.
Sus etiquetas son: <td></td>

Sus atributos principales son:

align --alineación horizontal.

valign --alineación vertical.

colspan-- número de columnas ocupados por la celda.

rowspan-- número de filas ocupados por la celda.

Ejemplos

Una tabla básica escrita así:

<table border='1' cellspacing='1' cellpadding='2' width='50%'>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td></tr>
</table>

Se verá así:

1	2
3	4
5	6

Elementos de encabezado

caption

Es el elemento con el que podemos darle un título a la tabla. Debe ir inmediatamente despues de la etiqueta <table>.
Sus etiquetas son: <caption></caption> (ambas obligatorias)
Sus atributos principales son:
align - ¡DESAPROBADO!

th

Es el elemento con el que crearemos las celdas de encabezado
Sus etiquetas son: <th></th> (la de cierre es opcional ¡úsala de todos modos!)
Sus atributos principales son:

align - alineacion horizontal

valign - alineacion vertical

colspan- número de columnas abarcado por la celda

rowspan- número de filas abarcado por la celda

Fusionando celdas

Paras las etiquetas anteriormente mencionadas,<td> y <th> existen atributos para la combinación de celdas, que son:

rowspan: especifica cuantas celdas dentro de una columna serán combinadas colspan: especifica cuantas columnas dentro una fila serán combinadas

Para el atributo colspan:

Por ejemplo,

<tr>
 <td colspan="2">Combinación de columnas</td>
</tr> 
<tr>
 <td>Columna 1</td>
 <td>Columna 2</td>
</tr>

</table>

Combinación de columnas
Columna 1	Columna 2

Tendrá como resultado que, en la primera fila, esten combinados las 2 primeras columnas. Tómese en cuenta que, al escribir este atributo(si sólo existen 2 columnas), no se debe de añadir más etiquetas de columnas, caso contrario, se deberá tomar en cuenta la cantidad de celdas de columnas combinadas y las que se quieran agregar.

Para el atributo rowspan:

<tr>
 <td rowspan="2">Combinación de celdas de filas en una columna</td>
 <td>Columna2, fila1</td>
</tr> 
<tr>
 <td>Columna2, fila2</td>
</tr>

</table>

Combinación de celdas de filas en una columna	Columna2, fila1
	Columna2, fila2

Tendrá como resultado que, en la primera columna, esten combinados las 2 filas definidas. Tómese en cuenta que, al escribir este atributo(si sólo existen 2 filas), no se debe de añadir más etiquetas de columnas, caso contrario, se deberá tomar en cuenta la cantidad de celdas de filas combinadas y las que se quieran agregar. </marque>