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.