En este artículo, mostraremos cómo una celda de encabezado de tabla abarca varias filas. La tarea se puede realizar utilizando el atributo rowspan mientras se usa la etiqueta <th> . Esta propiedad se utiliza para fusionar una o más celdas, así como para aumentar automáticamente la altura de la celda del encabezado único.
Sintaxis:
<th rowspan = "value">table content...</th>
Ejemplo:
HTML
<!DOCTYPE html> <html> <body> <center> <h2 style="color: green">GeeksforGeeks</h2> <b> Set the number of rows a table header cell should span in HTML </b> <table border="4" width="400"> <tr> <th>NAME of BANK</th> <th rowspan="3">SUNDAY HOLIDAY</th> <th>Open Timings</th> </tr> <tr> <td>SBI</td> <td>10am to 5pm</td> </tr> <tr> <td>PNB</td> <td>10am to 5pm</td> </tr> </table> </center> </body> </html>
Producción:
extensión de encabezado en filas
Ejemplo 2: En este ejemplo. aprenderemos cómo se pueden hacer filas para abarcar varias celdas.
La tarea se puede realizar usando el atributo rowspan cuando se usa la etiqueta <td> dentro de la etiqueta <tr> . Permite que la celda de una sola tabla abarque la altura de más de una celda. Contiene un valor numérico que define el número de filas que se deben abarcar.
Sintaxis:
<tr> <td rowspan = "value">table column content...</td> </tr>
HTML
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 2px solid black;
border-collapse: collapse;
padding: 6px;
}
td {
border: 1px solid green;
text-align: center;
}
</style>
</head>
<body style="text-align: center">
<center>
<h2 style="color: green">GeeksforGeeks</h2>
<b>
Set the number of rows a table
cell should span in HTML
</b>
<br />
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>ID</th>
</tr>
<tr>
<td>Raj</td>
<!-- This cell will take up space on
two rows -->
<td rowspan="2">24</td>
<td>123</td>
</tr>
<tr>
<td>sandeep</td>
<td>1234</td>
</tr>
<tr>
<td>fahad</td>
<td>21</td>
<td>12345</td>
</tr>
</table>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA