HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Tablas Bootstrap

❮ Anterior Próximo ❯

Tabla básica Bootstrap

Una mesa Bootstrap básica tiene un acolchado ligero y solo divisores horizontales.

La .tableclase agrega un estilo básico a una tabla:

Ejemplo

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

filas de rayas

La .table-stripedclase agrega rayas de cebra a una tabla:

Ejemplo

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Tabla Bordeada

La .table-borderedclase agrega bordes en todos los lados de la tabla y las celdas:

Ejemplo

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Filas flotantes

La .table-hoverclase agrega un efecto de desplazamiento (color de fondo gris) en las filas de la tabla:

Ejemplo

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Tabla condensada

La .table-condensedclase hace que una mesa sea más compacta cortando el relleno de la celda por la mitad:

Ejemplo

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Clases Contextuales

Las clases contextuales se pueden usar para colorear las filas de la tabla ( <tr>) o las celdas de la tabla ( <td>):

Ejemplo

Firstname Lastname Email
Default Defaultson [email protected]
Success Doe [email protected]
Danger Moe [email protected]
Info Dooley [email protected]
Warning Refs [email protected]
Active Activeson [email protected]

Las clases contextuales que se pueden utilizar son:

Clase Descripción
.active Aplica el color flotante a la fila o celda de la tabla
.success Indica una acción exitosa o positiva.
.info Indica un cambio o acción informativo neutral
.warning Indica una advertencia que podría necesitar atención.
.danger Indica una acción peligrosa o potencialmente negativa

Tablas receptivas

La .table-responsiveclase crea una tabla receptiva. La tabla luego se desplazará horizontalmente en dispositivos pequeños (menos de 768 px). Cuando se ve en algo más grande que 768 px de ancho, no hay diferencia:

Ejemplo

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Ponte a prueba con ejercicios

Ejercicio:

Agregue un atributo de clase para diseñar la tabla como una tabla Bootstrap básica.

<table >
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
  <tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>[email protected]</td>
  </tr>
<table>

Referencia completa de la tabla Bootstrap

Para obtener una referencia completa de todas las clases de tablas, vaya a nuestra referencia completa de tablas Bootstrap .


❮ Anterior Próximo ❯