Arranque 4 | Mesas – Barcelona Geeks

Bootstrap proporciona una serie de clases que se pueden usar para aplicar varios estilos a las tablas, como cambiar la apariencia del encabezado, eliminar filas, agregar o eliminar bordes, hacer que las filas se puedan desplazar, etc. Bootstrap también proporciona clases para hacer que las tablas respondan.

Tabla simple: la clase .table se usa para crear una tabla Bootstrap simple. Este nombre de clase se usa con la etiqueta <table> para crear una tabla.

Sintaxis:

<table class="table"> Table Contents... <table>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Tables</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1>
        <!-- Bootstrap table class -->
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">S. No.</th>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Producción:

Filas despojadas: la clase .table -stripped se usa para crear filas alternativas oscuras y claras. Utilice la combinación de clases de tabla y de tabla dividida dentro de la etiqueta <table> para crear una tabla dividida.

Sintaxis:

<table class="table table-stripped"> Table Contents... <table>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Tables</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1>
        <!-- Bootstrap table and table-stripped classes -->
        <table class="table table-stripped">
            <thead>
                <tr>
                    <th scope="col">S. No.</th>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Producción:

Tabla bordeada: la clase .table-bordered se usa para agregar bordes en todos los lados de la tabla y la celda. Utilice la combinación de tablas y clases bordeadas por tablas dentro de la etiqueta <table> para crear una tabla bordeada.

Sintaxis:

<table class="table table-bordered"> Table Contents... <table>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Tables</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1>
        <!-- Bootstrap table and table-bordered classes -->
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th scope="col">S. No.</th>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Producción:

Tabla de filas de desplazamiento: la clase .table-hover se usa para agregar el efecto de desplazamiento (cambiar el color de fondo a gris cuando se mueve el mouse) en las filas de la tabla. Utilice la combinación de clases de tabla y desplazamiento de tabla dentro de la etiqueta <table> para crear una tabla de filas de desplazamiento.

Sintaxis:

<table class="table table-hover"> Table Contents... <table>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Tables</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1>
        <!-- Bootstrap table and table-hover classes -->
        <table class="table table-hover">
            <thead>
                <tr>
                    <th scope="col">S. No.</th>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Producción:

Mesa negra/oscura: la clase .table-dark se usa para agregar el color de fondo negro de una mesa. Use la combinación de las clases table y table-dark dentro de la etiqueta <table> para crear una tabla oscura.

Sintaxis:

<table class="table table-dark"> Table Contents... <table>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Tables</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1>
        <!-- Bootstrap table and table-dark classes -->
        <table class="table table-dark">
            <thead>
                <tr>
                    <th scope="col">S. No.</th>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Producción:

Tabla con rayas oscuras: las clases .table-dark y .table-stripped se utilizan para crear una tabla con rayas oscuras. Use la combinación de las clases table, table-dark y table-stripped dentro de la etiqueta <table> para crear la tabla con franjas oscuras.

Sintaxis:

<table class="table table-dark table-stripped"> Table Contents... <table>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Tables</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1>
        <!-- Bootstrap table and table-dark and table-stripped classes -->
        <table class="table table-dark table-stripped">
            <thead>
                <tr>
                    <th scope="col">S. No.</th>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Producción:

Mesa flotante oscura: las clases .table-dark y .table-hover se usan para agregar el efecto de desplazamiento (cambiar el color de fondo a gris oscuro cuando se mueve el mouse) en las filas de la tabla. Utilice la combinación de las clases table, table-dark y table-hover dentro de la etiqueta <table> para crear la tabla de efecto de desplazamiento oscuro.

Sintaxis:

<table class="table table-dark table-hover"> Table Contents... <table>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Tables</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1>
        <!-- Bootstrap table, table-dark and table-hover classes -->
        <table class="table table-dark table-hover">
            <thead>
                <tr>
                    <th scope="col">S. No.</th>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Producción:

Tabla sin bordes: el .table-borderless se usa para eliminar el borde de la tabla. Utilice la combinación de clases table y table-borderless dentro de la etiqueta <table> para crear una tabla sin bordes.

Sintaxis:

<table class="table table-borderless"> Table Contents... <table>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Tables</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1>
        <!-- Bootstrap table, table-borderless classes -->
        <table class="table table-borderless">
            <thead>
                <tr>
                    <th scope="col">S. No.</th>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Producción:

Tabla coloreada: Bootstrap proporciona una serie de clases contextuales que se pueden usar para colorear toda la fila o una sola celda de una tabla. Estas clases se deben utilizar con mesa clara y no con mesa oscura para una mejor apariencia. La lista de clases contextuales se da a continuación.

tabla-primaria	secundaria de mesa	mesa-éxito
peligro de mesa	advertencia de mesa	información de la tabla
luz de mesa	mesa oscura	tabla-activa

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Tables</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1>
        <!-- Bootstrap table class -->
        <table class="table">
            <thead>
                <tr class="table-primary">
                    <th scope="col">S. No.</th>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">Age</th>
                </tr>
            </thead>
            <tbody>
                <tr class="table-secondary">
                    <th scope="row">1</th>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr class="table-success">
                    <th scope="row">2</th>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr class="table-danger">
                    <th scope="row">3</th>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Producción:

Tabla de color oscuro: para colorear las tablas oscuras, se utilizarán clases de color de fondo de Bootstrap.

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Tables</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1>
        <!-- Bootstrap table and table-dark classes -->
        <table class="table table-dark">
            <thead>
                <tr>
                    <th scope="col">S. No.</th>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">Age</th>
                </tr>
            </thead>
            <tbody>
                <tr class="bg-secondary">
                    <th scope="row">1</th>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr class="bg-success">
                    <th scope="row">2</th>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr class="bg-danger">
                    <th scope="row">3</th>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Producción:

Tabla pequeña: la clase .table-sm se usa para crear una tabla pequeña al reducir el relleno de la celda. Utilice la combinación de las clases table, table-bordered y table-sm dentro de la etiqueta <table> para crear una tabla pequeña bordeada.

Sintaxis:

<table class="table table-bordered table-sm"> Table Contents... <table>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Tables</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1>
        <!-- Bootstrap table, table-bordered and table-sm classes -->
        <table class="table table-bordered table-sm">
            <thead>
                <tr>
                    <th scope="col">S. No.</th>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Producción:

Tablas receptivas: la clase .table-responsive se usa para crear una tabla receptiva. Para hacer que la tabla responda en todos los tamaños de ventana gráfica, envuelva la tabla dentro de una etiqueta <div> de apertura y cierre, con una clase table-responsive dentro de la etiqueta <div> de apertura. De manera similar, para hacer que la tabla responda según el tamaño de la ventana gráfica, use class table-responsive{-sm|-md|-lg|-xl}.

En el caso de una tabla receptiva específica de la ventana gráfica, la tabla se volverá receptiva si el tamaño de la ventana gráfica es menor que la ventana gráfica especificada por la clase table-responsive{-sm|-md|-lg|-xl}. La lista de tamaños de ventanas gráficas de tablas receptivas se proporciona a continuación:

Clase de tabla receptiva	Ancho de pantalla
table-responsive-sm	< 576px
tabla-responsive-md	< 768px
tabla-responsive-lg	< 992px
table-responsive-xl	< 1200px

Sintaxis:

<div class="table-responsive"> Table <div>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Tables</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1 style="text-align:center;color:green;">
            GeeksforGeeks
        </h1>
        <!-- Bootstrap table-responsive class -->
        <div class="table-responsive-xl">
            <!-- Bootstrap table class -->
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">S. No.</th>
                        <th scope="col">First Name</th>
                        <th scope="col">Last Name</th>
                        <th scope="col">Email</th>
                        <th scope="col">Contact No.</th>
                        <th scope="col">Gender</th>
                        <th scope="col">City</th>
                        <th scope="col">Country</th>
                        <th scope="col">Pin Code</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Ajit</td>
                        <td>Singh</td>
                        <td>ajt@gfg.com</td>
                        <td>XXXXXXXXXX</td>
                        <td>Male</td>
                        <td>Noida</td>
                        <td>India</td>
                        <td>201301</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

Producción:

Navegador compatible:

Google Chrome
explorador de Internet
Firefox
Ópera
Safari

Publicación traducida automáticamente

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

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

Deja una respuesta Cancelar la respuesta