# Tablas

## Estructura de una tabla (<table>)

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

- Leyenda (<caption>)
- Cabecera de tabla (<thead>)
- Cuerpos de tabla (<tbody>)
- Pie de tabla (<tfoot>)

Esto es la leyenda | Leyenda (<caption>)
|  | ... |  |
... | ... | ... | ... | ...
|  | ... |  |
| Cabecera de tabla (<thead>)
|  | ... |  |
... | ... | ... | ... | ...
|  | ... |  |
...
|  | ... |  |
... | ... | ... | ... | ...
|  | ... |  |
| Cuerpos de tablas (<tbody>)
|  | ... |  |
... | ... | ... | ... | ...
|  | ... |  |
| Pie de tabla (<tfoot>)

A su vez, 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> o <th>). 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 (<caption>) es texto explicativo opcional que se muestra fuera de la tabla (normalmente, arriba). Además la leyenda no puede incluir párrafos ni otros elementos de bloque.

El cuerpo de tabla (<tbody>) es obligatorio y puede haber tantos como se quiera.

Tanto a cabecera de la tabla (<thead>) como el pie de tabla (<tfoot>) son opcionales y sólo puede haber uno de cada 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, Firefox repite al principio y al final de cada página las cabeceras <thead> y pies de tabla <tfoot>, mientras que Internet Explorer sólo los imprime al principio y al final de la tabla. Se puede comprobar, por ejemplo, con la página de explicación sobre colores CSS, en la que la tabla de colores X11/SVG no cabe en una sola página. En la vista preliminar se puede ver como se coloca (o no) la cabecera <thead> de esta tabla en cada página.

Cada celda de la tabla está marcada con la etiqueta <td> (celda de datos), aunque también se pueden marcar con la etiqueta <th> (celda de cabecera).

En una tabla también puede haber etiquetas <col /> y <colgroup>, que permiten hacer referencia a las columnas de la tabla.

Volver al índice

## Crear una tabla

Puede crearse una tabla mediante el menú XHTML > Tabla > Insertar tabla (table), el botón de creación de tabla o el atajo de teclado Ctrl+t+t. En la caja de diálogo, se puede elegir 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`. También se puede seleccionar la tabla completa `F2`, elegir el menú XHTML > Editar > Añadir detrás y a continuación escribir el texto.

Para crear un párrafo antes de una tabla, hay que seleccionar la tabla completa `F2` y pulsar `Intro`. También se puede seleccionar la tabla completa `F2`, elegir el menú XHTML > Editar > Insertar delante y a continuación escribir el texto.

Volver al índice

## Leyenda (<caption>)

Al crear un tabla en Amaya, 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) o el atajo de teclado Ctrl+t+l.

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, como muestra el ejemplo siguiente:

Liga de Fútbol española - Resultados de la primera división
| 2004/2005 | 20005/2006
Campeón | F.C. Barcelona | F.C. Barcelona
Subcampeón | R. Madrid | R. Madrid

Volver al índice

## Cuerpos de tabla (<tbody>), encabezados (<thead>) y pies (<tfoot>)

Al crear una tabla en Amaya, ésta se crea con un único <tbody> y sin <thead> o <tfoot>.

Para crear el <thead>, hay que elegir la opción de menú XHTML > Tabla > thead. Para crear el <tfoot>, hay que elegir la opción de menú XHTML > Tabla > tfoot.

Para crear un nuevo <tbody> a continuación de otro, se puede seleccionar el <tbody> ya existente con `F2` y pulsar `Intro`. También se puede crerar un nuevo <tbody> con la opción de menú XHTML > Tabla > thead. Si el cursor se encuentra en la celda superior izquierda de la tabla, el nuevo <tbody> se creará antes del <tbody> ya existente; si el cursor se encuentra en cualquier otra celda, el nuevo <tbody> se creará después del <tbody> ya existente.

Para borrar cualquier <thead>, <tbody> o <tfoot>, hay que pulsar `F2` hasta seleccionar el elemento que se desea borrar y pulsar `Borrar` o `Suprimir`.

Volver al índice

## Añadir y borrar filas o 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 delante o el atajo de teclado Ctrl+t+i. 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 detrás o el atajo de teclado Ctrl+t+n. 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 o el atajo de teclado Ctrl+t+r) 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 delante o el atajo de teclado Ctrl+t+b. 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 detrás o el atajo de teclado Ctrl+t+a. 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 y pulsar `Suprimir` o `Borrar`. La columna se puede seleccionar seleccionando con el ratón un par de celdas de la misma columnna y pulsando dos veces `F2`, o bien mediante el menú XHTML > Tabla > Seleccionar columna o el atajo de teclado Ctrl+t+c.

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

Al crear una tabla en Amaya, todas las celdas están marcadas con la etiqueta <td>.

Cada celda de la tabla está marcada con la etiqueta <td>, aunque también se pueden marcar con la etiqueta <th>. Las celdas <th> están pensadas para utilizarse en las celdas que sirven de cabecera para la fila o columna, por lo que los navegadores las muestran resaltadas (normalmente, en negrita y centradas en horizontal), aunque se pueden utilizar en cualquier celda.

    <table border="1">
      <caption>Fútbol 1º división</caption>
      <tbody>
        <tr>
          <td></td>
          <th>2004/2005</th>
          <th>20005/2006</th>
        </tr>
        <tr>
          <th>Campeón</th>
          <td>F.C. Barcelona</td>
          <td>F.C. Barcelona</td>
        </tr>
        <tr>
          <th>Subcampeón</th>
          <td>R. Madrid</td>
          <td>R. Madrid</td>
        </tr>
      </tbody>
    </table>
Fútbol 1º división
| 2004/2005 | 20005/2006
Campeón | F.C. Barcelona | F.C. Barcelona
Subcampeón | R. Madrid | R. Madrid

Para convertir una celda de datos <td> en una celda de cabecera <th>, hay que situar el cursor en la celda y elegir la opción de menú XHTML > Tabla > Cambiar a celda de cabecera o utilizar el atajo de teclado Ctrl+t+h.

Para convertir una celda de cabecera <th> en una celda de datos <td>, hay que situar el cursor en la celda y elegir la opción de menú XHTML > Tabla > Cambiar a celda de datos o utilizar el atajo de teclado Ctrl+t+d.

Se pueden convertir varias celdas contiguas seleccionándolas con el ratón y eligiendo la opción de menú o el atajo de teclado correspondiente. También se pueden convertir una fila completa seleccionando con `F2` la fila completa y eligiendo la opción de menú o el atajo de teclado correspondiente.

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 o el atajo de teclado Ctrl+t+e permiten 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 o el atajo de teclado Ctrl+t+e. Nota: El contenido de ambas celdas, en su caso, se conserva en la nueva celda (el contenido de cada celda, menos la primera, en un párrafo <p> distinto). |
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 consulta el atributo colspan en la ventana de Atributos, se puede comprobar que el valor es 2. Se pueden unir tantas celdas contiguas como se desee. El valor del atributo colspan indica 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 o el atajo de teclado Ctrl+t+j 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 o el atajo de teclado Ctrl+t+j. Nota: El contenido de ambas celdas, en su caso, se conserva en la nueva celda. (el contenido de cada celda, menos la primera, en un párrafo <p> distinto) |
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 consulta el atributo colspan en la ventana de Atributos, e 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.

Una celda puede tener establecidos simultáneamente los atributos colspan y rowspan, 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 o el atajo de teclado Ctrl+t+e. Nota: El contenido de ambas celdas, en su caso, se conserva en la nueva celda. (el contenido de cada celda, menos la primera, en un párrafo <p> distinto) |
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 o el atajo de teclado Ctrl+t+j. Nota: El contenido de todas las celdas afectadas, en su caso, se conserva en la nueva celda. (el contenido de cada celda, menos la primera, en un párrafo <p> distinto) |
Esto es una tabla
celda a1 celda a2 celda b1 celda b2 | celda c1
celda c2
celda a3 | celda b3 | celda c3

- Las celdas se podrían haber unido primero en sentido vertical y después en horizontal.
- Al seleccionar la celda con `F2`, la ventana de atributos muestra que los atributos colspan y rowspan tienen el valor 2.
- Se pueden unir tantas celdas contiguas como se desee. El valor de los atributos colspan y rowspan indica respectivamente el número de celdas unidas horizontal y verticalmente.

Para dividir celdas anteriormente unidas, se puede utilizar los menús XHTML > Tabla > Reducir extensión horizontal o el atajo de teclado Ctrl+t+s y XHTML > Tabla > Reducir extensión vertical o el atajo de teclado Ctrl+t+m, 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.

En caso de introducir manualmente valores de los atributos colspan y colspan superiores al máximo posible (es decir, superior al número de celdas situadas a la derecha o por debajo de la celda elegida), Amaya reduce en los valores valor al máximo posible.

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 />) y grupos de columnas (<colgroup>)

Aunque las celdas de una tabla (<td> y <th>) estén organizadas en filas <tr> y grupos de filas (<tbody>, <thead> y <tfoot>), también existen dos etiquetas que permiten hacer referencia a las columnas de una tabla: las etiquetas <col /> y <colgroup>. La etiqueta <col /> permite hacer referencia a una columna y la etiqueta <colgroup> permite definir grupos de columnas (de manera similar a como la etiqueta <tbody> define grupos de filas).

Las etiquetas <col /> y <colgroup> se encuentran situadas al principio de la tabla y en Amaya no se pueden seleccionar con `F2`, por lo que su edición debe realizarse en la vista de código fuente o de estructura. Las etiquetas de columnas no se crean automáticamente, sino que el usuario debe añadirlas después de haber creado la tabla, y al crearlas o eliminarlas no se modifica la estructura de la tabla (ni se crean ni se eliminan celdas o filas).

El ejemplo siguiente muestra la situación de las estiquetas <col /> y <colgroup> en una tabla.

    1   <table border="1" >
    2     <caption>Leyenda</caption>
    3     <colgroup><col /><col /></colgroup><colgroup><col /></colgroup>
    4     <tbody>
    5       <tr>
    6         <td>1</td>
    7         <td>2</td>
    8         <td>3</td>
    9       </tr>
    10     </tbody>
    11  </table>

Cada etiqueta <col /> corresponde a una columna, en el mismo orden (la primera etiqueta <col /> corresponde a la primera columna, y así sucesivamente). En el ejemplo anterior, hay definidas dos grupos de columnas, el primero de los cuales abarca dos columnas y el segundo una columna.

Puede haber menos etiquetas <col /> que columnas en la tabla (también puede haber más, pero serían innecesarias).

Volver al índice

### Columnas (<col />)

Para insertar una etiqueta <col />, hay que situar el cursor en cualquier elemento de la tabla y elegir la opción de menú XHTML > Tabla > Columna (col). Las nuevas etiquetas se crean a continuación de las anteriores, por lo que hay que definir las columnas de izquierda a derecha.

Nada más crear la etiqueta, se puede dar valor a los atributos (class, span, etc), pero si después de editar otros elementos se quiere modificar los atributos o incluso eliminar la etiqueta <col />, hay que hacerlo en la vista de código fuente o estructura, puesto que no hay forma de seleccionar la etiqueta <col /> en la vista normal.

Amaya permite insertar más etiquetas <col /> que columnas tiene la tabla, aunque no tengan ninguna utilidad.

Volver al índice

### Grupos de columnas (<colgroup>)

Para insertar una etiqueta <colgroup>, hay que situar el cursor en cualquier elemento de la tabla y elegir la opción de menú XHTML > Tabla > Grupo de columnas (colgroup). Las nuevas etiquetas se crean delante de las anteriores, por lo que hay que definir los grupos de columnas de derecha a izquierda.

Nada más crear la etiqueta, se puede dar valor a los atributos (class, span, etc), pero si después de editar otros elementos se quiere modificar los atributos o incluso eliminar la etiqueta <colgroup>, hay que hacerlo en la vista de código fuente, puesto que no hay forma de seleccionar la etiqueta <colgroup> en la vista normal.

Cada grupo de columnas puede contener tantas etiquetas <col /> como se quiera.

Si hay un <colgroup>, todos los <col /> deben estar dentro de algún <colgroup>. En Amaya 9.52, se puede insertar primero un <col /> y luego un <colgroup>, lo que no es válido (ver bug de Amaya 061101-2).

Amaya permite insertar <colgroups> con más <col /> que columnas tiene la tabla, aunque no tengan ninguna utilidad.

Volver al índice

## Celdas vacías

Cuando una celda está vacía, Internet Explorer no muestra el borde de la celdas (IE tampoco admite la propiedad empty-cells). Si se quiere ver el borde de una celda, es necesario incluir algún espacio en blanco duro (o la entidad de carácter &nbsp;) en la celda. En Amaya esos espacios se pueden insertar mediante el atajo de teclado Ctrl+espacio.

    <table border="1">
      <tbody>
        <tr>
          <td>Casilla 1</td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td>Casilla 4</td>
        </tr>
      </tbody>
    </table>
Casilla 1 |
| Casilla 4
    <table border="1">
      <tbody>
        <tr>
          <td>Casilla 1</td>
          <td>~</td>
        </tr>
        <tr>
          <td>~</td>
          <td>Casilla 4</td>
        </tr>
      </tbody>
    </table>
Casilla 1 |
| Casilla 4

Volver al índice