Bootstrap (Parte 5): Tablas

Redes sociales

Logo Bootstrap

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 Email
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 Email
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 Email
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>
Redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.