---
title: "Tabelstijlen aanpassen"
slug: "table-style"
description: "Style the tables using CSS Snippets in Document360.  In addition to the default snippet provided, you can add custom CSS styling to your table."
updated: 2026-06-22T09:03:17Z
published: 2026-06-22T09:03:17Z
canonical: "docs.document360.com/table-style"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tabelstijlen aanpassen

Het **Change table styles CSS-fragment** laat je consistente styling toepassen op alle tabellen in je kennisbank - inclusief randen, padding, header-achtergrondkleur en afwisselende rijkleuren. Standaard gebruiken tabellen in Document360 een minimale stijl met basisranden. Dit fragment geeft je een kant-en-klaar startpunt dat je kunt aanpassen om bij je merk te passen.

---

## Hoe pas je het table styles snippet toe

1. Navigeer naar  () > **Knowledge base site** in de linker navigatiebalk van het Knowledge Base-portaal.
2. Navigeer in het linker navigatiepaneel naar **Site-aanpassing**.

![Site customization page showing the Custom CSS and JavaScript option](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1770889881735.png)

1. Klik **op Custom CSS & JavaScript**.
2. Selecteer het **tabblad CSS** en klik rechtsboven **op Add code snippets** .
3. Klik **op Tabelstijlen wijzigen**. Het fragment wordt in de CSS-editor geplaatst.

![CSS editor showing the Change table styles snippet inserted with border, padding, and background color values](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1770890032229.png)

1. Pas de kleurwaarden, randbreedtes en opvullingswaarden aan om aan je wensen te voldoen.
2. Klik **op Ctrl + S** of **sla op**.

---

## Hoe voeg je aangepaste tabellen toe CSS

Je kunt ook je eigen table CSS schrijven in plaats van het vooraf geladen snippet te gebruiken. Bijvoorbeeld:

```
table th, table td {
  border: 1px solid #67cfbf;
  padding: 2px 10px;
}
table th {
  background: #fcf8c0;
  font-weight: 600;
}
table th:empty {
  display: none;
}
tbody tr:nth-child(odd) {
  background-color: #f2f2f2;
}
```

![Table displaying employee names, departments, and years of experience in a release note.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/custom%20code%20table%20preview.png)

---

## Best practices

- **Gebruik afwisselende rijkleuren voor leesbaarheid** - de `nth-child(odd)` regel past een achtergrondkleur toe op afwisselende rijen, waardoor brede tabellen makkelijker te scannen zijn over rijen.
- **Houd randkleuren subtiel** - een lichte randkleur (bijv. `#e0e0e0`) is meestal minder visueel ruiserig dan een sterke kleur, vooral voor tabellen met veel kolommen.
- **Test met zowel sparse- als dense-tabellen** – je opvulling en lettergrootte kunnen er prima uitzien in een kleine tabel, maar veroorzaken uitlijningsproblemen in een tabel met veel kolommen of lange celinhoud.

---

## FAQ

**Hoe verwijder ik tafelranden of rasters?**

Navigeer naar {{variable. Instellingen}} () > {{variabel. Kennisbanksite}} > **Site-aanpassing** > **Aangepaste CSS & JavaScript**. Plak in het **CSS-tabblad** de volgende code:

```
.no-border-table table tr,
.no-border-table table th,
.no-border-table table td {
    border: none;
}
```

De klassenaam is `no-border-table` - je kunt hem aanpassen naar je voorkeursnaam. Zorg ervoor dat de klassenaam in je HTML exact overeenkomt met de klassenaam die in je CSS is gedefinieerd, anders wordt de lay-out niet toegepast. Klik **op Opslaan**.