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>
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.</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>Akshit</td> <td>Moradabad</td> <td>20</td> </tr> <tr> <th scope="row">2</td> <td>Nikita</td> <td>Lucknow</td> <td>21</td> </tr> <tr> <th scope="row">3</td> <td>Parul</td> <td>Dehradun</td> <td>22</td> </tr> </tbody> </table> </div> </body> </html>
PRODUCCIÓN:
Aprenda sobre clases contextuales de Tablas en Bootstrap
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 la mesa clara y no con la 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
Sintaxis:
<table class="table">
<tr class="table- * ">
Content
</tr>
<table>
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.(table-primary)</td> <th scope="col">Name</td> <th scope="col">City</td> <th scope="col">Age</td> </tr> </thead> <tbody> <tr class="table-secondary"> <td scope="row">1 (table-secondary)</td> <td>Ajay</td> <td>Patna</td> <td>20</td> </tr> <tr class="table-success"> <td scope="row">2 (table-success)</td> <td>Rahul</td> <td>Chandigarh</td> <td>17</td> </tr> <tr class="table-info"> <td scope="row">3 (table-info)</td> <td>Nikita</td> <td>Mumbai</td> <td>17</td> </tr> <tr class="table-light"> <td scope="row">4 (table-light)</td> <td>Parul</td> <td>Shimla</td> <td>17</td> </tr> <tr class="table-dark"> <td scope="row">5 (table-dark)</td> <td>Somya</td> <td>Delhi</td> <td>17</td> </tr> <tr class="table-active"> <td scope="row">6 (table-active)</td> <td>Eshika</td> <td>Noida</td> <td>22</td> </tr> <tr class="table-danger"> <td scope="row">7(table-danger)</td> <td>Deeksha</td> <td>Bengaluru</td> <td>21</td> </tr> </tbody> </table> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA