BOOTSTRAP - TABLAS

En esta sesión mostramos ejemplos del uso de diferentes clases CSS incluidas en Bootstrap para definir estilos de tablas.

Cargando video...

NOTA: Solo puedes ver una versión limitada del video a baja resolución, si quieres ver la versión completa por favor regístrate y obtén alguno de nuestros planes!

Descripción del Vídeo

Con Bootstrap, tenemos clases predefinidas para:
Tablas simples
Tablas "cebra"
Tablas con borde
Resaltar fila bajo el puntero del ratón (hover)
Tablas compactas (reducir espacio en blanco)
Aplicar clases "contextuales" para indicar ciertas condiciones con el color de las filas/celdas.
Tablas sensibles al dispositivo (que puedan desplazarse en móviles/tablets)


<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Las 3 etiquetas anteriores deben ir en primer lugar en el bloque head -->
<title>Tablas con Bootstrap</title>
<!-- CSS Bootstrap -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- HTML5 shim y Respond.js se agregan para mejorar soporte a IE8 -->
<!-- NOTA: Respond.js no funciona si se ve la página localmente con file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- podemos usar la clase "container" (ancho fijo) o "container-fluid" (ancho completo) -->
<div class="container">
<table class="table">
<caption>Tabla con estilo básico</caption>
<colgroup>
<col>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th scope="col" colspan="2">Año</th>
<th scope="col">Título</th>
<th scope="col">Género</th>
<th scope="col" class="text-right">Presupuesto</th>
<th scope="col" class="text-right">Recaudación</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">2013-2015</td>
<td>2015</td>
<td>Furious 7</td>
<td>Acción</td>
<td class="text-right">$190,000,000</td>
<td class="text-right">$324,424,352</td>
</tr>
<tr>
<td>2014</td>
<td>American Sniper</td>
<td>Drama</td>
<td class="text-right">$58,000,000</td>
<td class="text-right">$348,417,536</td>
</tr>
<tr>
<td>2013</td>
<td>The Hunger Games: Catching Fire</td>
<td>Aventura</td>
<td class="text-right">$130,000,000</td>
<td class="text-right">$424,668,047</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Totales</td>
<td class="text-right">$928,000,000</td>
<td class="text-right">$2,516,805,599</td>
</tr>
</tfoot>
</table>
<table class="table table-striped">
<caption>Tabla "Cebra"</caption>
<colgroup>
<col>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th scope="col" colspan="2">Año</th>
<th scope="col">Título</th>
<th scope="col">Género</th>
<th scope="col" class="text-right">Presupuesto</th>
<th scope="col" class="text-right">Recaudación</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">2013-2015</td>
<td>2015</td>
<td>Furious 7</td>
<td>Acción</td>
<td class="text-right">$190,000,000</td>
<td class="text-right">$324,424,352</td>
</tr>
<tr>
<td>2014</td>
<td>American Sniper</td>
<td>Drama</td>
<td class="text-right">$58,000,000</td>
<td class="text-right">$348,417,536</td>
</tr>
<tr>
<td>2013</td>
<td>The Hunger Games: Catching Fire</td>
<td>Aventura</td>
<td class="text-right">$130,000,000</td>
<td class="text-right">$424,668,047</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Totales</td>
<td class="text-right">$928,000,000</td>
<td class="text-right">$2,516,805,599</td>
</tr>
</tfoot>
</table>
<table class="table table-bordered">
<caption>Tabla con borde</caption>
<colgroup>
<col>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th scope="col" colspan="2">Año</th>
<th scope="col">Título</th>
<th scope="col">Género</th>
<th scope="col" class="text-right">Presupuesto</th>
<th scope="col" class="text-right">Recaudación</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">2013-2015</td>
<td>2015</td>
<td>Furious 7</td>
<td>Acción</td>
<td class="text-right">$190,000,000</td>
<td class="text-right">$324,424,352</td>
</tr>
<tr>
<td>2014</td>
<td>American Sniper</td>
<td>Drama</td>
<td class="text-right">$58,000,000</td>
<td class="text-right">$348,417,536</td>
</tr>
<tr>
<td>2013</td>
<td>The Hunger Games: Catching Fire</td>
<td>Aventura</td>
<td class="text-right">$130,000,000</td>
<td class="text-right">$424,668,047</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Totales</td>
<td class="text-right">$928,000,000</td>
<td class="text-right">$2,516,805,599</td>
</tr>
</tfoot>
</table>
<table class="table table-hover">
<caption>Tabla con "hover"</caption>
<colgroup>
<col>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th scope="col" colspan="2">Año</th>
<th scope="col">Título</th>
<th scope="col">Género</th>
<th scope="col" class="text-right">Presupuesto</th>
<th scope="col" class="text-right">Recaudación</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">2013-2015</td>
<td>2015</td>
<td>Furious 7</td>
<td>Acción</td>
<td class="text-right">$190,000,000</td>
<td class="text-right">$324,424,352</td>
</tr>
<tr>
<td>2014</td>
<td>American Sniper</td>
<td>Drama</td>
<td class="text-right">$58,000,000</td>
<td class="text-right">$348,417,536</td>
</tr>
<tr>
<td>2013</td>
<td>The Hunger Games: Catching Fire</td>
<td>Aventura</td>
<td class="text-right">$130,000,000</td>
<td class="text-right">$424,668,047</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Totales</td>
<td class="text-right">$928,000,000</td>
<td class="text-right">$2,516,805,599</td>
</tr>
</tfoot>
</table>
<table class="table table-condensed">
<caption>Tabla condensada (se reduce el espacio entre el límite o borde y el contenido)</caption>
<colgroup>
<col>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th scope="col" colspan="2">Año</th>
<th scope="col">Título</th>
<th scope="col">Género</th>
<th scope="col" class="text-right">Presupuesto</th>
<th scope="col" class="text-right">Recaudación</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">2013-2015</td>
<td>2015</td>
<td>Furious 7</td>
<td>Acción</td>
<td class="text-right">$190,000,000</td>
<td class="text-right">$324,424,352</td>
</tr>
<tr>
<td>2014</td>
<td>American Sniper</td>
<td>Drama</td>
<td class="text-right">$58,000,000</td>
<td class="text-right">$348,417,536</td>
</tr>
<tr>
<td>2013</td>
<td>The Hunger Games: Catching Fire</td>
<td>Aventura</td>
<td class="text-right">$130,000,000</td>
<td class="text-right">$424,668,047</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Totales</td>
<td class="text-right">$928,000,000</td>
<td class="text-right">$2,516,805,599</td>
</tr>
</tfoot>
</table>
<table class="table">
<caption>Tabla con clases contextuales en filas y celdas</caption>
<colgroup>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>Clase CSS</th>
<th>Contenido</th>
</tr>
</thead>
<tbody>
<tr>
<td>&nbsp;</td>
<td>Fila Normal</td>
</tr>
<tr class="active">
<td>active</td>
<td>Fila activa</td>
</tr>
<tr class="success">
<td>success</td>
<td>Resultado exitoso</td>
</tr>
<tr class="info">
<td>info</td>
<td>Fila informativa</td>
</tr>
<tr class="warning">
<td>success</td>
<td>Fila con advertencia</td>
</tr>
<tr class="danger">
<td>success</td>
<td>Resultado negativo o peligroso</td>
</tr>
<tr>
<td class="success">success (sólo en celda izquierda)</td>
<td>Lorem ipsum dolor</td>
</tr>
<tr>
<td>info (sólo en celda derecha)</td>
<td class="info">Lorem ipsum dolor</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table">
<caption>Tabla sensible al dispositivo (dentro de un div con .table-responsive)</caption>
<thead>
<tr>
<th>#</th>
<th>Encabezado</th>
<th>Encabezado</th>
<th>Encabezado</th>
<th>Encabezado</th>
<th>Encabezado</th>
<th>Encabezado</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Celda de tabla</td>
<td>Celda de tabla</td>
<td>Celda de tabla</td>
<td>Celda de tabla</td>
<td>Celda de tabla</td>
<td>Celda de tabla</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Celda de tabla</td>
<td>Celda de tabla</td>
<td>Celda de tabla</td>
<td>Celda de tabla</td>
<td>Celda de tabla</td>
<td>Celda de tabla</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Celda de tabla</td>
<td>Celda de tabla</td>
<td>Celda de tabla</td>
<td>Celda de tabla</td>
<td>Celda de tabla</td>
<td>Celda de tabla</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- jQuery (necesario para utilizar plugins JS de Bootstrap) -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Acá utilizamos la versión precompilada y optimizada,
pero pueden incluirse otras versiones o componentes individuales -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Rating

Global

Ver video en playlist

comments powered by Disqus

Headshot of Juan Paredes

Juan Paredes

Ingeniero de Sistemas con amplia experiencia, especializado en el desarrollo y arquitectura de software.