Aprende a combinar celdas con HTML

Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar celdas.

A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a través del atributo rowspan se especifica el número de filas por las que se extenderá la celda.

Para que quede más claro, vamos a ver un ejemplo de su uso. Por ejemplo, para insertar la siguiente tabla:

DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE
DIFERENCIAS	PERRO		HOMBRE
	PEQUEÑO	GRANDE
Duración crecimiento	10 meses	18 a 24 meses	16 años
Tiempo de gestación	58 a 63 días		9 meses
Duración de vida del pelo/cabello	1 año		2 a 7 años

Habría que escribir el siguiente código:

<table width="575" border="2" cellspacing="2">

  <tr align="center" valign="middle"> 

    <th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th>

  </tr>

  <tr align="center" valign="middle"> 

    <th rowspan="2">DIFERENCIAS</th>

    <th colspan="2">PERRO</th>

    <th rowspan="2">HOMBRE</th>

  </tr>

  <tr align="center" valign="middle"> 

    <th>PEQUE&Ntilde;O</th>

    <th>GRANDE</th>

  </tr>

  <tr align="center" valign="middle"> 

    <td>Duraci&oacute;n crecimiento</td>

    <td>10 meses</td>

    <td>18 a 24 meses</td>

    <td>16 a&ntilde;os</td>

  </tr>

  <tr align="center" valign="middle"> 

    <td>Tiempo de gestaci&oacute;n</td>

    <td colspan="2">58 a 63 d&iacute;as</td>

    <td>9 meses</td>

  </tr>

  <tr align="center" valign="middle"> 

    <td>Duraci&oacute;n de vida del pelo/cabello</td>

    <td colspan="2">1 a&ntilde;o</td>

    <td>2 a 7 a&ntilde;os</td>

  </tr>

</table>

Vamos a explicar un poco cómo funciona dicho código, aunque sería conveniente que primero intentaras entender el código comparándolo con la tabla que de él se obtiene.

En primer lugar, tenemos que ver el número máximo de columnas que ha de tener la tabla. En este caso serían cuatro columnas. Para saber el número de columnas total de la tabla, tenemos que fijarnos en el número total de celdas que podemos obtener por fila al trazar las líneas verticales que separan las columnas entre sí.

En la primera fila, la línea  <th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th> indica que la celda ocupará cuatro columnas de la tabla (la columna actual y las 3 siguientes). Como la tabla tiene como mucho cuatro columnas y el atributo colspan de la celda vale cuatro, no hay que definir más celdas para esa misma fila.

En la segunda fila, la línea  <th rowspan="2">DIFERENCIAS</th> indica que la celda ocupará dos filas de la tabla (la actual y la siguiente). Lo mismo ocurre con la línea <throwspan="2">HOMBRE</th>.

Ya hemos definido dos celdas de la segunda fila. Sabemos que la tabla tiene como mucho cuatro columnas, por lo que como en la línea <th colspan="2">PERRO</th> el atributo colspanvale dos, ya tenemos las cuatro celdas.

En la segunda fila hemos definido dos celdas que se expanden por dos filas, por lo que en la tercera fila habrá que definir solamente dos celdas, y no cuatro, ya que dos de sus celdas se corresponden con las definidas en la fila anterior.

Las dos nuevas celdas son <th>PEQUE&Ntilde;O</th> y <th>GRANDE</th>.

El uso de los atributos colspan y rowspan puede resultar algo complicado al principio. Es cuestión de práctica.

Fuente:enlace