Arranque | Mesas | Serie 1

Posted on by Rudeus Greyrat

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

Tabla simple: para crear una tabla Bootstrap simple, agregue la clase de tabla dentro de la etiqueta <table> como se indica a continuación.

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
        initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>Bootstrap | Tables</title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
        div {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>GeeksForGeeks</h1>
        <!-- Bootstrap table class -->
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">S. No.</td>
                    <th scope="col">Name</td>
                    <th scope="col">City</td>
                    <th scope="col">Age</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</td>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</td>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</td>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Producción:

bootstrap-table-simple

Tabla oscura: para que la tabla aparezca con un fondo oscuro y una fuente clara, use la tabla de clase oscura junto con la tabla de clase dentro de la etiqueta <table> como se indica a continuación.

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
            initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>Bootstrap | Tables</title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
        div {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>GeeksForGeeks</h1>
        <!-- table, table-dark -->
        <table class="table table-dark">
            <thead>
                <tr>
                    <th scope="col">S. No.</td>
                    <th scope="col">Name</td>
                    <th scope="col">City</td>
                    <th scope="col">Age</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</td>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</td>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</td>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Producción:

bootstrap-table-dark

Aspecto del encabezado: para que el encabezado de la tabla aparezca en color gris claro, use la clase thead-light dentro de <thead> junto con la clase de tabla dentro de <table> o para que el encabezado de la tabla aparezca en color gris oscuro, use la clase thead-dark dentro <thead> junto con la clase de tabla dentro de <table> . Consulte el siguiente ejemplo para obtener una ilustración.

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
            initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>Bootstrap | Tables</title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
        div {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>GeeksForGeeks</h1>
        <!-- table, thead-light -->
        <table class="table">
            <thead class="thead-light">
                <tr>
                    <th scope="col">S. No.</td>
                    <th scope="col">Name</td>
                    <th scope="col">City</td>
                    <th scope="col">Age</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</td>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</td>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</td>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
        <!-- table, thead-dark -->
        <table class="table">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">S. No.</td>
                    <th scope="col">Name</td>
                    <th scope="col">City</td>
                    <th scope="col">Age</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</td>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</td>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</td>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Producción:

bootstrap-table-heading

Filas despojadas : para que la tabla aparezca en filas oscuras y claras alternas, use la combinación de clases tabla y tabla despojada dentro de la etiqueta <table> . También podemos hacer que la tabla oscura aparezca en filas claras y oscuras alternas usando la combinación de clases table , table-dark y table-stripped dentro de la etiqueta <table> . Consulte el siguiente ejemplo para obtener una ilustración.

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
            initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>Bootstrap | Tables</title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
        div {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>GeeksForGeeks</h1>
        <!-- table, table-stripped -->
        <table class="table table-stripped">
            <thead>
                <tr>
                    <th scope="col">S. No.</td>
                    <th scope="col">Name</td>
                    <th scope="col">City</td>
                    <th scope="col">Age</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</td>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</td>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</td>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
        <!-- table, table-stripped, table-dark -->
        <table class="table table-stripped table-dark">
            <thead>
                <tr>
                    <th scope="col">S. No.</td>
                    <th scope="col">Name</td>
                    <th scope="col">City</td>
                    <th scope="col">Age</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</td>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</td>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</td>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Producción:

bootstrap-table-striped

Tabla bordeada: para hacer que la tabla y todas sus celdas estén rodeadas de bordes, use la tabla de clase bordeada junto con la tabla de clase dentro de la etiqueta <table> . También podemos hacer que la tabla oscura y cada una de sus celdas estén rodeadas de bordes usando la combinación de clases table , table-dark , table-borded dentro de la etiqueta <table> . Consulte el siguiente ejemplo para obtener una ilustración.

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
            initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>Bootstrap | Tables</title>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
        div {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>GeeksForGeeks</h1>
        <!-- table, table-bordered -->
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th scope="col">S. No.</td>
                    <th scope="col">Name</td>
                    <th scope="col">City</td>
                    <th scope="col">Age</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</td>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</td>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</td>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
        <!-- table, table-bordered, table-dark -->
        <table class="table table-bordered table-dark">
            <thead>
                <tr>
                    <th scope="col">S. No.</td>
                    <th scope="col">Name</td>
                    <th scope="col">City</td>
                    <th scope="col">Age</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</td>
                    <td>Ajay</td>
                    <td>Patna</td>
                    <td>20</td>
                </tr>
                <tr>
                    <th scope="row">2</td>
                    <td>Rahul</td>
                    <td>Chandigarh</td>
                    <td>17</td>
                </tr>
                <tr>
                    <th scope="row">3</td>
                    <td>Parush</td>
                    <td>Kolkata</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Producción:

bootstrap-table-bordered

Navegador compatible:

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

Publicación traducida automáticamente

Artículo escrito por Husban 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 *