Så här gör du snyggare tabeller

Ibland blir det tydligast att använda tabeller för ditt innehåll. Med lite enkel och grundläggande HTML, kan du anpassa dina tabeller, så att det blir tydligare och snyggare. De kommer även att anpassas till olika enheter och visas på ett bra vis.

Den här guiden gäller enbart dig som har en responsiv design med Bootstrap.

Dialogen

Dialogen


Grundexempel

  • Börja med att skapa en tabell via editorn, ange enbart antal kolumner och rader.
  • Klicka på Infoga.
  • Därefter klickar du på knappen HTML i editorn.
  • I HTML-taggen <table> lägger du till en klass; class="table" som i exemplet nedan.
#FörnamnEfternamnAnvändarnamn
1 Nisse Huldt @mdo
2 Stina Svensson @fat
3 Bosse Johansson @twitter
<table class="table">
  ...
</table>

Fullt responsiva tabeller

Om du bara har ett fåtal kolumner med lite innehåll, kommer exemplet ovan att vara responsivt. Men om du har många kolumner och mycket innehåll, behöver du omge tabellen med en <div>. Det gör att tabellen kan scrollas i sidled på enheter med lägre upplösning, mindre än 768 pixlars bredd.

#Table headingTable headingTable headingTable headingTable headingTable heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Markerade rader

Använd .table-striped för att göra varannan rad markerad.

#FörnamnEfternamnAnvändarnamn
1 Nisse Huldt @mdo
2 Stina Svensson @fat
3 Bosse Johansson @twitter
<table class="table table-striped">
  ...
</table>

Avgränsad tabell

Använd .table-bordered för att få kantlinjer runtom på alla celler.

#FörnamnEfternamnAnvändarnamn
1 Nisse Huldt @mdo
2 Stina Svensson @fat
3 Bosse Johansson @twitter
<table class="table table-bordered">
  ...
</table>

Mouseover på rader

Använd .table-hover för att byta färg på en rad vid mouseover.

#FörnamnEfternamnAnvändarnamn
1 Nisse Huldt @mdo
2 Stina Svensson @fat
3 Bosse Johansson @twitter
<table class="table table-hover">
  ...
</table>

Komprimerad tabell

Använd .table-condensed för att göra en mer kompakt tabell med mindre marginaler

#FörnamnEfternamnAnvändarnamn
1 Nisse Huldt @mdo
2 Stina Svensson @fat
3 Bosse Johansson @twitter
<table class="table table-condensed">
  ...
</table>

Kontextuella klasser

Använd kontextuella klasser för att färglägga tabellrader eller enskilda celler.

ClassFärgBeskrivning
.active Grå Applies the hover color to a particular row or cell
.success Grön Indicates a successful or positive action
.info Blå Indicates a neutral informative change or action
.warning Gul Indicates a warning that might need attention
.danger Röd Indicates a dangerous or potentially negative action

Exempel

#Column headingColumn headingColumn heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

Behöver du hjälp eller vill du beställa kundspecifika format och klasser? Kontakta oss så hjälper vi dig.

Kontakta oss


Denna artikel har visats 3691 gånger.

Förbättra din närvaro på nätet
Ja tack, jag vill gärna få nyheter, tips och bra erbjudanden direkt till min e-postadress.

Anmäl dig till vårt nyhetsbrev
Vi skickar ut cirka 10 nyhetsbrev per år