La propiedad HTML DOM TableHeader rowSpan se usa para establecer o devolver el valor del atributo rowspan . El atributo rowspan en HTML especifica el número de filas que debe abarcar una celda.
Sintaxis:
- Devuelve la propiedad rowspan.
tableheaderObject.rowSpan
- Se utiliza para establecer la propiedad rowSpan.
tableheaderObject.rowSpan = number
Valores de propiedad: contiene el valor, es decir, el número que especifica el número de filas que debe abarcar una celda.
Valores devueltos: Devuelve un valor numérico que representa el número de filas que debe abarcar una celda.
Ejemplo 1: este ejemplo devuelve una propiedad de rango de filas .
HTML
<!DOCTYPE html>
<html>
<head>
<!-- style to set border -->
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<b>DOM TableHeader rowSpan property</b>
<table>
<tr>
<th id="headerID" rowspan="3"
abbr="GeeksforGeeks">
Username
</th>
</tr>
<tr>
<td>geeks</td>
</tr>
</table>
<br>
<button onclick="myGeeks()">
Click Here!
</button>
<p id="paraID" style="font-size:25px;color:green">
</p>
<!-- Script to access th element -->
<script>
function myGeeks() {
var tab = document.getElementById("headerID").rowSpan;
document.getElementById("paraID").innerHTML = tab;
}
</script>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código se usa para establecer la propiedad rowSpan .
HTML
<!DOCTYPE html>
<html>
<head>
<!-- style to set border -->
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<b>DOM TableHeader rowSpan Property</b>
<table>
<tr>
<th id="headerID" rowspan="3"
abbr="GeeksforGeeks">
Username
</th>
</tr>
<tr>
<td>geeks</td>
</tr>
</table>
<br>
<button onclick="myGeeks()">
Click Here!
</button>
<p id="paraID" style="font-size:20px;color:green">
</p>
<!-- script to access th element -->
<script>
function myGeeks() {
var tab =
document.getElementById("headerID").rowSpan = "2";
document.getElementById("paraID").innerHTML
= "The value of the rowspan attribute was changed to : " + tab;
}
</script>
</body>
</html>
Producción
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Ópera
- Firefox
- safari de manzana
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA