Bootstrap proporciona una amplia variedad de tablas con diferentes estilos y colores, algunas con diseños receptivos y otras con efectos de desplazamiento. Se pueden usar diferentes clases para diseñar la tabla de manera diferente o habilitar sus diversas funcionalidades, como compactar la tabla, cambiar la apariencia del encabezado, etc., en bootstrap. Estas clases se utilizan de acuerdo con las preferencias del usuario para obtener la apariencia deseada.
Tabla básica de Bootstrap: la tabla básica de Bootstrap se puede crear usando la clase .table en la etiqueta de la tabla del código HTML. Tiene poco estilo y solo tiene divisores horizontales. También podemos añadir estilo a la mesa para que se vea más atractiva.
Dar estilo a las tablas de Bootstrap: algunas de las otras clases para dar estilo a las tablas en Bootstrap son:
- table-bordered: Se usa para agregar bordes a la tabla y las celdas.
- table-condensed: Corta el relleno de celdas a la mitad, haciendo que la mesa sea más compacta y comprimida.
- table-dark: esta clase se utiliza para cambiar el color de fondo de la tabla a negro.
- table-hover: Habilita la funcionalidad de hover para una fila de la tabla.
- table-responsive: Se utiliza para crear una tabla responsiva, es decir, la tabla puede cambiar su apariencia dinámicamente, según la pantalla en la que se visualice.
A continuación se muestran los pasos para usar una tabla básica de Bootstrap.
Paso 1: Incluya el siguiente enlace de hoja de estilo al código para agregar un estilo básico a la tabla, es decir, divisores horizontales y relleno.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css”>
Paso 2: agregar la clase, .table en la etiqueta <table>.
Sintaxis:
<table class="table">
<thead>
<tr>
<th scope="col">S. No.</td>
<th scope="col">Topic</td>
<th scope="col">Problems</td>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</td>
<td>Array</td>
<td>400</td>
</tr>
</tbody>
</table>
Ejemplo 1: en este ejemplo, crearemos una tabla de arranque básica siguiendo los pasos anteriores.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Basic Table</title>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.container{
text-align:center;
color:green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<table class="table">
<thead>
<tr>
<th scope="col">S. No.</td>
<th scope="col">Topic</td>
<th scope="col">Problems</td>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</td>
<td>Array</td>
<td>400</td>
</tr>
<tr>
<th scope="row">2</td>
<td>String</td>
<td>623</td>
</tr>
<tr>
<th scope="row">3</td>
<td>maths</td>
<td>942</td>
</tr>
<tr>
<th scope="row">4</td>
<td>recursion</td>
<td>160</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, crearemos una tabla de arranque básica y agregaremos el estilo usando las clases table-dark y table-bordered.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Basic Table</title>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.container{
text-align:center;
color:green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<table class="table table-dark table-bordered">
<thead>
<tr>
<th scope="col">S. No.</td>
<th scope="col">Topic</td>
<th scope="col">Problems</td>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</td>
<td>Array</td>
<td>400</td>
</tr>
<tr>
<th scope="row">2</td>
<td>String</td>
<td>623</td>
</tr>
<tr>
<th scope="row">3</td>
<td>maths</td>
<td>942</td>
</tr>
<tr>
<th scope="row">4</td>
<td>recursion</td>
<td>160</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Internet Explorer 9.0
- Firefox 3.6
- Safari 4.0
- Ópera 10.5
Publicación traducida automáticamente
Artículo escrito por bhawnaatrish y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA