Artículos
HTML

Agrupar columnas en una tabla HTML

06/Jun/2015

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
Nombre Telé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:


	Datos del Cliente

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.



	Cliente


	Nombre
	Teléfono

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.

Código Fuente

Descárgate el código fuente de Agrupar columnas en una tabla HTML
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre HTML

Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML

¿Te atreves a probar tus habilidades y conocimiento en HTML con nuestro test?

Test HTML
Suscribir
Notificar de
guest
0 Comentarios
Opiniones integradas
Ver todos los comentarios