En la discusión anterior, discutimos cómo crear tablas en HTML. En esta discusión, el material discutido es sobre cómo fusionar tablas o fusionar celdas en tablas en HMTL. Es posible que ya esté familiarizado con el término “combinar celdas” en Microsoft Excel o Microsoft Word. Combinar celdas es un método para combinar varias celdas en una sola en una tabla.
Por supuesto, el uso de celdas combinadas es muy necesario para compilar información en tablas que requieren combinar varias celdas en una sola. El propio HTML también proporciona atributos especiales para fusionar celdas, a saber, rango de filas y rango de columnas.
La mayoría de navegadores como Firefox, Chrome, Opera, Safari e Internet Explorer admiten el uso de colspan y rowspan. Colspan y rowspan también son compatibles con HTML5. Para una explicación más detallada, veamos la explicación a continuación:
Colspan y Rowspan
Los atributos colspan y rowspan se aplican a las etiquetas
Escritura de Colspan:
<td colspan="number">
sintaxis de intervalo de filas:
<td rowspan="number">
El valor de “número” en colspan y rowspan indica el número de columnas o filas que se combinarán en una sola. El siguiente es un ejemplo de cómo escribir código y usar colspan en HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Colspan pada Tabel di HTML</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">Data</th>
</tr>
<tr>
<th>Nama</th>
<th>NIM</th>
</tr>
<tr>
<td>Ridayanti</td>
<td>071401001</td>
</tr>
<tr>
<td>Ahmad Zulham</td>
<td>071401002</td>
</tr>
</table>
</body>
</html>Después de ejecutar el código HTML anterior en el navegador, aparecerá como se muestra a continuación:
Visto en la imagen de arriba, en la primera fila “Datos” se aplicó colspan = “2” que combina dos columnas en una.
En cuanto al código de ejemplo para escribir y usar filas en HTML, como se muestra a continuación:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Rowspan pada Tabel di HTML</title>
</head>
<body>
<table border="1">
<tr>
<th>No</th>
<th>Nama </th>
<th>Hobi</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">Ridayanti</td>
<td>Bulu Tangkis</td>
</tr>
<tr>
<td>Traveling</td>
</tr>
</table>
</body>
</html>Después de ejecutar el código HTML anterior en el navegador, aparecerá como se muestra a continuación:
Como puede ver en la imagen de arriba, en la segunda fila que contiene datos para “No” y “Nombre” se aplica un intervalo de filas que combina dos filas, es decir, la segunda y la tercera filas en las columnas uno y dos. Para ver ejemplos del uso de estos dos atributos, puede ver a continuación:
El ejemplo anterior es un ejemplo del uso de colspan y rowspan en HTML sin usar CSS (HTML puro). El siguiente es un ejemplo de cómo escribir código y usar colspan y rowspan usando CSS para hacer que el borde y la apariencia de la celda sean más atractivos:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Colspan dan Rowspan di HTML</title>
<style type="text/css">
table,th, td{
border: 1px solid black;
border-collapse: collapse; }
table{ width: 30%; }
th, td{ text-align:center; }
</style>
</head>
<body>
<table>
<tr>
<th rowspan="2">No</th>
<th rowspan="2">NIM</th>
<th rowspan="2">Nama</th>
<th colspan="3">Absensi</th>
</tr>
<tr>
<td>Hadir</td>
<td>Sakit</td>
<td>Izin</td>
</tr>
<tr>
<td>1</td>
<td>071401001</td>
<td>Ridayanti</td>
<td>20</td>
<td>0</td>
<th>0</th>
</tr>
<tr>
<td>2</td>
<td>071401001</td>
<td>Fika Amalia</td>
<td>18</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</body>
</html>Después de ejecutar el código HTML anterior en el navegador, aparecerá como se muestra a continuación:
Visto en la imagen de arriba, en la primera fila de celdas “No”, “NIM” y “Nombre”, se aplica rowspan = “2” para fusionar la primera y la segunda fila. Luego, en la primera fila de la celda, se aplica “Asistencia” colspan = “3” para que pueda combinar tres columnas en una.
Ahora entiendes, ¿no?, ¿cómo combinar tablas en HTML? Si es así, consulte el siguiente material sobre el uso de bgcolor, reglas y atributos de borde en tablas HTML.
