Para combinar celdas en el editor HTML debemos conocer como funciona este y cuales son los códigos que debemos utilizar para hacer este procedimiento.

En el presente post te mostraremos como combinar las celdas de una tabla a través del editor HTML.

Como combinar celdas en el editor HTML

Para combinar celdas en el editor HTML debemos realizar los siguientes pasos:

1. Lo primero que debemos hacer es Insertar Tabla mediante el icono correspondiente.

2. Posteriormente procedemos a Crear Tabla. En la ventana emergente seleccionamos el numero de filas y columnas que deseamos para nuestra tabla y finalmente le damos clic al botón Crear Tabla.

3. A continuación te recomendamos que les coloques nombre y letra a las celdas para que, al momento de usar el editor HTML, el proceso sea más sencillo.

4. Ahora empezaremos por combinar las celdas. Supongamos que deseamos combinar las celdas 4b, 4c y 4d. Le damos clic al botón del Editor HTML.

4.1. Si deseamos combinar las celdas de manera horizontal, haremos lo siguiente:

4.1.1. Primero debemos ubicar las celdas que deseamos combinar en el editor HTML.

4.1.2. Seguidamente, nos ubicamos en la primera de las celdas que vamos a combinar, en este caso 4b, y le damos clic a la primera parte del código (<td>), aquí vamos a agregarle la palabra colspan=»numero de espacios», en este caso colocaremos 3 espacios, por lo que el código nos debe quedar de esta manera: <td colspan=»3″>4b</td>.

4.1.3. Volvemos a darle clic al HTML para ver como nos ha quedado, En este caso nos quedan celdas sobrantes que debemos borrar (4d y 4e). Para ello debemos dirigirnos nuevamente al HTML y borrar el texto de las celdas en cuestión.

4.2. Ahora combinaremos de manera Vertical. Para este ejemplo combinaremos las celdas 2e y 3e.

4.2.1. Para ello volvemos al HTL, ubicamos las celdas mencionadas. A la línea de código de la celda 2e le agregamos rowspan=»numero de espacios»; en este ejemplo utilizaremos 2 espacios. La línea de código debe quedar de la siguiente manera: <td rowspan=»2″>2e</td>. Y de una vez eliminamos la línea de código de la celda 3e para que no nos quede ninguna celda de más.

5. Adicionalmente si queremos combinar una celda que pertenezca al cabecero y otra que pertenezca al cuerpo, por ejemplo la 1a (cabecero) y la 2a (cuerpo), debemos hacer que ambas pertenezcan al cuerpo de la siguiente manera:

5.1. Lo primero que debemos hacer es borrar el código <thead>

5.2. Posteriormente cortamos el código <tbody> y lo pegamos debajo de <table>

5.3. Seguidamente, a los códigos que quedaron debajo de <tbody> cambiamos los th por td, y queda un código tal como este: <td scope=»col»><span style=»font-weight: normal;»>1a</span ></td>

5.4. Finalmente para combinar las celdas utilizamos el meto anteriormente mencionado.