table avec Bootstrap 5

**laurentSc** · 10/07/2022, 20h14

Bonjour,
je connais Bootstrap ainsi que Wordpress (grosso modo pour les 2), mais c'est la première fois que j'insère Bootstrap dans un site Wordpress. Mon intention est de faire une table avec des largeurs de colonnes différentes.

Tout d'abord, j'ai intégré Bootstrap dans Wordpress. Pour cela, j'ai ajouté

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
/*
 *ajouter bootstrap
 */
wp_enqueue_script( 'bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js', array( 'jquery' ), null, true );
 
wp_enqueue_style( 'bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css');

dans functions.php du thème enfant.

Le plugin Wappalyzer de Firefox l'a bien détecté.

Je suis parti ensuite d'un tuto. Il propose plusieurs tableaux Bootstrap. J'en ai retenu un qui permet de régler la largeur de chaque colonne :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
 
<!DOCTYPE html>
<html>
    <head>
        <title>Cours Bootstrap 4</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <!--Occupe 2 colonnes-->
                <div class="col-2 bg-info">1er élément</div>
                <!--Occupe 4 colonnes-->
                <div class="col-4 bg-warning">2è élément</div>
                <!--Occupe 6 colonnes-->
                <div class="col-6 bg-success">3è élément</div>
            </div>
        </div>
    </body>
</html>

Pour le contenu de la page Wordpress, je ne retiens que le contenu du body :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div class="container">
    <div class="row">
        <!--Occupe 2 colonnes-->
        <div class="col-2 bg-info">1er élément</div>
        <!--Occupe 4 colonnes-->
        <div class="col-4 bg-warning">2è élément</div>
        <!--Occupe 6 colonnes-->
        <div class="col-6 bg-success">3è élément</div>
    </div>
</div>

Le souci est qu'au lieu que les 3 cellules soient sur une seule ligne, chacune est placée sur une ligne différente (alors que si je teste ce code en dehors de Wordpress, elles sont sur une seule ligne). Peut-on me corriger ?

**laurentSc** · 11/07/2022, 00h49

Ne sachant pas utiliser Bootstrap dans Wordpress, j'ai fait du html + du CSS simples...

**grunk** · 11/07/2022, 10h57

Tu parles de table mais tu fais des div. Quelle est ton but ?
Afficher des données (genre excel)? => <table>
Ou structurer ton interface ? => Grille avec row et col

Ensuite concernant wordpress est tu certains que tu n'as pas un autre CSS qui vient écraser celui que tu insères ?
C'est assez simple à voir avec l'inspecteur d'élément de la console de développeur du navigateur (F12)

Pour bootstrap la valeur sure c'est la doc officielle , le reste , il faut se méfier des différences entre les versions.

**laurentSc** · 11/07/2022, 12h40

Bonjour,
dans mon idée, il était possible de créer un tableau avec des div + du CSS, il est probable en effet que le CSS ait été écrasé mais je ne peux vérifier car j'ai écrasé le code qui utilisait Bootstrap par une version avec <table>

**grunk** · 11/07/2022, 15h13

C'est possible de créer un tableau mais il faut distinguer 2 cas :

- Soit on affiche des données tabulaire , auquel cas on utilise la balise <table>
- Soit on veux faire de la mise en page auquel cas on utilise une grille avec par exemple des des <div>

Il y'a 20 ans la mise en page se faisait avec des <table> et c'est globalement une mauvaise pratique car on détourne un élément de son usage. Aujourdhui tout le monde utilse des grilles (généralement basée sur les flexbox) pour la mise en page mais ca ne veux pas dire qu'il ne faut pas utiliser des tables quand elles sont utiles

**laurentSc** · 11/07/2022, 15h22

Envoyé par grunk

Il y'a 20 ans la mise en page se faisait avec des <table>

Même il y a 16 ans, vu que c'était le cas quand j'ai démarré le développement web...et à l'époque, on faisait beaucoup de mise en page à l'aide de balises html, aujourd'hui remplacées par du CSS.

table avec Bootstrap 5

WordPress PHP

Vue hybride

Discussions similaires

Partager

Partager