HTML | Atributo de rango de filas

El atributo rowspan en HTML especifica el número de filas que debe abarcar una celda. Es decir, si una fila abarca dos filas, significa que ocupará el espacio de dos filas en esa tabla. Permite que la celda de una sola tabla abarque la altura de más de una celda o fila. Proporciona la misma funcionalidad que «combinar celdas» en el programa de hoja de cálculo como Excel.
Uso: se puede usar con los elementos <td> y <th> en una tabla HTML .
 

Valores de atributo: contiene un valor, es decir, un número que especifica el número de filas que debe abarcar una celda de la tabla. 

  • <td>: el atributo rowspan cuando se usa con la etiqueta <td> determina el número de celdas estándar que debe abarcar. 
    Sintaxis:
<td rowspan = "value">table content...</td>

El valor especifica el número de filas que llena la celda. El valor debe ser un número entero. 
Ejemplo: 

html

<!DOCTYPE html>
<html>
    <head>
        <title>HTML rowspan Attribute</title>
        <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>HTML rowspan Attribute</h2>
 
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Ajay</td>
                <!-- This cell will take up space on
                    two rows -->
                <td rowspan="2">24</td>
            </tr>
            <tr>
                <td>Priya</td>
            </tr>
        </table>
         
    </body>
</html>                   

Producción: 

rowspan

  • <th>: el atributo rowspan cuando se usa con la etiqueta <th> determina el número de celdas de encabezado que debe abarcar. 
    Sintaxis:
<th rowspan = "value">table content...</th>

El valor especifica el número de filas que llena la celda. El valor debe ser un número entero. 
Ejemplo: 

html

<!DOCTYPE html>
<html>
    <head>
        <title>HTML rowspan Attribute</title>
        <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>HTML rowspan Attribute</h2>
         
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <!-- This cell will take up space
                    in 3 rows -->
                <th rowspan="3">GeeksforGeeks</th>
            </tr>
            <tr>
                <td>Arun</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Priya</td>
                <td>25</td>
            </tr>
        </table>
    </body>
</html>                   

Producción: 

rowspan

Navegadores compatibles: los navegadores compatibles con el atributo rowspan se enumeran a continuación:  

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *