Volver al índice Tablas


Estructura de una tabla (<table>)

Una tabla XHTML (<table>) es una rejilla rectangular de celdas, formada por los siguientes elementos:

Esto es la leyenda Leyenda (<caption>)
    ...    
... ... ... ... ...
    ...    
Cabecera de tabla (<thead>)
    ...    
... ... ... ... ...
    ...    

...

    ...    
... ... ... ... ...
    ...    
Cuerpos de tablas (<tbody>)
    ...    
... ... ... ... ...
    ...    
Pie de tabla (<tfoot>)

Tanto los cuerpos de tabla como la cabecera y el pie de tabla están formados por varias filas (<tr>) formadas por varias celdas (<td>). Todas las filas tienen el mismo número de celdas (aunque también se pueden unir celdas horizontal y verticalmente).

Celda Celda ... Celda Celda
 
 
...
 
 
Fila (<tr>)

La leyenda es texto explicativo opcional que se muestra fuera de la tabla (normalmente, arriba)

La cabecera de la tabla es opcional y sólo puede haber una cabecera por tabla.

El pie de tabla es opcional y sólo puede haber un pie de tabla por tabla. En el código fuente, la etiqueta <tfoot> se encuentra situada antes del primer <tbody>, aunque los navegadores la muestran al final de la tabla. Al imprimir una tabla que ocupa varias páginas, Mozilla repite al principio y al final de cada página las cabeceras y pies de tabla. Internet Explorer, sólo los imprime al principio y al final de la tabla.

El cuerpo de tabla es obligatorio y puede haber tantos como se quiera.

Completar explicación de las etiquetas que aparecen table, thead, tbody, tfoot, td, th.

Volver al índice


Define el tamaño de la tabla Crear una tabla

Para crear una tabla, puedes utilizar el menú XHTML > Tabla > Tabla (table) o el botón de creación de tabla Botón Crear tabla. En la caja de diálogo, elige el número de columnas, el número de filas y el grosor del borde exterior.

Para crear un párrafo después de una tabla, hay que seleccionar la tabla completa F2 y pulsar Intro. Para crear un párrafo antes de una tabla, hay que colocar el cursor al principio de la leyenda y elegir el menú XHTML > Párrafo.

Volver al índice


Leyenda (<caption>)

Al crear un tabla, el cursor se sitúa en la leyenda. Si se borra la leyenda, se puede añadir nuevamente mediante el menú XHTML > Tabla > Leyenda (caption).

Los navegadores dan a la leyenda el mismo ancho que a la tabla, por lo que si una leyenda es larga y la tabla estrecha, la leyenda ocupará varias líneas.

Volver al índice


Añadir y borrar encabezados, pies y cuerpos de tabla

Seleccionar tbody con F2 + Intro, se crea nuevo tbody.

Por escribir

Volver al índice


Añadir y borrar filas y columnas

Añadir una fila

Para insertar una nueva fila antes de otra fila, hay que situar el cursor en cualquier posición de la fila y elegir la opción de menú XHTML > Tabla > Insertar fila. Para añadir una nueva fila después de otra fila, hay que situar el cursor en cualquier posición de la fila y elegir la opción de menú XHTML > Tabla > Añadir fila. También se puede añadir una nueva fila después de otra fila, seleccionando la fila completa con F2 y pulsando Intro.


Borrar una fila

Para borrar una fila, hay que seleccionar la fila completa con F2 (o mediante el menú XHTML > Tabla > Seleccionar fila) y pulsar Suprimir o Borrar.


Añadir una columna

Para insertar una nueva columna antes de otra columna, hay que situar el cursor en cualquier posición de la columna y elegir la opción de menú XHTML > Tabla > Insertar columna. Para añadir una nueva columna después de otra columna, hay que situar el cursor en cualquier posición de la columna y elegir la opción de menú XHTML > Tabla > Añadir columna. También se puede añadir una nueva columna después de otra columna, seleccionando una celda cualquiera de la columna con F2 y pulsando Intro.


Borrar una columna

Para borrar una columna, hay que seleccionar la columna completa seleccionando con el ratón un par de celdas de la misma columnna, pulsando dos veces F2 (o mediante el menú XHTML > Tabla > Seleccionar columna) y pulsando Suprimir o Borrar.


Copiar y pegar filas, columnas y cuerpos de tabla

Por escribir

Volver al índice


Celdas de datos (<td>) y celdas de cabecera (<th>)

Por escribir

Volver al índice


Unir celdas

Aunque las tablas XHTML sean rectangulares, es decir, tengan el mismo número de celdas en cada fila, se pueden unir varias celdas horizontal o verticalmente mediante los atributos colspan y rowspan, respectivamente.


El menú XHTML > Tabla > Unir con celda derecha permite unir dos celdas contiguas, como se explica en el siguiente ejemplo:

1º. Situar el cursor en la celda izquierda de las dos que se quieren unir.
Esto es una tabla
celda a1 celda b1 celda c1
celda a2 celda b2 celda c2
celda a3 celda b3 celda c3
2º Elegir el menú XHTML > Tabla > Unir con celda derecha.

Nota: El contenido de ambas celdas, en su caso, se conserva en la nueva celda.

Esto es una tabla
celda a1

celda b1

celda c1
celda a2 celda b2 celda c2
celda a3 celda b3 celda c3

Si se selecciona la celda con F2 y se abre el menú XHTML > Atributos > colspan, se puede comprobar que el valor es 2. Se pueden unir tantas celdas contiguas como se desee. El valor del atributo colspan indicará el número de celdas unidas horizontalmente. En caso de introducir manualmente un valor del atributo colspan superior al máximo posible (es decir, superior al número de celdas situadas a la derecha de la celda elegida), Amaya reduce el valor al máximo posible.


El menú XHTML > Tabla > Unir con celda inferior permite unir dos celdas contiguas, como se explica en el siguiente ejemplo:

1º. Situar el cursor en la celda superior de las dos que se quieren unir.
Esto es una tabla
celda a1 celda b1 celda c1
celda a2 celda b2 celda c2
celda a3 celda b3 celda c3
2º Elegir el menú XHTML > Tabla > Unir con celda inferior.

Nota: El contenido de ambas celdas, en su caso, se conserva en la nueva celda.

Esto es una tabla
celda a1

celda a2

celda b1 celda c1
celda b2 celda c2
celda a3 celda b3 celda c3

Si se selecciona la celda con F2 y se abre el menú XHTML > Atributos > rowspan, se puede comprobar que el valor es 2. Se pueden unir tantas celdas contiguas como se desee. El valor del atributo rowspan indicará el número de celdas unidas verticalmente. En caso de introducir manualmente un valor del atributo rowspan superior al máximo posible (es decir, superior al número de celdas situadas por debajo de la celda elegida), Amaya reduce el valor al máximo posible.


Si una celda tiene establecida tanto el atrubuto colspan como rowspan, ocupará un área rectangular, como se explica en el siguiente ejemplo:

1º. Situar el cursor en la celda izquierda de las dos que se quieren unir.
Esto es una tabla
celda a1 celda b1 celda c1
celda a2 celda b2 celda c2
celda a3 celda b3 celda c3
2º Elegir el menú XHTML > Tabla > Unir con celda derecha.

Nota: El contenido de ambas celdas, en su caso, se conserva en la nueva celda.

Esto es una tabla
celda a1

celda b1

celda c1
celda a2 celda b2 celda c2
celda a3 celda b3 celda c3
3º. Situar el cursor en la celda superior de las que se quieren unir.
Esto es una tabla
celda a1

celda b1

celda c1
celda a2 celda b2 celda c2
celda a3 celda b3 celda c3
4º Elegir el menú XHTML > Tabla > Unir con celda inferior.

Nota: El contenido de todas las celdas afectadas, en su caso, se conserva en la nueva celda.

Esto es una tabla
celda a1

celda a2

celda b1

celda b2

celda c1
celda c2
celda a3 celda b3 celda c3

Para dividir celdas anteriormente unidas, se puede utilizar los menús XHTML > Tabla > Reducir extensión horizontal y XHTML > Tabla > Reducir extensión vertical, que reducen respectivamente los atributos colspan y rowspan en una unidad. La nueva celda se crea sin contenido. No se pueden dividir celdas que no se hubieran unido anteriormente.


Si todas las celdas de una columna tienen el atributo colspan mayor que uno, Amaya reduce todos los valores hasta que alguno sea igual a uno y lo elimina. En particular, si todas las celdas de una columna tienen el mismo valor del atributo colspan, Amaya elimina todos los atributos colspan.

Si todas las celdas de una fila tienen el atributo rowspan mayor que uno, Amaya reduce todos los valores hasta que alguno sea igual a uno y lo elimina. En particular, si todas las celdas de una fila tienen el mismo valor del atributo rowspan, Amaya elimina todos los atributos rowspan.

Volver al índice


Columnas (<col />)

Al crear un <col /> se le puede asignar clase. Cada nuevo <col /> se crea delante de los anteriores.

Amaya deja insertar más <col /> de las columnas que tiene la tabla.

Por escribir

Volver al índice


Grupos de columnas (<colgroup>)

En Amaya, si hay un <groupcol>, al crear un <col /> se crea dentro del primer <groupcol>.

Si hay un <groupcol>, todos los <col /> deben estar dentro de algún <colgroup>.

Por escribir

Volver al índice

Autor: Bartolomé Sintes Marco
Última modificación: 14 de enero de 2005