La propiedad vAlign de la fila de la tabla HTML DOM se utiliza para establecer o devolver el valor del atributo valign del elemento <tr>. El atributo valign se usa para especificar la alineación vertical del contenido de texto dentro de la fila de la tabla.
Nota : esta propiedad no es compatible con HTML5.
Sintaxis
Devuelve la propiedad Table Row vAlign.
TableRowobject.vAlign;
Establece la propiedad vAlign de la fila de la tabla.
TableRowobject.vAlign = "top|middle|bottom|baseline";
Valores de propiedad:
- top: Establece el contenido en la alineación superior.
- medio: Establece el contenido en alineación media.
- bottom: establece el contenido en la alineación inferior.
- línea de base: Establece el contexto a la línea de base. La línea de base es la línea donde se sientan la mayoría de los personajes. Tiene un valor predeterminado.
Valor devuelto: Devuelve un valor de string que representa la alineación vertical del elemento TableRow.
Ejemplo 1: El siguiente código ilustra cómo devolver la propiedad vAlign.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid green;
}
</style>
</head>
<body>
<center>
<h1>
GeeksForGeeks
</h1>
<h2>HTML DOM tableRow vAlign Property</h2>
<table style="height:200px" border="1">
<tr id="GFG" valign="top">
<th>Name</th>
<th>Expenses</th>
</tr>
<tr valign="bottom">
<td>BITTU</td>
<td>2500.00</td>
</tr>
<tr valign="middle">
<td>RAKESH</td>
<td>1400.00</td>
</tr>
</table>
<button onclick="myGeeks()">
Click Here!
</button>
<p id="sudo"></p>
</center>
<script>
function myGeeks() {
var row = document.getElementById("GFG").vAlign;
document.getElementById("sudo").innerHTML = row;
}
</script>
</body>
</html>
Producción:
Ejemplo 2: el código siguiente establece la propiedad vAlign.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid green;
}
</style>
</head>
<body>
<center>
<h1>
GeeksForGeeks
</h1>
<h2>HTML DOM tableRow vAlign Property</h2>
<table style="height:200px" border="1">
<tr id="GFG" valign="top">
<th>Name</th>
<th>Expenses</th>
</tr>
<tr valign="bottom">
<td>BITTU</td>
<td>2500.00</td>
</tr>
<tr valign="middle">
<td>RAKESH</td>
<td>1400.00</td>
</tr>
</table>
<button onclick="myGeeks()">
Click Here!
</button>
<p id="sudo"></p>
</center>
<script>
function myGeeks() {
var row = document.getElementById(
"GFG").vAlign = "bottom";
document.getElementById("sudo").innerHTML = row;
}
</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