Hur skapar jag Bootstrap 5 -tabeller?

Bootstrap gör det möjligt att skapa vackra tabeller med hjälp av CSS -ramverket. Version 4 har några nya klasser för att vända bordets färg och göra bordet lyhörd. Du kan enkelt olika typer av tabeller med den senaste versionen 5 också. I denna handledning kommer vi att diskutera olika möjligheter att skapa tabeller med Bootstrap 5. Du kan ladda ner filerna som används i den här självstudien här.

taggar. I vårt exempel, låt oss skapa enkla markblad i ett tabellformat med fyra elevnamn (i rader) och fem ämnen med genomsnittlig procentandel (i kolumner). Nedan finns koden för standard Bootstrap -tabell.

Som standard är den enda CSS -klassen som krävs för att skapa en Bootstrap -tabell klassen "tabell" som tillämpas direkt på HTML -tabellelementet. Du behöver inte skapa en

tag för att infoga tabeller i Bootstrap. Standardtaggen ger följande resultat:

Invertera tabellfärgerna

Bootstrap 4 låter dig vända färgen på ditt bord genom att lägga till "tabellinvers" till

märka. Det kommer att vända bakgrunden till mörk och texten till ljusa färger. Koden ska se ut nedan:

<table class="table table-inverse">
All content remains same here similar to default table.
<table>

Inversbordet kommer att ha en mycket mörk och attraktiv bakgrund enligt nedan:

Invers Header Table

I tidigare fall tillämpades "tabellinvers" -klassen på hela tabellen. Bootstrap 4 gör det också möjligt att bara invertera rubrikens bakgrund och textfärger. För att invertera rubriken lägger du bara till "thead-inverse" -klassen till

märka.

<table class="table">
<thead class="thead-inverse">
</thead>
</table>

Och vårt märkblad kommer att ha en svart rubrikrad som nedan:

Det är inte allt!!! Det finns många fler alternativ med Bootstrap. Låt oss skapa några fler varianter.

Randig Bootstrap 4 Bord

Randigt bord låter dig skapa alternativa färger för raderna. Lägg bara till "tabellrandig" i den befintliga "tabell" -klassen "så kommer bordet att få mönster. Den ljusgrå bakgrundsfärgen tillämpas på alla udda numrerade rader från den första raden.

<table class="table table-striped">
</table>

Randigt bord är mest föredraget för att skilja raderna och visa innehållet för besökare.

Bootstrap kantad tabell

Den här lägger enkelt till gränsen till standardtabellen. Vad du behöver är att lägga till "tabellgränsad" klass till den befintliga "tabell" -klassen.

<table class="table table-bordered">
</table>

Vårt märkblad med kant bör se ut nedan:

Du kan också enkelt skapa det kantade bordet med ränder på rader.

<table class="table table-striped table-bordered">
</table>

Tabell med Hover -effekter på rader

Vad sägs om att lägga till sväveffekter till ditt bord? Klassen "bordsvävare" kommer att göra det åt dig. För musen över bordet för att se motsvarande rad markeras med ljusgrå bakgrundsfärg.

<table class="table table-hover">
</table>

Nedan ser du hur ditt bord ska se ut när du flyttar musen på andra raden.

Responsiv Bootstrap -tabell för mindre än 768 pixelenheter

Att skapa en responsiv tabell i Bootstrap 4 är väldigt enkelt. Du behöver inte lägga till ytterligare

för att lägga till lyhördhet. Lägg bara in "tabellresponsiv" klass, en horisontell rullningslist läggs till automatiskt i tabellen när den visas i webbläsaren under 768 pixlar skärmstorlek.

<table class="table table-responsive">
</table>

Så här kommer vårt responsiva bord att se ut. Kom ihåg att den horisontella rullningsfältet bara visas när tabellen visas med en skärmstorlek som är mindre än 768 pixlar. Annars hittar du ingen skillnad jämfört med vanligt Bootstrap -bord.

Bootstrap -bord med komprimerad text

Ibland är det nödvändigt att komprimera höjden på bordet för att minska det upptagna utrymmet. Bootstrap tillåter detta genom att lägga till "tabell-sm" -klassen till en befintlig "tabell" -klass enligt nedan:

<table class="table table-sm">
</table>

Detta kommer att ta bort vadderingen och göra bordets höjd kompakt.

Skapa Bootstrap -bord med bakgrundsfärg

Från och med nu är det vi har diskuterat att skapa ett enkelt bord eller ha standard ljusgrå bakgrund för rader. Bootstrap gör det också möjligt att färga dina bordceller och rader för att göra det vackert. Du kan markera alla rader eller celler i ditt bord i fem olika färger. Det finns två uppsättningar CSS -klasser som hjälper dig att lägga till bakgrundsfärger – en är kontextuella klasser och en annan är bakgrundsverktygsklasser. Tabellen nedan förklarar olika tillgängliga alternativ:

Kom ihåg att dessa klasser kan tillämpas på enskilda rader och celler i Bootstrap -tabellen i valfri kombination.

Färgade rader med kontextuella klasser

Låt oss tillämpa de kontextuella klasserna på vårt märkblad för att se dem i handling. Koden nedan gäller "tabellaktiv" klass på första raden i tabellen för att ändra bakgrundsfärgen till ljusgrå.

<table class="table">
<tr class="table-active">
<td>Thomas</td>
<td>80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td>79</td>
</tr> <tr>
</table>

Nedan ser du hur hela tabellen kommer att se ut när du tillämpar klasserna "bordssuccé", "tabellvarning" och "tabellfara" på andra, tredje och fjärde

element i bordet.

Färgade rader med bakgrundsfärger

I likhet med tabellkontextuella klasser kan du använda bakgrundsfärger på rader med bakgrundskontextklasser.

<table class="table">
<tr class="bg-success">
<td>Thomas</td>
<td>80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td>79</td>
</tr> <tr>
</table>

Nedan visas en iögonfallande tabell med "bg-framgång", "bg-fara", "bg-varning", "bg-info" och andra bakgrundsverktygsklasser som tillämpas på raderna.

Färgade celler med kontextuella klasser

Varje cell i en Bootstrap -tabell kan tillämpas med en av de kontextuella klasserna för att markera den från andra celler. Detta kommer att vara väldigt användbart när du har ett större bord och bara vill markera några få celler. Koden nedan visar tillämpningen av den "tabellaktiva" kontextuella klassen på en tabellcell.

<table class="table">
<tr>
<td>Thomas</td>
<td class="table-active">80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td>79</td>
</tr> <tr>
</table>

Tabellen nedan har fyra celler applicerade med olika bakgrundsfärger slumpmässigt.

Färgade rader och celler med bakgrundsfärger och kontextuella klasser

Slutligen kan du tillämpa tabellkontextuell klass och bakgrundskontextklass i valfri kombination för att göra olika bakgrundsfärger för rader och celler.

<table class="table">
<tr class="table-active">
<td>Thomas</td>
<td class="table-info">80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td class="bg-success">79</td>
</tr> <tr>
</table>

Så här kommer exempel tabellen att se ut med olika färger applicerade för rader och celler.

Lär dig Bootstrap 5 (Index )