HTML5 Demostración y Ejemplos

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:

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Deja una respuesta

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

Botón volver arriba