La propiedad colSpan HTML DOM TableHeader se utiliza para establecer o devolver el valor del atributo colspan. El atributo colspan define el número de columnas que debe abarcar una celda de encabezado.
Sintaxis:
- Devuelve la propiedad colSpan .
tableheaderObject.colSpan
- Se utiliza para establecer la propiedad colSpan .
tableheaderObject.colSpan = number
Valores de propiedad : contiene un solo valor, es decir, numérico , que representa el número de columnas que debe abarcar una celda de encabezado.
Valor devuelto : Devuelve un valor numérico que representa el número de columnas.
Ejemplo 1: este ejemplo devuelve una propiedad colSpan .
HTML
<!DOCTYPE html>
<html>
<head>
<!-- style to set border -->
<style>
table{
border:3px solid black;
}
td{
border: 1px solid green;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<b>DOM TableHeader colSpan property</b>
<br/><br/>
<table>
<tr>
<th id="tableHeaderID" colspan="2">
User Expense
</th>
</tr>
<tr>
<td>Arun</td>
<td>$10</td>
</tr>
<tr>
<td>Priya</td>
<td>$8</td>
</tr>
<tr>
<td>Tom</td>
<td>$18</td>
</tr>
</table>
<br>
<button onclick="myGeeks()">
Click to get number of columns
</button>
<p id="paraID"
style="font-size:25px;
color:green">
</p>
<!-- script to access th element -->
<script>
function myGeeks() {
var tab = document.getElementById(
"tableHeaderID").colSpan;
document.getElementById(
"paraID").innerHTML = tab;
}
</script>
</body>
</html>
Producción:
propiedad colSpan
Ejemplo 2: El siguiente código se usa para establecer la propiedad colSpan .
HTML
<!DOCTYPE html>
<html>
<head>
<!-- style to set border -->
<style>
table
{
border: 2px solid black;
}
td {
border: 1px solid green;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<b>DOM TableHeader colSpan Property</b>
<br/><br/>
<table>
<tr>
<th id="tableHeaderID" colspan="2">
User Expense
</th>
</tr>
<tr>
<td>Arun</td>
<td>$10</td>
</tr>
<tr>
<td>Priya</td>
<td>$8</td>
</tr>
<tr>
<td>Tom</td>
<td>$18</td>
</tr>
</table>
<br>
<button onclick="myGeeks()">
Click to get value of colspan
</button>
<p id="paraID"
style="font-size:20px;
color:green">
</p>
<!-- script to access th element -->
<script>
function myGeeks() {
var tab = document.getElementById(
"tableHeaderID").colSpan="4";
document.getElementById(
"paraID").innerHTML =
"The value of the colspan attribute was changed to: "
+ tab;
}
</script>
</body>
</html>
Producción:
propiedad colSpan
Navegadores compatibles:
- Google Chrome
- Borde
- Mozilla Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA