Agrupar columnas en una tabla HTML

06/Jun/2015 HTML , ,

Ya hemos visto como agrupar filas en una tabla HTML, así que en el día de hoy vamos a ver como podemos agrupar columnas en un tabla HTML.

El agrupar columnas en una tabla HTML nos va a suceder cuando queramos desglosar el contenido de una columna en dos conceptos. Por ejemplo imaginemos tener los datos de un cliente, la primera fila nos diría que se representan los datos del cliente.

Datos del Cliente
Víctor Martín, +34 695 68 78 90

Y en la siguiente fila vamos a desglosar en dos columnas. Por un lado tendremos el nombre del cliente y por otro lado el teléfono del cliente.

Datos del Cliente
NombreTeléfono
Víctor Martín+34 695 68 78 90

Lo que tenemos que hacer para conseguir esto es agrupar la primera columna en dos columnnas. Para poder agrupar columnas en una tabla HTML vamos a utilizar el atributo colspan. El atributo colspan se establece sobre el elemento td o sobre el elemento th. El valor que se le da al atributo colspan será el número de columnas que queremos que abarque la celda sobre la que se lo aplicamos.

De esta forma si especificamos:

  1. <th colspan="2">Datos del Cliente</th>
  2. </tr>

Lo que estamos diciendo es que la celda que contiene este atributo valdrá por dos columnas. De esta forma en la siguiente fila podemos poner dos celdas. En este caso son elementos th ya que lo estamos realizando sobre celdas de cabecera.

  1. <th colspan="2">Cliente</th>
  2. </tr>
  3. <th>Nombre</th>
  4. <th>Teléfono</th>
  5. </tr>
  6. </thead>

Vemos que en la primera fila hay una celda, la cual decimos que vale por 2 mediante el atributo colspan y en la segunda fila ya tenemos dos celdas.

De esta forma hemos visto lo sencillo que es agrupar columnas en una tabla HTML.

Vídeos sobre HTML


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D