Bootstrap - Tablas
Bootstrap proporciona un diseño limpio para crear tablas. Algunos de los elementos de la tabla compatibles con Bootstrap son:
| No Señor. | Etiqueta y descripción |
|---|---|
| 1 | <table> Elemento de envoltura para mostrar datos en formato tabular |
| 2 | <thead> Elemento contenedor para filas de encabezado de tabla (<tr>) para etiquetar columnas de tabla. |
| 3 | <tbody> Elemento contenedor para filas de tabla (<tr>) en el cuerpo de la tabla. |
| 4 | <tr> Elemento contenedor para un conjunto de celdas de tabla (<td> o <th>) que aparece en una sola fila. |
| 5 | <td> Celda de tabla predeterminada. |
| 6 | <th> Celda de tabla especial para etiquetas de columna (o fila, según el alcance y la ubicación). Debe usarse dentro de un <thead> |
| 7 | <caption> Descripción o resumen de lo que contiene la tabla. |
Mesa básica
Si desea un estilo de tabla agradable y básico con solo un poco de relleno ligero y divisores horizontales, agregue la clase base de .table a cualquier tabla como se muestra en el siguiente ejemplo:
<table class = "table">
<caption>Basic Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>Clases de mesa opcionales
Junto con el marcado de tabla base y la clase .table, hay algunas clases adicionales que puede usar para diseñar el marcado. Las siguientes secciones le darán una idea de todas estas clases.
Mesa de rayas
Al agregar la clase .table-striped , obtendrá rayas en las filas dentro de <tbody> como se ve en el siguiente ejemplo:
<table class = "table table-striped">
<caption>Striped Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Mesa bordeada
Al agregar la clase .table-bordered , obtendrá bordes que rodean cada elemento y esquinas redondeadas alrededor de toda la tabla como se ve en el siguiente ejemplo:
<table class = "table table-bordered">
<caption>Bordered Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Tabla flotante
Al agregar la clase .table-hover , se agregará un fondo gris claro a las filas mientras el cursor se desplaza sobre ellas, como se ve en el siguiente ejemplo:
<table class = "table table-hover">
<caption>Hover Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Mesa condensada
Al agregar la clase .table-condensada , el relleno de filas se corta a la mitad para condensar la mesa. como se ve en el siguiente ejemplo. Esto es útil si desea información más densa.
<table class = "table table-condensed">
<caption>Condensed Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>Clases contextuales
Las clases contextuales que se muestran en la siguiente tabla le permitirán cambiar el color de fondo de las filas de su tabla o celdas individuales.
| No Señor. | Clase y descripción |
|---|---|
| 1 | .active Aplica el color de desplazamiento a una fila o celda en particular |
| 2 | .success Indica una acción exitosa o positiva |
| 3 | .warning Indica una advertencia que podría necesitar atención. |
| 4 | .danger Indica una acción peligrosa o potencialmente negativa |
Estas clases se pueden aplicar a <tr>, <td> o <th>.
<table class = "table">
<caption>Contextual Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class = "active">
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr class = "success">
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr class = "warning">
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr class = "danger">
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>Tablas receptivas
Al envolver cualquier .table en la clase .table-responsive , hará que la tabla se desplace horizontalmente hasta dispositivos pequeños (menos de 768px). Cuando visualice en un ancho superior a 768px, no verá ninguna diferencia en estas tablas.
<div class = "table-responsive">
<table class = "table">
<caption>Responsive Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr>
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr>
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr>
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>
</div>