---
title: Modèle de tableau
description: "![Propriétés communes - options onglet Modèle de tableau](https://wiki.biboard.fr/wp-content/uploads/2024/05/V18__Edition-Web-Proprietes-communes-Modele-de-tableau-1-1024x388.png) Dès lors que l'on décide d'appliquer un layout, il est essentiel d'appliquer un Emplacement à chacun des composants du tableau de bord. Si cela n'est pas le cas, tous les composants non…"
url: "https://wiki.biboard.fr/wiki/modele-de-tableau/"
updated: "2025-09-16"
category: Guide utilisateur / Studio / Options / Edition Web / Propriétés communes
---

# Modèle de tableau

![Propriétés communes - options onglet  Modèle de tableau](https://wiki.biboard.fr/wp-content/uploads/2024/05/V18__Edition-Web-Proprietes-communes-Modele-de-tableau-1-1024x388.png)

Dès lors que l'on décide d'appliquer un layout, il est essentiel d'appliquer un Emplacement à chacun des composants du tableau de bord. Si cela n'est pas le cas, tous les composants non attribués à un Emplacement s'enchainent les uns à la suite des autres à partir du dernier composant avec un Emplacement.

## Option

### Emplacement

```
Permet de spécifier le positionnement du composant. Celui-ci est défini dans le layout sélectionné via les options de l'onglet Propriétés du tableau de bord / Disposition / Modèle (et Type = Framework Javascript)
```

## Exemple

### Sélection du Layout

![Modèle de tableau - Propriétés du TdB - configuration tableaux avec Layout](https://wiki.biboard.fr/wp-content/uploads/2024/05/V18__Proprietes-du-tableau-de-bord_03-1024x222.png)

Ici, le Layout Grille 2x2 est sélectionné.

### Définition du Layout

Vous pouvez consulter la définition du layout (CSS et XML) dans le répertoire BiBOARD où sont déposés tous les layouts. cf. C:\Program Files (x86)\BiBOARD\BiBOARD_v18_A\Web\resources\layouts\Layout-Grille_2x2_barreGauche. Vous pouvez créer vos propres layouts.

```
<?xml version="1.0" encoding="UTF-8"?><layout type='genericjs'>...                <div class="aside">                    <div BBLocationId="Barre côté (gauche)" class="cell size12"/>                </div>                <div class="principal flex-grid">                    <div class="row flex-just-center">...        <script src="/resources/layouts/Layout-Grille_2x2_barreGauche/js/Layout-Grille_2x2_barreGauche.js"></script>    </report></layout>
```

Dans le studio, le composant tableau_7 est configuré avec l'option **Emplacement = Barre (côté gauche)** dans **Modèle de tableau**.

![Modèle de tableau - configuration des composants et Layout dans le TdB](https://wiki.biboard.fr/wp-content/uploads/2024/05/V18__Modele-de-tableau-Layout-Exemple-02-1024x702.png)

A l'affichage, on constate que le composant est positionné par rapport à la définition effectuée dans la description du layout grille 2x2 et non par rapport à son positionnement dans le Studio.

![Modèle de tableau - affichage des composants avec layout associé](https://wiki.biboard.fr/wp-content/uploads/2024/05/V18__Modele-de-tableau-Layout-Exemple-1024x528.png)