web-dev-qa-db-fra.com

Pourquoi la mise en grille Bootstrap) est-elle préférable à une table HTML?

[Remarque: pour ceux qui risquent de confondre cette question avec "pourquoi ne pas utiliser de tableaux pour la mise en page HTML", je ne pose pas cette question. La question que je pose est de savoir pourquoi une disposition de grille est fondamentalement différente d’une disposition de tableau.]

Je recherche des bibliothèques CSS (en particulier Bootstrap) pour un projet. Je suis un programmeur plutôt qu'un concepteur Web et j'estime que je pourrais bénéficier d'une bibliothèque qui intègre un bon design.

Nous savons tous que l'utilisation de tableaux HTML pour la présentation de base d'un site est une mauvaise pratique, car elle associe présentation et contenu. L'un des avantages fournis par les bibliothèques CSS telles que Bootstrap) est qu'elles offrent la possibilité de créer des présentations "en grille" sans utiliser de tableaux. J'ai quelques difficultés à comprendre comment leurs présentations en grille diffèrent de manière significative de la présentation de table équivalente.

En d'autres termes, quelle est la différence fondamentale entre ces deux exemples de HTML? Ai-je tort de penser que la disposition de la grille est simplement un tableau portant un autre nom?

<div class="row">
    <div class="span16"></div>
</div>

<div class="row">
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
</div>

et

<table>
  <tr>
    <td colspan=4></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
htmltwitter-bootstraphtml-tablegrid-layouthtmllayout
60
Larry Lustig

La différence est que le premier exemple est marqué sémantiquement, en supposant que les données marquées ne sont pas réellement tabulaires. <table> ne doit être utilisé que pour données tabulaires, pas pour les données affichées dans une présentation similaire à celle d'un tableau.

Il est cependant correct de dire que l'utilisation de packages CSS tels que Bootstrap, qui nécessitent d'assigner des classes à des éléments HTML pas sémantiques mais présentés, réduit la séparation du contenu et de la présentation, ce qui rend la différence quelque peu discutable. Vous devriez attribuez des classes sémantiquement significatives à vos éléments et utilisez des mixins lesscss (ou une technologie similaire) pour affecter le comportement de présentation défini dans le cadre CSS à ces classes, au lieu d'assigner directement les classes de présentation aux éléments.

Dire:

<div class="products">
    <div class="product"></div>
</div>

.products {
    .row;
}

.products > .product {
    .span16;
}

Notez que je dis devrait. En pratique, ce n’est pas nécessairement l’option la plus pratique, mais ce devrait être l’objectif théorique.

32
deceze

Je crois que commentaire CBroe est la meilleure option, j'ai donc choisi de la clarifier.

Évitez les div. Un div devrait être votre dernier recours, pas votre première option. Au lieu de cela, essayez d’utiliser Bootstrap les classes sur les éléments réels. Par exemple:

<form class="container">
    <fieldset class="row">
        <label class="span4" for"search">Type your search</label>
        <input class="span6" type="text" id="search" />
    </fieldset>
</form>

Il est dommage d’utiliser FieldSet pour contenir un seul champ, mais c’est sémantiquement meilleur que d’utiliser un div pour la même chose. Le standard HTML5 définit de nombreux nouveaux éléments de conteneur, tels que article, section, header, footeret bien d’autres . Dans certains cas, vous devrez utiliser div, mais si vous minimisez son utilisation, votre code sera beaucoup plus sémantique.

19
Metalcoder

La différence fondamentale est que vous pouvez "redistribuer" la mise en page avec Bootstrap pour différentes tailles d’affichage en utilisant simplement des requêtes multimédia sans avoir à modifier votre balisage. Par exemple, je peux décider que sur les ordinateurs de bureau, vos 4 divs doivent se trouver sur la même ligne, car l'utilisateur dispose d'un écran large haute résolution, mais sur les téléphones, je souhaite 2 plongées sur une ligne et les prochaines divs sur les lignes suivantes. Ainsi, je peux adapter le nombre de colonnes à chaque ligne à l'aide de requêtes multimédia. utiliser des tableaux HTML codés en dur, il est très difficile de le faire.

Cela dit, je n'aime pas trop l'implémentation de bootstrap) pour les raisons suivantes:

  1. Il a des points d'arrêt codés en pixels. Cela signifie que, à mesure que la résolution d'affichage des téléphones et des tables augmente, votre site Web peut commencer à afficher des dispositions inattendues sur ces appareils. Le nombre de pixels est un proxy médiocre pour l'affichage taille.
  2. Il limite la zone d'affichage maximale utilisée à 1170 pixels, ce qui est encore une déception pour les utilisateurs dotés d'écrans larges Nice, qu'ils peuvent utiliser pour afficher davantage de contenu dans votre application.
  3. La disposition de Bootstrap n’est pas indépendante de la source, c’est-à-dire que vous ne pouvez pas modifier l’ordre des colonnes défini en HTML. Ceci est cependant plus un point pédant.
  4. La disposition par défaut est pour les résolutions très petites et les dispositions haute résolution ne sont déclenchées que lorsque les requêtes multimédias sont déclenchées. IMO est un mauvais choix, car la résolution des téléphones continuera à être meilleure et plus tôt que plus tard, votre site Web aura une disposition par défaut pour les appareils mobiles obsolètes.
  5. Les mises en page Bootstrap ne sont pas vraiment "sans souci" dans le sens où vous devez lire leurs petits caractères pour voir tous les bogues et les navigateurs qu'ils ne voyaient pas digne de supporter mais que vous pouvez vous soucier. Si vous ciblez des utilisateurs en Corée du Sud ou en Chine, vous serez surpris, par exemple.

Donc, tout n’est pas d’or dans bootstrap et leur approche n’est pas nécessairement la meilleure possible (en passant, une autre chose que je méprise dans bootstrap est leur obsession de soi-disant "jumbotrones" - ces biens immobiliers gaspillant des en-têtes incommodes dans votre visage - que j'espère que la communauté ne commencera pas à prendre pour "un nouveau standard"). Personnellement, j'utilise une mise en forme de table CSS (display:table) ces jours-ci qui présente des avantages similaires à bootstrap sans codage en dur <table> dans mon balisage. Je peux toujours utiliser des requêtes multimédia pour réorganiser les lignes en fonction de l'orientation portrait ou paysage, par exemple. Cependant, l’avantage le plus important est que mes mises en page sont réellement indépendantes du pixel, voire du pourcentage. Par exemple, dans une disposition en 3 colonnes, je laisse le contenu décider de la quantité d’espace nécessaire pour la première et la dernière colonne. Il n'y a pas de pixel ni même de largeur en pourcentage. La colonne centrale récupère tout l'espace restant (ce qui est une bonne chose pour mon application, mais peut-être pas pour les autres). En outre, j’utilise ems dans les points de rupture de la requête multimédia, ce qui, de manière surprenante bootstrap).

10
Shital Shah

J'utilise la grille Bootstrap pour la mise en page, les tableaux pour les données tabulaires.

Je considère la grille dans Bootstrap, non pas comme une grille au sens des développeurs, comme un contrôle gridview, mais plutôt dans le sens de la mise en page de conception - comme une grille contenant le contenu de la page. Et bien que la grille Bootstrap puisse également être utilisée pour créer une grille conventionnelle contenant des données tabulaires, comme le souligne déceze, ce type de grille convient mieux aux tableaux HTML, qui sont toujours acceptables. dans ce scénario.

4
DShultz

si vous n'utilisez que des tableaux, je pense que vous manquerez beaucoup de flexibilité pour redimensionner votre document pour mobile/tablettes sans avoir à créer une page distincte pour chaque appareil. Une fois que la structure de votre table est définie, tout ce que vous pouvez réellement faire est d’effectuer un zoom avant ou arrière.

3
hovrakziggler

Bien qu'il n'y ait pas nécessairement beaucoup de différence sémantique entre les deux ensembles de balises (puisque les classes utilisées par le système de grille de Bootstrap sont en effet purement de présentation), une distinction très importante est que le système de grille est beaucoup plus flexible.

Il serait très difficile, par exemple, de faire en sorte que votre mise en page basée sur un tableau réponde à différentes tailles d'écran. Il n'y a aucun moyen d'indiquer au navigateur d'afficher un élément td en dessous de , un autre élément td dans la même ligne. Alors qu'avec l'exemple div, c'est facile à faire, et le même balisage peut être présenté de différentes façons même lorsque les classes sont " "présentation" en ce sens qu'ils définissent les proportions relatives et le positionnement des éléments sur la page.

2
Louis Simoneau

Si vous me le permettez, j'aimerais résumer ce que j'ai recueilli à partir des autres commentaires et de l'explosion de liens que j'ai subie sur cette page:

Le problème avec l'utilisation des tableaux n'est pas la disposition de la grille, mais la tentative de l'exprimer avec HTML au lieu de CSS.

Bootstrap permet la mise en forme de grille via (principalement) du CSS pur, ce qui explique pourquoi tout est en ordre. La partie "principalement" vient du fait que votre code HTML sera toujours contaminé par vos données de présentation, mais plus subtilement:

<nav class="span4"> ... </nav>
<article class="span8"> ... </article>

Ceci est sûrement beaucoup plus sémantique et maintenable que les anciennes conceptions tabulaires, mais les 'span4' et 'span8' sont toujours des données d'affichage intégrées à notre code HTML. Cependant, étant donné que la conception ne peut jamais être vraiment découplée de nos données (par exemple, les div imbriquées), il s'agit d'un prix raisonnable à payer.

Cela dit, même ce couplage peut être rompu si vous utilisez des fonctionnalités CSS plus modernes fournies par un langage prétraité tel que LESS . Le même exemple:

<nav id="secondary-nav"> ... </nav>
<article id="main-content"> ... </article>

Couplé avec le MOINS suivant:

#secondary-nav{
    .span4;
    // More styling (padding, etc) if needed
}
#main-content{
    .span8;
}

Cela crée un code HTML et une feuille de style entièrement découplés, ce qui est idéal, car le code HTML est plus propre et plus lisible, et les modifications apportées peuvent être effectuées avec moins de modifications du code HTML. Toutefois, cela ne fonctionne que si vous utilisez LESS ou un autre pré-processeur CSS, car CSS ne prend actuellement pas en charge les mixins (autant que je sache).

Nous utilisons déjà LESS sur mon lieu de travail, je sais donc que je vais pousser à l’utilisation de ce type de solution. Je suis un fervent partisan du découplage sémantique HTML et de la conception de données. :)

1
Gilthans

La version avec table, tr, td dépend des algorithmes du navigateur - habillage, largeur dynamique, marges, centrage, etc. La version avec div peut être plus facilement ajustée par css et les scripts.

0
Andrei

Fondamentalement, les DIV sont des DIV et les éléments de la table sont simplement des éléments de la table. Le problème avec les tables est souvent simplement de garder trace de toutes les colonnes et des lignes car il s’agit en définitive d’une construction de données stricte. Les DIV sont beaucoup plus souples et pardonnent.

Par exemple, si vous voulez prendre les quatre DIV avec la classe qui est égale à "span4" et les changer à une largeur de 2 colonnes, il vous suffira d’ajuster un petit morceau de CSS pour la classe externe "rangée". et peut-être la classe "span4". En fait, lorsque je faisais des DIV de ce type, j’éviterais d’appeler des DIV individuelles "span4" ou un autre numéro.

Mon approche serait de créer une DIV de wrapper parent appelée "rowspan" et que les DIV internes auraient un ID générique, comme peut-être "cellule".

<div class="rowspan">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
</div>

Chaque classe de "cellule" peut avoir une largeur de 100 pixels par exemple, puis la "rangée" parent peut être de 400 pixels. Cela équivaudrait à 4 colonnes d'affilée. Vous voulez en faire 2 colonnes? Aucun problème! Il suffit de changer "rowspan" pour avoir une largeur de 200 pixels. À ce stade, tout est en CSS, il est donc facile de le faire sans avoir à modifier la structure de la page dans le DOM.

Mais avec des tables? Pas facile. Il vous faudrait essentiellement re-rendre le tableau avec </tr><tr> balises pour créer de nouvelles lignes.

0
JakeGould