Unión de celdas en tablas HTML

8.1 Unión de celdas horizontalmente

Unir celdas en una tabla te permite crear representaciones de datos más flexibles e informativas. Esto es especialmente útil cuando necesitas combinar varias celdas para crear encabezados o datos resumidos. En HTML, los atributos colspan y rowspan se utilizan para unir celdas.

Atributo colspan

El atributo colspan combina celdas horizontalmente. Indica cuántas columnas debe abarcar una celda. Por ejemplo, si tienes una celda con colspan="2", ocupará el espacio de dos celdas normales en una fila.

Ejemplo de uso:

Imagina que tienes una tabla con tres columnas y quieres que la primera celda de una fila abarque dos columnas. Usas colspan="2" para combinar esas dos celdas. Esto es útil para crear encabezados que abarcan varias columnas o para combinar datos que se relacionen con múltiples categorías.

    
      <table border="1">
        <tr>
          <th>Nombre</th>
          <th>Edad</th>
          <th>Ciudad</th>
        </tr>
        <tr>
          <td>Alicia</td>
          <td>25</td>
          <td>Londres</td>
        </tr>
        <tr>
          <td colspan="2">Total</td>
          <td>2 registros</td>
        </tr>
      </table>
    
  

8.2 Unión de celdas verticalmente

El atributo rowspan combina celdas verticalmente. Indica cuántas filas debe abarcar una celda. Por ejemplo, si tienes una celda con rowspan="2", ocupará el espacio de dos celdas normales en una columna.

Ejemplo de uso:

Imagina que tienes una tabla con tres filas y quieres que la primera celda en una columna abarque dos filas. Usas rowspan="2" para combinar esas dos celdas. Esto es útil para crear tablas donde una categoría de datos se relaciona con varias filas, como encabezados combinados o datos resumidos.

    
      <table border="1">
        <tr>
          <th>Nombre</th>
          <th>Proyecto</th>
          <th>Ciudad</th>
        </tr>
        <tr>
          <td rowspan="2">Alicia</td>
          <td>Proyecto A</td>
          <td>Londres</td>
        </tr>
        <tr>
          <td>Proyecto B</td>
          <td>Batumi</td>
        </tr>
      </table>
    
  

8.3 Explicación del funcionamiento

Cómo funcionan colspan y rowspan

Unión horizontal (colspan): imagina que estás creando una tabla de horarios donde un curso se imparte en varias salas. Puedes combinar celdas usando colspan, indicando que un curso abarca dos horarios.

Unión vertical (rowspan): imagina que estás creando una tabla de resultados de competiciones donde un participante compite en varias etapas. Puedes combinar celdas usando rowspan, indicando que un participante abarca dos etapas.

Ejemplos prácticos

Creación de encabezados que abarcan varias columnas: si tienes una tabla con diferentes categorías de datos y quieres crear un encabezado que abarque varias columnas, usa colspan. Por ejemplo, un encabezado "Información sobre empleados" puede abarcar las columnas "Nombre", "Edad" y "Departamento".

Unión de datos verticalmente: si tienes datos que necesitan ser unidos verticalmente, como varias entradas para la misma persona u objeto, usa rowspan. Por ejemplo, si tienes información sobre un proyecto y un proyecto ocupa varias filas (como fases del proyecto), combina las filas con rowspan.

8.4 Ejemplos

Imagina que tienes una tabla que muestra empleados y su participación en diferentes proyectos:

• Empleados: Iván, María, Pedro.
• Proyectos: Proyecto A, Proyecto B.

Quieres combinar celdas para mostrar que Iván y María trabajan en dos proyectos simultáneamente:

    
<table border="1">
    <tr>
        <th>Nombre</th>
        <th>Proyecto A</th>
        <th>Proyecto B</th>
        <th>Ciudad</th>
    </tr>
    <tr>
        <td>Iván</td>
        <td colspan="2">Sí</td>
        <td>Londres</td>
    </tr>
    <tr>
        <td>María</td>
        <td colspan="2">Sí</td>
        <td>Londres</td>
    </tr>
    <tr>
        <td>Pedro</td>
        <td>Sí</td>
        <th>No</th>
        <td>Roma</td>
    </tr>
</table>
    
  

O si quieres mostrar que Iván trabaja en dos proyectos:

    
      <table border="1">
        <tr>
          <th>Nombre</th>
          <th>Proyecto</th>
          <th>Ciudad</th>
        </tr>
        <tr>
          <td rowspan="2">Iván</td>
          <td>Proyecto A</td>
          <td>Londres</td>
        </tr>
        <tr>
          <!-- vacío -->
          <td>Proyecto B</td>
          <td>Londres</td>
        </tr>
        <tr>
          <td>Sergio</td>
          <td>Proyecto C</td>
          <td>Roma</td>
        </tr>
      </table>
    
  

Coloqué un comentario en el lugar de la celda "comida" por la expansión de la celda vecina. Así es más claro entender dónde aparecerán las demás.