Tutorial:XHTML

Tablas: agrupación de filas / columnas

Las tablas complejas suelen disponer de una estructura irregular que junta varias columnas para formar una columna ancha o une varias filas para formar una fila más alta que las demás.

Para fusionar filas o columnas se utilizan los atributos rowspan y colspan respectivamente.

Fusión simple de columnas

La siguiente imagen muestra una tabla compleja que ha fusionado dos columnas simples para formar una columna más ancha:

El código asociado a la tabla será el siguiente:

<table>
<tr>
  <td colspan="2">A</td>
</tr>
 
<tr>
  <td>B</td>
  <td>C</td>
</tr>
</table>

Fusión simple de filas

De forma equivalente, el atributo rowspan se empleará de la siguiente manera:

<table>
<tr>
  <td>A</td>
  <td rowspan="2">B</td>
</tr>
 
<tr>
  <td>C</td>
</tr>
</table>

Fusión múltiple

Utilizando los atributos rowspan y colspan, es posible diseñar tablas tan complejas como las que se muestran en los siguientes ejemplos:

Fusión DE múltiple columnas

Ejemplo de fusión de múltiples columnas:

El código será el siguiente:

<table>
<tr>
  <td colspan="3">A</td>
  <td>B</td>
</tr>
 
<tr>
  <td>C</td>
  <td colspan="2">D</td>
  <td>E</td>
</tr>
 
<tr>
  <td colspan="4">F</td>
</tr>
 
<tr>
  <td>G</td>
  <td>H</td>
  <td>I</td>
  <td>J</td>
</tr>
</table>

Fusión DE múltiple filas

Ejemplo de fusión de múltiples filas:

El código para la tabla será el siguiente:

<table>
  <tr>
    <td>A</td>
    <td>B</td>
    <td rowspan="3">C</td>
    <td>D</td>
  </tr>
  <tr>
    <td rowspan="2">E</td>
    <td>F</td>
    <td rowspan="3">G</td>
  </tr>
  <tr>
    <td>H</td>
  </tr>
  <tr>
    <td>I</td>
    <td>J</td>
    <td>K</td>
  </tr>
</table>