Lenguaje HTML/Tablas

De Wikilibros, la colección de libros de texto de contenido libre.
← Listas Tablas Enlaces →


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[editar]

table[editar]

(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[editar]

(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[editar]

(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[editar]

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[editar]

caption[editar]

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[editar]

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[editar]

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,

<table border=1>

<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:

<table border=1>

<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>