Saltar al contenido

ejemplo de código de tabla bootstrap 3.4.1

Luego de de esta extensa búsqueda de información hemos podido resolver este asunto que tienen muchos los usuarios. Te regalamos la solución y esperamos resultarte de mucha apoyo.

Ejemplo 1: tabla bootstrap 4

<tableclass="table table-bordered"><thead><tr><thscope="col">#th><thscope="col">Firstth><thscope="col">Lastth><thscope="col">Handleth>tr>thead><tbody><tr><thscope="row">1th><td>Marktd><td>Ottotd><td>@mdotd>tr><tr><thscope="row">2th><td>Jacobtd><td>Thorntontd><td>@fattd>tr><tr><thscope="row">3th><tdcolspan="2">Larry the Birdtd><td>@twittertd>tr>tbody>table>

Ejemplo 2: tabla bootstrap 3

Bootstrap Basic Table
A basic Bootstrap table has a light padding and only horizontal dividers.

The .table class adds basic styling to a table
------------------------------------------------------------
Striped Rows
The .table-striped class adds zebra-stripes to a table

Bordered Table
The .table-bordered class adds borders on all sides of the table and cells
------------------------------------------------------------
Hover Rows
The .table-hover class adds a hover effect (grey background color) on table rows
------------------------------------------------------------
Condensed Table
The .table-condensed class makes a table more compact by cutting cell padding in half
------------------------------------------------------------
Contextual Classes
Contextual classes can be used to color table rows (<tr>) or table cells (<td>)

The contextual classes that can be used are:

Class		Description
.active		Applies the hover color to the table row or table cell
.success	Indicates a successful or positive action
.info		Indicates a neutral informative change or action
.warning	Indicates a warning that might need attention
.danger		Indicates a dangerous or potentially negative action
------------------------------------------------------------
Responsive Tables
The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference

Sample code

DOCTYPEhtml><htmllang="en"><head><title>Bootstrap Exampletitle><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">script>head><body><divclass="container"><h2>Bootstrap Table Exampleh2><tableclass="table -----------">  // try by adding different table class at this place => ("-----------")
    <thead><tr><th>Idth><th>Nameth><th>Ageth>tr>thead><tbody><tr><td>1td><td>Ramtd><td>10td>tr><tr><td>2td><td>Shyamtd><td>12td>tr><tr><td>3td><td>Rameshtd><td>13td>tr><tr><td>4td><td>Sureshtd><td>11td>tr>tbody>table>div>body>html>

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

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