El propósito de este artículo es fusionar celdas de tablas en HTML. Se puede hacer usando el atributo rowspan y c olspan en HTML. Rowspan se usa para fusionar o combinar el número de celdas en una fila, mientras que colspan se usa para fusionar celdas de columna en una tabla.
Ejemplo 1: en este ejemplo, fusionaremos dos filas de la tabla y crearemos una sola fila.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
</style>
</head>
<body style="text-align:center">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>How to merge table cells in HTML?</h2>
<table align="center">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Akku</td>
<!-- This cell will take up
space on two rows -->
<td rowspan="2">44</td>
</tr>
<tr>
<td>fahad</td>
</tr>
</table>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, fusionaremos dos columnas de tabla y crearemos una sola columna.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
text-align: center;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>
How to merge table
cells in HTML?
</h2>
<table>
<tr>
<th>Name</tMh>
<th>Marks</th>
</tr>
<tr>
<td>Aman</td>
<td>10</td>
</tr>
<tr>
<td>riya</td>
<td>18</td>
</tr>
<!-- The last row -->
<tr>
<!-- This td will span two
columns, that is a
single column will take
up the space of 2 -->
<td colspan="2">Sum: 28</td>
</tr>
</table>
</center>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Firefox
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA