Bootstrap: tablas responsive e imágenes

Iñigo Mezo Alvarez

hace 6 años

Vamos a ver cómo podemos obtener unos diseños responsive de tablas e imágenes muy interesantes con un poco de código fuente y Bootstrap.

TABLAS CON BOOTSTRAP

En primer lugar hay que repasar los componentes básicos de una tabla:

table: Es la etiqueta que engloba la tabla.
tr: hace referencia a las filas.
td: hace referencia a las columnas dentro de cada fila.
th: son las filas dentro de la columna de cabecera.

<table class="table">
<tr>
	<th>Celda 1</th>
	<th>Celda 2</th>
	<th>Celda 3</th>
	<th>Celda 4</th>
	<th>Celda 5</th>
</tr>
<tr>
	<td>Celda 1</td>
	<td>Celda 2</td>
	<td>Celda 3</td>
	<td>Celda 4</td>
	<td>Celda 5</td>
</tr>
<tr>
	<td>Celda 1</td>
	<td>Celda 2</td>
	<td>Celda 3</td>
	<td>Celda 4</td>
	<td>Celda 5</td>
</tr>
</table>

Simplemente por añadir la etiqueta class=»table», Bootstrap añade diseño a la tabla. La cabecera está en negrita y la tabla ocupa el 100% del bloque en el que esta introducida.

Si añadimos a esa clase class=»table table-striped» la tabla mostrara las filas impares y pares en colores diferentes.

Otra clase interesante es table-bordered que añade un borde a la misma. Y table-hover añade el efecto de aclarar la fila cuando se pasa el ratón por encima.

Si lo que queremos es que la la tabla sea de color más oscuro se puede añadir table-dark a la etiqueta table.

Si el espacio de las celdas te resultan demasiado grandes se pueden reducir con: table-sm.

Y otra etiqueta importante es: table-responsive. Hace que la tabla sea responsive, pudiendo desplazarnos en la tabla con el dedo o con el ratón siempre y cuando la tabla sea más grande que el tamaño de la pantalla del dispositivo. Si queremos decidir en qué tamaño puede ser responsive una tabla y aparecer la barra de navegación podemos usar las etiquetas: table-responsive-sm (<576px), table-responsive-md (<768px), table-responsive-lg (<992px), table-responsive-xl (<1200 px).

<div class="table-responsive">
<table class="table table-responsive table-sm table-dark table-striped table-bordered table-hover">
	<tr>
		<th>Celda 1</th>
		<th>Celda 2</th>
		<th>Celda 3</th>
		<th>Celda 4</th>
		<th>Celda 5</th>
	</tr>
	<tr>
		<td>Celda 1</td>
		<td>Celda 2</td>
		<td>Celda 3</td>
		<td>Celda 4</td>
		<td>Celda 5</td>
	</tr>
	<tr>
		<td>Celda 1</td>
		<td>Celda 2</td>
		<td>Celda 3</td>
		<td>Celda 4</td>
		<td>Celda 5</td>
	</tr>		
	<tr>
		<td>Celda 1</td>
		<td>Celda 2</td>
		<td>Celda 3</td>
		<td>Celda 4</td>
		<td>Celda 5</td>
	</tr>
	<tr>
		<td>Celda 1</td>
		<td>Celda 2</td>
		<td>Celda 3</td>
		<td>Celda 4</td>
		<td>Celda 5</td>
	</tr>		
</table>
</div>

También es posible añadir colores a las filas o columnas usando: .table-success, .table-danger, .table-info, .table-warning, .table-active, .table-secondary, .table-light, .table-dark.

<tr class="table-success">
	<td>Celda 1</td>
	<td>Celda 2</td>
	<td>Celda 3</td>
	<td>Celda 4</td>
	<td>Celda 5</td>
</tr>
<tr>
	<td class="table-success">Celda 1</td>
	<td class="table-warning">Celda 2</td>
	<td class="table-danger">Celda 3</td>
	<td>Celda 4</td>
	<td>Celda 5</td>
</tr>

IMÁGENES CON BOOTSTRAP

Tenemos disponibles unas cuantas etiquetas que nos permiten añadir vistosidad a las imágenes de forma rápida y con poco código fuente.

Redondear esquinas: rounded.
Forma circular: rounded-circle.
Miniatura: img-thumbnail.

Otras etiquetas muy útiles son las de alineación como: float-left ó float-right. O img-fluid que hace que la imagen ser responsive.

<img src="1.jpg" class="rounded img-fluid" alt="Ejemplo">
<img src="1.jpg" class="rounded-circle float-right img-fluid" alt="Ejemplo" >
<img src="1.jpg" class="img-thumbnail img-fluid" alt="Ejemplo">