Tablas compactas en Bootstrap

14/Ago/2015 Bootstrap Deja un comentario

Una de las utilidades que nos ofrece Bootstrap a la hora de manejar las tablas es poder crear tablas compactas. Las tablas compactas en Bootstrap son aquellas que ofrecen el contenido de una forma más agrupado. Por ello es bueno utilizar tablas compactas en Bootstrap cuando tengas micha información en la tabla y quieras aprovechar mejor el tamaño de la página.

Para ser concreto las tablas compactas en Bootstrap reducen el cell padding a la mitad. Es decir, el espacio entre el contenido y el borde que lo contiene.

A la hora de crear tablas compactas en Bootstrap lo primero será crear nuestra tabla mediante los elementos table, tr y td.

  1. <th>País</th>
  2. <th>Capital</th>
  3. <th>Superficie</th>
  4. <th>Habitantes</th>
  5. <th>Descripción</th>
  6. </tr>
  7. <td>España</td>
  8. <td>Madrid</td>
  9. <td>504.645 km<sup>2</sup></td>
  10. <td>46,6 M</td>
  11. </tr>
  12. ...
  13. </table>

Como segundo paso convertiremos la tabla en una tabla Bootstrap. Para ello añadimos la clase table como atributo class de la tabla.

  1. <table class="table">
  2. <th>País</th>
  3. <th>Capital</th>
  4. <th>Superficie</th>
  5. <th>Habitantes</th>
  6. <th>Descripción</th>
  7. </tr>
  8. <td>España</td>
  9. <td>Madrid</td>
  10. <td>504.645 km<sup>2</sup></td>
  11. <td>46,6 M</td>
  12. </tr>
  13. ...
  14. </table>

Si ahora queremos que la tabla se compacta lo que haremos será añadir la clase table-condensed a la ya existente table

  1. <table class="table table-condensed">
  2. <th>País</th>
  3. <th>Capital</th>
  4. <th>Superficie</th>
  5. <th>Habitantes</th>
  6. <th>Descripción</th>
  7. </tr>
  8. <td>España</td>
  9. <td>Madrid</td>
  10. <td>504.645 km<sup>2</sup></td>
  11. <td>46,6 M</td>
  12. </tr>
  13. ...
  14. </table>

Con esto ya habrás conseguido tener tablas compactas en Bootstrap. Veamos visualmente como queda el tener tablas compactas en Bootstrap contra tener tablas normales.

Tabla Bootstrap Normal

PaísCapitalSuperficieHabitantesDescripción
EspañaMadrid504.645 km246,6 MEspaña, también denominado Reino de España, es un país soberano, miembro de la Unión Europea, constituido en Estado social y democrático de derecho y cuya forma de gobierno es la monarquía parlamentaria. Su territorio está organizado en diecisiete comunidades autónomas y dos ciudades autónomas, además de cincuenta provincias. Su capital es la villa de Madrid.
ItaliaRoma301.338 km260,7 MItalia, oficialmente la República Italiana (en italiano: Repubblica Italiana), es un país soberano miembro de la Unión Europea. Es un país bicontinental; su territorio está en Europa del Sur y en el norte de África; su territorio europeo (99,97%) lo conforma la península itálica, el valle del Po y dos grandes islas en el mar Mediterráneo: Sicilia y Cerdeña; el territorio africano (0.03%) lo conforman las islas de Lampedusa, Lampione y Pantelaria.
FranciaParís675.417 km266 MFrancia, oficialmente República Francesa, es un país soberano, miembro de la Unión Europea, constituido en Estado social y democrático de derecho y cuya forma de gobierno es la república semipresidencialista. Su territorio, con capital en París, se extiende sobre una superficie total de 675 417 km² y el 1 de enero de 2015 contaba con 66.3 millones de habitantes, 64.2 millones en la Francia metropolitana y 2.1 millones en los cinco departamentos de ultramar.
GreciaAtenas131.990 km210,7 MGrecia, oficialmente República Helénica, es un país soberano, miembro de la Unión Europea. En el país viven alrededor de once millones de habitantes que conforman una sociedad muy homogénea, donde la mayoría habla el idioma griego y practica el cristianismo ortodoxo. Atenas, la capital, es la ciudad más poblada del país. Otras ciudades como Salónica, El Pireo, Patras, Heraclión y Lárisa, son centros políticos, económicos y culturales a nivel regional.
AlemaniaBerlin357.168 km281,2 MAlemania, oficialmente la República Federal de Alemania, es un país soberano centroeuropeo y miembro de la Unión Europea; se organiza como una república parlamentaria federal y su capital es Berlín. Su territorio, formado por dieciséis Bundesländer, limita al norte con el mar del Norte, Dinamarca y el mar Báltico; al este con Polonia y la República Checa; al sur con Austria y Suiza, y al oeste con Francia, Luxemburgo, Bélgica y los Países Bajos.

Tabla Bootstrap Compacta

PaísCapitalSuperficieHabitantesDescripción
EspañaMadrid504.645 km246,6 MEspaña, también denominado Reino de España, es un país soberano, miembro de la Unión Europea, constituido en Estado social y democrático de derecho y cuya forma de gobierno es la monarquía parlamentaria. Su territorio está organizado en diecisiete comunidades autónomas y dos ciudades autónomas, además de cincuenta provincias. Su capital es la villa de Madrid.
ItaliaRoma301.338 km260,7 MItalia, oficialmente la República Italiana (en italiano: Repubblica Italiana), es un país soberano miembro de la Unión Europea. Es un país bicontinental; su territorio está en Europa del Sur y en el norte de África; su territorio europeo (99,97%) lo conforma la península itálica, el valle del Po y dos grandes islas en el mar Mediterráneo: Sicilia y Cerdeña; el territorio africano (0.03%) lo conforman las islas de Lampedusa, Lampione y Pantelaria.
FranciaParís675.417 km266 MFrancia, oficialmente República Francesa, es un país soberano, miembro de la Unión Europea, constituido en Estado social y democrático de derecho y cuya forma de gobierno es la república semipresidencialista. Su territorio, con capital en París, se extiende sobre una superficie total de 675 417 km² y el 1 de enero de 2015 contaba con 66.3 millones de habitantes, 64.2 millones en la Francia metropolitana y 2.1 millones en los cinco departamentos de ultramar.
GreciaAtenas131.990 km210,7 MGrecia, oficialmente República Helénica, es un país soberano, miembro de la Unión Europea. En el país viven alrededor de once millones de habitantes que conforman una sociedad muy homogénea, donde la mayoría habla el idioma griego y practica el cristianismo ortodoxo. Atenas, la capital, es la ciudad más poblada del país. Otras ciudades como Salónica, El Pireo, Patras, Heraclión y Lárisa, son centros políticos, económicos y culturales a nivel regional.
AlemaniaBerlin357.168 km281,2 MAlemania, oficialmente la República Federal de Alemania, es un país soberano centroeuropeo y miembro de la Unión Europea; se organiza como una república parlamentaria federal y su capital es Berlín. Su territorio, formado por dieciséis Bundesländer, limita al norte con el mar del Norte, Dinamarca y el mar Báltico; al este con Polonia y la República Checa; al sur con Austria y Suiza, y al oeste con Francia, Luxemburgo, Bélgica y los Países Bajos.

Y es que una imagen vale más que mil palabras.

Vídeos sobre Bootstrap


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*