Bootstrap Tablas
Bootstrap proporciona un diseño claro para crear tablas. La siguiente tabla enumera algunos de los elementos de tabla que admite Bootstrap:
| Etiqueta | Descripción |
|---|---|
| <table> | Añade estilos básicos a la tabla. |
| <thead> | Elemento contenedor de la fila de encabezado de la tabla (<tr>), que se utiliza para identificar las columnas de la tabla. |
| <tbody> | Elemento contenedor de las filas de la tabla en el cuerpo de la tabla (<tr>). |
| <tr> | Elemento contenedor de un grupo de celdas de tabla que aparecen en una sola fila (<td> o <th>). |
| <td> | Celda de tabla predeterminada. |
| <th> | Celda de tabla especial, que se utiliza para identificar columnas o filas (según el alcance y la posición). Debe usarse dentro de <thead>. |
| <caption> | Descripción o resumen del contenido almacenado en la tabla. |
Clases de tablas
Los siguientes estilos de tabla se pueden usar en las tablas:
| Clase | Descripción | Ejemplo |
|---|---|---|
| .table | Añade estilos básicos a cualquier <table> (solo líneas divisorias horizontales) | Pruébalo |
| .table-striped | Añade rayas en forma de cebra dentro de <tbody> (no compatible con IE8) | Pruébalo |
| .table-bordered | Añade bordes a todas las celdas de la tabla | Pruébalo |
| .table-hover | Habilita el estado de hover del ratón en cualquier fila dentro de <tbody> | Pruébalo |
| .table-condensed | Hace que la tabla sea más compacta | Pruébalo |
| Combina todas las clases de tabla | Pruébalo | |
Clases <tr>, <th> y <td>
Las clases de la siguiente tabla se pueden usar para filas o celdas de la tabla:
| Clase | Descripción | Ejemplo |
|---|---|---|
| .active | Aplica el color de hover a la fila o celda | Pruébalo |
| .success | Indica una operación exitosa | Pruébalo |
| .info | Indica una operación de cambio de información | Pruébalo |
| .warning | Indica una operación de advertencia | Pruébalo |
| .danger | Indica una operación peligrosa | Pruébalo |
Tablas básicas
Si desea una tabla básica que solo tenga relleno (padding) y división horizontal, agregue la clase.table, como se muestra en el siguiente ejemplo:
Ejemplo
Pruébalo »
El resultado es el siguiente:
Clases de tabla opcionales
Además del marcado básico de tabla y la clase .table, hay algunas clases que se pueden usar para definir estilos para el marcado. A continuación se presentan estas clases.
Tablas rayadas
Al agregar.table-stripedclase, verá rayas en las filas dentro de <tbody>, como se muestra en el siguiente ejemplo:
Ejemplo
Pruébalo »
El resultado es el siguiente:
Tablas con bordes
Al agregar.table-borderedclase, verá que cada elemento tiene un borde alrededor, y que toda la tabla tiene esquinas redondeadas, como se muestra en el siguiente ejemplo:
Ejemplo
Pruébalo »
El resultado es el siguiente:
Tablas con hover
Al agregar.table-hoverclase, cuando el puntero se sitúa sobre una fila aparecerá un fondo gris claro, como se muestra en el siguiente ejemplo:
Ejemplo
Pruébalo »
El resultado es el siguiente:
Tablas compactas
Al agregar.table-condensed clase, el relleno (padding) de las filas se reduce a la mitad para que la tabla se vea más compacta, como se muestra en el siguiente ejemplo. Esto es muy útil cuando se desea que la información se vea más compacta.
Ejemplo
Pruébalo »
El resultado es el siguiente:
Clases contextuales
Las clases contextuales enumeradas en la siguiente tabla le permiten cambiar el color de fondo de una fila de tabla o de una celda individual.
| Clase | Descripción |
|---|---|
| .active | Aplica un color de hover a una fila o celda específica |
| .success | Indica una acción exitosa o positiva |
| .warning | Indica una advertencia que requiere atención |
| .danger | Indica una acción peligrosa o potencialmente negativa |
Estas clases se pueden aplicar a <tr>, <td> o <th>.
Ejemplo
Pruébalo »
El resultado es el siguiente:
Tablas responsivas
Al envolver cualquier.tabledentro de.table-responsiveclase, puede hacer que la tabla se desplace horizontalmente para adaptarse a dispositivos pequeños (menos de 768px). Cuando se visualiza en dispositivos grandes de más de 768px de ancho, no verá ninguna diferencia.
Ejemplo
Pruébalo »
El resultado es el siguiente:
