Tablas en bootstrap 4

Se puede trabajar con tablas en bootsrap 4 de manera muy sencilla utilizando sus clases.

  • table: se coloca en la etiqueta table, introduce los estilos básicos de la tabla en bootstrap, separando las columnas, introduciendo un borde debajo de cada fila… es la clase básica.
  • table-striped: se coloca en la etiqueta table, marca las líneas de la tabla de forma atigrada.
  • table-bordered: se coloca en la etiqueta table, hace que cada celda tenga su borde
  • table-hover: se coloca en la etiqueta table, hace que se sombree la linea en la que se coloca el ratón
  • table-[color]: se pueden utilizar los colores de boostrap para crear las tablas con los colores mucho mas personalizadas. Se puede utilizar en la etiqueta table o en cualquier otra parte dela tabla según donde queramos que afecte
  • table-sm: se coloca en la etiqueta table y hace que la tabla este un poco mas cerrada, con menos espacios en blanco.
  • table-responsive-[tamaño]: se coloca en la etiqueta table y hace que la tabla sea responsive (elástica) a partir de ese tamaño y antes esté estática

Aquí tenemos una tabla ya lista para que podáis hacer las pruebas y jugar con ella.

<table class="table table-responsive-md">
	<tr>
		<td>colum1</td>
		<td>colum2</td>
		<td>colum3</td>
		<td>colum4</td>
		<td>colum5</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
	</tr>
</table>