Portada » HTML5 Demostración y Ejemplos » Tabla responsiva Bootstrap para lista de datos

Tabla responsiva Bootstrap para lista de datos

Tabla responsiva Bootstrap para lista de datos. En los últimos años las tablas HTML perdieron presencia en el desarrollo de páginas web. Sin embargo, en su lugar se utilizan DIV y/o etiquetas HTML5.

En el mundo de las aplicaciones web son muy utilizado para mostrar datos de MySQL. Por lo tanto, la tabla HTML todavía está vigente y se utiliza para mostrar datos en filas y columnas.

Ahora, para que una tabla tenga una buena interfaz de usuario es recomendable utilizar Bootstrap para que sea responsiva (Adaptable en diferentes resoluciones de pantalla), Con esta librería gratuita usted puede crear fácilmente un diseño de tabla responsiva en minutos. Sin embargo para que se aplique solo basta añadir una clase al inicio de la tabla.

<table class="table table-responsive">

Los recursos a utilizar son librerías que debemos agregar en la cabecera de nuestro archivo HTML. En este artículo, le veremos cómo crear una tabla adaptable con bootstrap.

Tabla responsiva Bootstrap para lista de datos

Le mostraremos unos modelos para aplicar estos estilos. La librería bootstrap y jQuery deben agregarse obligatoriamente para utilizar el Framework bootstrap.

Ejemplo de aplicación de este Framework

<!DOCTYPE html>
<html>
<head>
<title>Tabla Bootstrap responsiva para lista de datos</title>
<!-- Declaración de las librerias externas -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

Tabla responsiva bootstrap básica

Utilice la clase Table para agregar el estilo básico a la tabla HTML. La clase «tabla-responsive» hace la tabla responsiva.

Mostrando el código completo con sus respectivas.

<!DOCTYPE html>
<html>
<head>
<title>Tabla Bootstrap responsiva para lista de datos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <h2>Bootstrap Responsiva Tabla (Basic)</h2> 
<!-- Inicio de tabla responsive-->
    <table class="table table-responsive">
        <thead>
            <tr>
                <th>Nombres</th>
                <th>Apellidos</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Juan Carlos</td>
                <td>Flores</td>
                <td>JuanCarlos@midominio.com</td>
            </tr>
            <tr>
                <td>Juan</td>
                <td>Jorge</td>
                <td>Juan@midominio.com</td>
            </tr>
            <tr>
                <td>Maria</td>
                <td>Carlos</td>
                <td>Maria@midominio.com</td>
            </tr>
        </tbody>
    </table>
    
    <h2>Bootstrap Responsive Tabla (Striped)</h2> 
    <table class="table table-striped table-responsive">
        <thead>
            <tr>
                <th>Nombres</th>
                <th>Apellidos</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Juan Carlos</td>
                <td>Flores</td>
                <td>JuanCarlos@midominio.com</td>
            </tr>
            <tr>
                <td>Juan</td>
                <td>Jorge</td>
                <td>Juan@midominio.com</td>
            </tr>
            <tr>
                <td>Maria</td>
                <td>Carlos</td>
                <td>Maria@midominio.com</td>
            </tr>
        </tbody>
    </table>
    
    <h2>Bootstrap Responsiva Tabla (Hover)</h2> 
    <table class="table table-hover table-responsive">
        <thead>
            <tr>
                <th>Nombres</th>
                <th>Apellidos</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Juan Carlos</td>
                <td>Flores</td>
                <td>JuanCarlos@midominio.com</td>
            </tr>
            <tr>
                <td>Juan</td>
                <td>Jorge</td>
                <td>Juan@midominio.com</td>
            </tr>
            <tr>
                <td>Maria</td>
                <td>Carlos</td>
                <td>Maria@midominio.com</td>
            </tr>
        </tbody>
    </table>
    
    <h2>Bootstrap Responsiva Tabla (Bordered)</h2> 
    <table class="table table-bordered table-responsive">
        <thead>
            <tr>
                <th>Nombres</th>
                <th>Apellidos</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Juan Carlos</td>
                <td>Flores</td>
                <td>JuanCarlos@midominio.com</td>
            </tr>
            <tr>
                <td>Juan</td>
                <td>Jorge</td>
                <td>Juan@midominio.com</td>
            </tr>
            <tr>
                <td>Maria</td>
                <td>Carlos</td>
                <td>Maria@midominio.com</td>
            </tr>
        </tbody>
    </table>
</div>

</body>
</html>

Espero que esta corta explicación les sirva en abundancia y no se olviden cualquier duda que tengan no duden en consultar en los comentarios.

Tabla responsiva Bootstrap para lista de datos
Tabla responsiva Bootstrap para lista de datos

Descargar código fuente:

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja un comentario

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

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad