En este artículo aprenderás a trabajar con tablas utilizando Bootstrap.
Para crear tablas, de forma básica, hay que añadir la clase .table a cualquier tabla. Esto puede parece redundante, pero hay que tener en cuenta que las tablas también se utilizan para otros propósitos como calendarios o selectores de fechas. Por consiguiente, es necesaria una clase específica para la creación de tablas básicas.
Una tabla en Bootstrap dispone de márgenes interiores y sólo muestra líneas de división horizontales.
A continuación, puedes ver un ejemplo, de una tabla Bootstrap que utiliza la clase .table:
| Nombre | Apellido | |
|---|---|---|
| Juan | Nadie | juan@ejemplo.es |
| María | Alguien | maria@ejemplo.es |
| Julio | Siempre | julio@ejemplo.es |
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo tabla Bootstrap - Webdisenia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Ejemplo de tabla</h2>
<p>La clase .table añade un estilo básico (márgenes interiores y línea de separación horizontal)a una tabla:</p>
<table class="table">
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>Nadie</td>
<td>juan@ejemplo.es</td>
</tr>
<tr>
<td>María</td>
<td>Alguien</td>
<td>maria@ejemplo.es</td>
</tr>
<tr>
<td>Julio</td>
<td>Siempre</td>
<td>julio@ejemplo.es</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Filas sombreadas
La clase .table-striped añade un color de fondo gris, de forma alternativa, a las filas de una tabla, obteniendo un efecto “cebra” que facilita la lectura. A continuación, puedes ver un ejemplo:
| Nombre | Apellido | |
|---|---|---|
| Juan | Nadie | juan@ejemplo.es |
| María | Alguien | maria@ejemplo.es |
| Julio | Siempre | julio@ejemplo.es |
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo tabla Bootstrap - Webdisenia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Tabla estilo cebra</h2>
<p>La clase .table-striped añade un efecto "cebra" a las filas de la tabla:</p>
<table class="table table-striped">
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>Nadie</td>
<td>juan@ejemplo.es</td>
</tr>
<tr>
<td>María</td>
<td>Alguien</td>
<td>maria@ejemplo.es</td>
</tr>
<tr>
<td>Julio</td>
<td>Siempre</td>
<td>julio@ejemplo.es</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Añadir bordes exteriores a una tabla
Puedes añadir bordes exteriores a una tabla, utilizando la clase .table-borders:
| Nombre | Apellido | |
|---|---|---|
| Juan | Nadie | juan@ejemplo.es |
| María | Alguien | maria@ejemplo.es |
| Julio | Siempre | julio@ejemplo.es |
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo tabla Bootstrap - Webdisenia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Tabla con bordes visibles</h2>
<p>The clase .table-bordered añade bordes visibles a una tabla:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>Nadie</td>
<td>juan@ejemplo.es</td>
</tr>
<tr>
<td>María</td>
<td>Alguien</td>
<td>maria@ejemplo.es</td>
</tr>
<tr>
<td>Julio</td>
<td>Siempre</td>
<td>julio@ejemplo.es</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Filas flotantes
Utilizando la clase .table-hover se seleccionará de forma automática la fila por la que pases el cursor:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo tabla Bootstrap - Webdisenia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Filas flotantes</h2>
<p>La clase .table-hover hace que se seleccione la fila en la que se encuentra el cursor:</p>
<table class="table table-hover">
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>Nadie</td>
<td>juan@ejemplo.es</td>
</tr>
<tr>
<td>María</td>
<td>Alguien</td>
<td>maria@ejemplo.es</td>
</tr>
<tr>
<td>Julio</td>
<td>Siempre</td>
<td>julio@ejemplo.es</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Tablas compactas
Utilizando la clase .table-condensed harás la tabla más compacta, ya que se elimina el espaciado vertical entre celdas:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo tabla Bootstrap - Webdisenia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Tablas compactas</h2>
<p>La clase .table-condensed construye tablas mas compactas al eliminar el espaciado vertical:</p>
<table class="table table-condensed">
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>Nadie</td>
<td>juan@ejemplo.es</td>
</tr>
<tr>
<td>María</td>
<td>Alguien</td>
<td>maria@ejemplo.es</td>
</tr>
<tr>
<td>Julio</td>
<td>Siempre</td>
<td>julio@ejemplo.es</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Clases contextuales
Puedes utilizar las clases contextuales para añadir color a las filas <tr> o las celdas <td> de las tablas. Las clases que puedes utilizar son: .active, .success, .info, .warning, y .danger.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo tabla Bootstrap - Webdisenia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Clases contextuales</h2>
<p>Las clases contextuales, se utilizan para dar color de fondo a la filas o celdas de una tabla.<br/>
Las clases que pueden utilizarse son: .active, .success, .info, .warning, y .danger.</p>
<table class="table">
<thead>
<tr>
<th>Clase</th>
<th>Descripción</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>.active</td>
<td>Indica que una acción se encuentra lista o activa.</td>
</tr>
<tr class="success">
<td>.success</td>
<td>Indica que el resultado de una acción es exitosa o positiva.</td>
</tr>
<tr class="info">
<td>.info</td>
<td>Indica una acción informativa.</td>
</tr>
<tr class="warning">
<td>.warning</td>
<td>Indica una advertencia sobre algo que puede requrir tu atención.</td>
</tr>
<tr class="danger">
<td>.danger</td>
<td>Indica una acción potencialmente peligrosa o negativa.</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Tablas responsivas o adaptables
Si deseas crear una tabla responsiva o adaptable necesitarás utilizar la clase .table-responsive. Esta clase hace, que en dispositivos pequeños (menores de 768px), se muestre una barra de desplazamiento horizontal, bajo la tabla, para ver el contenido completo de misma.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Tabla responsiva o adaptable</h2>
<p>La clase .table-responsive class crea una tabla responsiva o adaptable que,<br/>
en dispositivos pequeños (menos de 768px) muestra una barra de desplazamiento horizontal.</p>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Nº</th>
<th>Frase</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Te pasas la vida esperando que pase algo y lo único que pasa la vida.</td>
</tr>
<tr>
<td>2</td>
<td>Te pasas la vida esperando que pase algo y lo único que pasa la vida.</td>
</tr>
<tr>
<td>3</td>
<td>Te pasas la vida esperando que pase algo y lo único que pasa la vida.</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
